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.

Columns only partially scrolled into view when using the keyboard.

Thread ID:

Created:

Updated:

Platform:

Replies:

121783 Jan 25,2016 11:38 AM Jan 27,2016 07:27 AM JavaScript 3
loading
Tags: ejGrid
Greg Gannicott
Asked On January 25, 2016 11:38 AM

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 [Syncfusion]
Replied On January 26, 2016 05:33 AM

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
Replied On January 26, 2016 06:47 AM

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 [Syncfusion]
Replied On January 27, 2016 07:27 AM

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.

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.

;