This is a migrated thread and some comments may be shown as answers.

Grid Horizontal scroll - Batch Edit - Static Headers

6 Answers 201 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Charles Hayes
Top achievements
Rank 1
Charles Hayes asked on 22 Mar 2018, 06:43 PM

We have a grid that requires horizontal scrolling due to the number of columns present.  We also have Static Headers = true so the headers remain while vertical scrolling.  When in Batch edit, with AllowKeyboardNavigation = true, the headers do not scroll horizontally with the data.

The width of the grid is set at 100% and each column is sized using headerstyle-width.  itemstyle-width is not used anywhere.

When we remove the static headers, the headers scroll horizontally correctly, but of course, the headers scroll out of view when you vertically scroll.

Is there some way to get the horizontal scrolling to work properly with keyboard navigation and keep Static Headers?

 

Thanks

Chuck

 

6 Answers, 1 is accepted

Sort by
0
Charles Hayes
Top achievements
Rank 1
answered on 23 Mar 2018, 04:02 PM

Some more information:

This is happening when using the tab key to navigate from one cell to the next.

On Chrome: The headings do not horizontally scroll with the data and the frozen columns scroll off the grid (only come back when you use the horizontal scroll bar to go to the very end of the data).

IE and Firefox:  The headings scroll with the data, but the frozen columns still scroll off  the grid (Same as above).

Have not yet tried Safari or Edge.

Any ideas what may be causing this?

 

Thanks

Chuck

 

0
Attila Antal
Telerik team
answered on 27 Mar 2018, 02:20 PM
Hi Chuck,

To make scrolling of the content smooth while using static headers, you can set the ClientSettings-Selecting-CellSelectionMode to SingleCell and disable FrozenColumns, thus you can easily navigate left and right within the table. Please note, the combination of Frozen column and inline editing (InPlace or BatchEditing) mode is not supported. (for more, you can check out the Unsupported Scenarios and Frozen Columns - Limitation)

Please test the sample page from the attachment to see the above scenario in action.

I hope this will prove helpful.

Kind regards,
Attila Antal
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Charles Hayes
Top achievements
Rank 1
answered on 27 Mar 2018, 02:42 PM

Thanks Attila, that was the problem.  The scrolling is working as expected now.

The next task is to get the up and down arrow keys to not change the selection in combo boxes and date pickers.

 

Thanks Again.

Chuck

 

0
Attila Antal
Telerik team
answered on 27 Mar 2018, 03:04 PM
Hi Chuck,

Please check out the following article, which might be the answer for that question Cancel Enter and Arrow Key Press.

KInd regards,
Attila Antal
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Charles Hayes
Top achievements
Rank 1
answered on 27 Mar 2018, 03:49 PM

Attila;

 

I have tried that method, but it does not work for some reason.  The JavaScript function is called, I capture the correct key code, but the event is not canceled.  I assume it is something else I am doing that is causing this, but I cannot find the reason.

 

Thanks

 

0
Attila Antal
Telerik team
answered on 30 Mar 2018, 02:17 PM
Hi Chuck,

Could you please try to use the args.get_domEvent().preventDefault(); method instead and see if that will cancel the event?

If the issue still persist, please try to modify the sample I've sent earlier that will resemble the scenario at your side and send it back to us for further investigation.

Kind regards,
Attila Antal
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Charles Hayes
Top achievements
Rank 1
Answers by
Charles Hayes
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or