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.

keyboard navigation with filter popup

Thread ID:

Created:

Updated:

Platform:

Replies:

120267 Sep 16,2015 02:02 AM Sep 28,2015 08:48 AM JavaScript 5
loading
Tags: ejGrid
Rakesh Advani
Asked On September 16, 2015 02:02 AM

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 [Syncfusion]
Replied On September 17, 2015 06:55 AM

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
Replied On September 23, 2015 02:05 AM

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 [Syncfusion]
Replied On September 25, 2015 10:05 AM

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
Replied On September 26, 2015 05:14 AM

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 [Syncfusion]
Replied On September 28, 2015 08:48 AM

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.


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.

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.

;