We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

I want keyboard grid group and filtering with keyboard

Thread ID:

Created:

Updated:

Platform:

Replies:

120244 Sep 14,2015 05:06 AM UTC Sep 17,2015 10:52 AM UTC JavaScript 3
loading
Tags: ejGrid
Bharat Buddhadev
Asked On September 14, 2015 05:06 AM UTC

Technology angular js and mvc

I have applied grouping and filtering in gridview 
I want to use grouping and filtering with keyboard

can you give me example of use of grouping and filtering with keyboard


Alan Sangeeth S [Syncfusion]
Replied On September 15, 2015 10:25 AM UTC

Hi Bharat,
 
Thanks for using Syncfusion products.
 
We need to have information such as field names, field values, etc., for Grouping and Filtering operation. Could you get back to us with information on how you would like to give the information of field names, field values, etc., with keyboard for grouping and filtering, so that we could proceed further based on your requirement?
 
Also in "filterbar" FilterType of Grid, we can navigate through filter text boxes in Grid header using "tab" key and after entering the values in filter text boxed we can press "enter" key to filter the column. Please refer the following online sample link.
 http://js.syncfusion.com/demos/web/#!/azure/grid/filtering/defaultfunctionalities 
 
Regards,
Alan Sangeeth S

Bharat Buddhadev
Replied On September 16, 2015 09:49 AM UTC

 <div ma-target-grid-sorting id="targetsGrid" ej-grid e-datasource="data"
                   e-columns="columns"
                   class="gridStyle"
                   e-allowresizing="true"
                   e-allowkeyboardnavigation="true"
                   e-allowscrolling="true"
                   e-allowsorting="true"
                   e-minwidth="550"
                   e-isresponsive="true"
                   e-scrollsettings-height="320"                    
                   e-allowgrouping="true"
                   e-groupsettings-groupedcolumns="targetGroupColumn"
                   e-allowfiltering="true"
                   e-filtersettings-filtertype="excel"
                   >
                </div>


 $scope.columns = [
             { field: "targetNumber", headerText: administrationSecurityResources.targetNumber, width: 100 },
             { field: "targetType", headerText: administrationSecurityResources.targetType, width: 100 },
             { field: "targetName", headerText: administrationSecurityResources.targetName, width: 100 },
             { field: "targetDescription", headerText: administrationSecurityResources.description, width: 100 },
             { field: "accessGroupMarking", headerText: administrationSecurityResources.accessGroup, width: 120 },
        ];

  $scope.targetGroupColumn = ["targetType"];

  $scope.setTargetList = function (targetList) {
            $scope.data = targetList.targetViewModelList;            
            $scope.data = $filter('orderBy')($scope.data, 'targetName');
        }

I want to generated grouping like this
and now after generate need use grouping with keyboard

Madhu Sudhanan P [Syncfusion]
Replied On September 17, 2015 10:52 AM UTC

Hi Bharath,

We can group and filter columns using keyboard using the following code example.


<div class="gridStyle" ng-init="getList()" id="integratorTemplateGrid" ej-grid e-datasource="data"

             e-columns="columns" e-allowkeyboardnavigation="true" e-allowpaging="true"

             e-allowgrouping="true" e-allowfiltering="true" e-filtersettings-filtertype="excel" e-actioncomplete="actioncomplete">

        </div>



$("#integratorTemplateGrid").on("keydown", function (e) {

                    var obj = $("#integratorTemplateGrid").ejGrid("instance"), cell;                  

                    var currentcell = $("#integratorTemplateGrid").find(".e-activecell");

                   

                    if (e.shiftKey) {


                        if (e.keyCode == 71) { //shift + G - Group

                            var field = obj.getColumnByIndex(obj.model.groupSettings.groupedColumns.length)

                         

                            obj.groupColumn(field["field"]);

                        }


                        if (e.keyCode == 85) { //shift + U - Ungroup

                            var gc = obj.model.groupSettings.groupedColumns;

                            obj.ungroupColumn(gc[gc.length -1]);

                        }


                        if (e.keyCode == 70) {  //shift + F - Open filter

                            obj.getHeaderTable().find(".e-activecell .e-filtericon").trigger("tap");

                        }                      

                    }

                    if (e.keyCode == 9) {

                        var nextcell = currentcell.next();

                        if (currentcell.index() != obj.getHeaderTable().find("th.e-headercell").length - 1)

                            currentcell.removeClass("e-activecell") && nextcell.addClass("e-activecell");

                        if (currentcell.length > 0)

                            e.preventDefault();

                    }
                });




We have also created a simple sample and the same can be downloaded from the below location.

Sample Location: http://www.syncfusion.com/downloads/support/forum/120244/ze/ang-key-1793485026

Regards,
Madhu Sudhanan. P

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;