keyboard navigation with filter popup

[Rakesh Advani]

Technology must be angular js and mvc

I have applied grid with filtering 

1) I want to click on filter button of grid header using keyboard.

2) when we click on filter button with mouse we are getting  filter popup I also want to access the filter popup with keyboard.

Thanks Waiting for your quick reply.

 

For your better understanding I am sharing image with you.

Attachment: filterkeyboard_de95f4a3.rar

[Madhu Sudhanan P]

Hi Rakesh,

Thanks for contacting Syncfusion products.

From the query we understood that you want to open the filter menu using key board. To do so we can use the following code example to achieve the requirement.

<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 == 70) {  //shift + F - Open filter

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

                        }                      

                    }

                   . . . .
                });

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

[Rakesh Advani]

thanks for your previous reply

I am able to open filter popup with keyboard 

but how to access that filter popup controls

popup has option search and ok and cancel button 

I wan to access that popup controls with keyboard

If possible provide in angular js

Attachment: filterkeyboard_72e87bd5.rar

[Saravanan Arunachalam]

Hi Rakesh,

We have analyzed your query and we have achieved your requirement using keydown even on filter dialog. Please refer to the following code example.

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

             . . .

e-actioncomplete="complete" >

angular.module('integratorModule', ['ejangular'])

            .controller('integratorTemplatesController', ["$scope", function ($scope) {

    . . .

              $scope.complete = function(args){

                                  if(args.requestType == "filterafteropen"){

                                         . . .

                                         $("#integratorTemplateGrid").find(".e-excelfilter").find("#integratorTemplateGrid_SearchBox:visible").focus(); //focus search box in dialog

                                  }

                           }

   . . .

   $(document).on("keydown",".e-excelfilter",function(e){

              if(e.keyCode === 13) //enter key for ok

                     $("#integratorTemplateGrid").find(".e-excelfilter").find("#integratorTemplateGridnumber_OkBtn:visible").trigger("click");

              if(e.keyCode === 27) //Esc key for cancel

                     $("#integratorTemplateGrid").find(".e-excelfilter").find("#integratorTemplateGridnumber_CancelBtn:visible").trigger("click");

                                        

                           });

      . . .  

}

 

We have modified the sample that can be downloaded from the following link:

http://www.syncfusion.com/downloads/support/forum/120267/ze/ang-key-191355791

Regards,

Saravanan A.

[Rakesh Advani]

Issue : Filtering with keyboard not working when default grouping is set

Thanks for your previou reply

I have just add small change in provided code. I have just set default grouping on page load or grid load.

  So when I click on 

  1) alt  + j 

 2) shift + f filter popup is not able to open.

Below line is small change in your code. 

     $scope.targetGroupColumn = ["EmployeeID"];

Thanks for your previous reply

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="integratorModule">

<head>

    <title></title>

    <link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/13.2.0.34/js/web/flat-azure/ej.web.all.min.css" />

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>

    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>

    <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>

    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script>

    <script src="https://cdn.syncfusion.com/13.2.0.34/js/web/ej.web.all.min.js"></script>

    <script src="http://js.syncfusion.com/demos/web/scripts/jsondata.min.js"></script>

    <script src="https://cdn.syncfusion.com/13.2.0.34/js/common/ej.widget.angular.min.js  "></script>

   

</head>

<body>

    <div ng-controller="integratorTemplatesController">

        <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-groupsettings-groupedcolumns="targetGroupColumn" e-allowfiltering="true" e-filtersettings-filtertype="excel" e-actioncomplete="complete" e-actionbegin="begin">

        </div>

      

    </div>

    <script type="text/javascript">

var  activectrl;

        angular.module('integratorModule', ['ejangular'])

            .controller('integratorTemplatesController', ["$scope", function ($scope) {

                            

                $scope.data = window.gridData.slice(0, 25);

                $scope.getList = function () {

                    $scope.data = window.gridData.slice(0,25);

                }

                $scope.columns = [

                                { field: "OrderID", headerText: "Id", width: 100 },

                                { field: "EmployeeID", headerText: "EmployeeID",  width: 100 },

                                { field: "CustomerID", headerText: "Customer ID", width: 100 }                               

                ];

                $scope.targetGroupColumn = ["EmployeeID"];

$scope.complete = function(args){

if(args.requestType == "filterafteropen"){

$("#integratorTemplateGrid").find("#integratorTemplateGrid_SearchBox").val("");

$("#integratorTemplateGrid").find(".e-excelfilter").find("#integratorTemplateGrid_SearchBox:visible").focus(); //focus search box in dialog 

}

}

                $(document).on("keydown", function (e) {                    

                    if (e.altKey && e.keyCode === 74) { // j- key code.

                        $("#integratorTemplateGrid").focus();  //focus grid

                        $("#integratorTemplateGrid").find("th:first").addClass("e-activecell");

                    }

                });

$(document).on("keydown",".e-excelfilter",function(e){

if(e.keyCode === 13) //enter key for ok

$("#integratorTemplateGrid").find(".e-excelfilter").find("#integratorTemplateGridnumber_OkBtn:visible").trigger("click");

if(e.keyCode === 27) //Esc key for cancel

$("#integratorTemplateGrid").find(".e-excelfilter").find("#integratorTemplateGridnumber_CancelBtn:visible").trigger("click");

});

                $(document).on("mouseup", function (e) {  //mouseup

                    if ($(e.target).hasClass("e-headercelldiv")) {

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

                        var currentcell = obj.getHeaderTable().find(".e-activecell");

                        currentcell.removeClass("e-activecell");  //remove active cell

                    }

                });

                $("#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");

$(document).find("#integratorTemplateGrid").find("#integratorTemplateGrid_SearchBox:visible").addClass("e-activecell");

                        }                       

                    }

                    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();

                    }

                });

            }]);

    </script>

</body>

</html>

Waiting for your quick reply

[Saravanan Arunachalam]

Hi Rakesh

We analyzed your query and we considered this query “Perform Grid operation such as filtering sorting and grouping using keyboard” as a feature and a support incident has been created under your account to track the status of this feature. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

Regards,

Saravanan A.