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. Image for the cookie policy date
close icon

I want keyboard grid group and filtering with keyboard

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


3 Replies

AS Alan Sangeeth S Syncfusion Team 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


BB Bharat Buddhadev 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


MS Madhu Sudhanan P Syncfusion Team 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

Loader.
Live Chat Icon For mobile
Up arrow icon