I want keyboard grid group and filtering with keyboard

[Bharat Buddhadev]

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]

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]

 <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]

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