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

Keyboard navigation issue in grid rows.

Thread ID:

Created:

Updated:

Platform:

Replies:

120130 Sep 3,2015 11:05 AM UTC Sep 4,2015 07:20 AM UTC JavaScript 1
loading
Tags: ejGrid
Rakesh Advani
Asked On September 3, 2015 11:05 AM UTC

Hello,

I am using grid in angularjs. i have enabled keyboard navigation by setting up e-allowkeyboardnavigation="true" property. every thing is working fine but there is some issue on rows navigation.
i attached video for that issue so you can better understand.

the issue is when i select first row and press down arrow grid scroll down and selected record is not able to see. this is same happened in bottom like when i select last record and press up arrow the grid scroll up and selected record is not able to see. you can see video for better understand.

this same happen when i press ctrl+home and ctrl+end the selected record is not able to see.

aspect quick reply.

Many Thanks
Rakesh

Attachment: SecurityGridKeyboardIssue20150903_1625_fd50ab1a.7z

Balaji Marimuthu [Syncfusion]
Replied On September 4, 2015 07:20 AM UTC

Hi Rakesh,

Thanks for using Syncfusion products.

Query: #1 the issue is when I select first row and press down arrow grid scroll down and selected record is not able to see. this is same happened in bottom like when i select last record and press up arrow the grid scroll up and selected record is not able to see.

We have analyzed your queries and provided video. Selected records can be viewed by setting scrollOneStepBy value in scrollSettings property. 

While pressing an arrow key, the scrollbar position will added to the given Pixel value in ScrollOneStepBy property.

Please refer to the below Help document,

http://docs.syncfusion.com/js/api/ejscroller#members:scrollonestepby

Please refer to the sample and code example as below,

Sample: Sample



<div id="Grid" ej-grid e-datasource="data" e-allowscrolling="true" e-scrollsettings="scroll" e-allowsorting="true" e-rowselected="rowselected">

                     . . . .


                    </div>


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

            .controller('PhoneListCtrl', function ($scope) {

               

                $scope.data = obj;

                $scope.scroll = { width: 600, height: 300, scrollOneStepBy: 33 }, // default value of rowheight 33

            });


The default value of ScrollOneStepBy is 57. In above code example, we have set the Grid row height to default value.

You can get the row height value of Grid by using the getRowHeight method in Grid. Please refer to the below Help document,

http://docs.syncfusion.com/js/api/ejgrid#methods:getrowheight

Query: #2 this same happen when I press Ctrl+ Home and Ctrl+ End the selected record is not able to see.

We have achieved your requirement in Grid using rowSelected event which is triggers when a row is selected.

Please refer to the below Help document,

http://docs.syncfusion.com/js/api/ejgrid#events:rowselected


<div id="Grid" ej-grid e-datasource="data" e-allowscrolling="true" e-scrollsettings="scroll" e-allowsorting="true" e-rowselected="rowselected" e-allowkeyboardnavigation="true">


                 . . . .       


                    </div>

<script>


   $scope.rowselected = function (args) {

                    var scrollobj = this.getScrollObject();


                    if (this.selectedRowsIndexes[0] == 0) //when first row is selected

                        scrollobj.setModel({ "scrollTop": 0 });


                    if (this.selectedRowsIndexes[0] == $(this.getRows()).length - 1)//when last row is selected

                        scrollobj.setModel({ "scrollTop": this.getContentTable().height() - this.model.scrollSettings.height });

                }

</script>


In above code example, we have set the scroll top position when the first (Ctrl+ Home) and last row are selected (Ctrl+ End) selected.

Please refer to the below Help document,

http://docs.syncfusion.com/js/api/ejscroller#members:scrolltop

Regards,
Balaji Marimuthu


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

;