Columns only partially scrolled into view when using the keyboard.

[Greg Gannicott]

Hello.

When scrolling through the columns using the keyboard, columns are only scrolled partially into view.

I've attached an animated gif showing it taking place.

Steps to Recreate

1. Use the keyboard to set focus on the grid within the Table view.
   
2. With focus on the first column, hit the Shift+right arrow key combination once.
   
3. Focus will be moved onto the next column header, but this column will only be partially scrolled into view - see attached animated gif.
   

Could you investigate please?

Cheers.

Attachment: partial_column_scroll_df911ccb.zip

[Gowthami V]

Hi Greg,

Thanks for using Syncfusion products.

We have analyzed your issue and we are unable to reproduce the issue.

For your reference we have attached the sample below,

http://jsplayground.syncfusion.com/qebs5xoc

Please provide below details to reproduce the issue,

1.       Reproduce the issue in the above sample.

2.       Share the grid rendering code that you have used in your application.

The provided information will help to analyze the issue and provide you the solution as early as possible.

Regards,

Gowthami V.

[Greg Gannicott]

Hi.

Thanks for the response.

I think the issue with it not occurring in the demo is in giving the column header focus.

On ours we're able to give the first column header focus using 'shift+home'. I don't believe that is something we have implemented with any in-house behaviour. But I'm not able to do that on your demo.

Do you know what is required to enable that? I've tried various techniques on your demo (such as allowing sorting) but with no luck.

Thanks.

[Seeni Sakthi Kumar Seeni Raj]

Hi Greg,

From you query, we understand that you would like to achieve the following scenario.

On pressing right arrow, move the scroller as well as on each step of scroller you would like to view the particular column fully (not partial as shown in the gif). Refer to the code example, which will help you to resolve the problem.

In the dataBound event of ejGrid, assign the step value (ejScrollBar’s smallChange API) which must be same as (all) columns width. Following solution has been given based on the all the columns width and ejScrollBar width having unique value (120px). If the column’s hold different width, smallChange must be changed instantly, which will cause an performance issue.

            $("#Grid").ejGrid({

                dataSource: window.gridData,

                allowPaging: true,

                scrollSettings: { height: 300, width: 360 },

                allowKeyboardNavigation: true,

                dataBound: function(args){

                    this.element.find(".e-hscrollbar").ejScrollBar({ smallChange: 120 });//on each step 120px will be moved so you can view the columns completely.

                },

                columns: [

                        { field: "OrderID", width: 120 },

                        //each column must be same width as ejScrollBar's width;

                        // so on each step you can capture the entire column and not partial

                          . . . . .

                        { field: "ShipCountry", headerText: "Ship Country", width: 120 },

                ]
            });

We have prepared a sample that can be referred from the following jsPlayground.

http://jsplayground.syncfusion.com/q3n23y5v

If your requirement is different from this scenario, please share the code example of Grid which would be helpful to analyze the issue and provide the solution as early as possible.

Regards,
Seeni Sakthi Kumar S.