Keyboard navigation issue in grid rows.

[Rakesh Advani]

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]

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