Grid header moves on Ajax postback

[Ashish Sapkale]

Hello,

I have my grid in ajaxpanel.

With one Edit link button,

When I click on Edit button my header flicks.

Is there any way to find Linkbuttons ClientDatakey so that we can avoid post back ?

Thanks 

Ashish

[Pavlina]

Hello Ashish,

Do you have scrolling and static headers enabled in your project?

Kind regards,
Pavlina
the Telerik team

[Ashish Sapkale]

Yes, I am using scrolling.

1.<ClientSettings>
2.  <Selecting AllowRowSelect="true" />
3.  <Scrolling AllowScroll="true" UseStaticHeaders="true" />
4.</ClientSettings>

[Pavlina]

Hello Ashish,

The columns' flickering is caused by the following: when used with static headers, RadGrid does some layout adjusting on the client. By default, the header area has a right padding, which helps aligning the header area with the data area when a vertical scrollbar is present. In your case there is no vertical scrollbar, so the padding is removed, but you are seeing a flicker because of this.

Possible workarounds are:

1) increase the page size or decrease the RadGrid height, so that a vertical scrollbar appears
2) if you are absolutely sure that there will be no vertical scrollbar needed for this RadGrid instance, you can add the following:

2a) some custom CSS class to the RadGrid, e.g. "MyGrid"
2b) the following CSS rule:

.MyGrid  .GridHeaderDiv_Default
{
        padding-right: 0 !important;
        margin-right: 0 !important;
}

3) enforce a vertical scrollbar to appear also when not needed, with CSS:

.GridDataDiv_Default
{
        overflow-y: scroll !important;
}

I hope this helps.

Regards,
Pavlina
the Telerik team

[Ashish Sapkale]

I am adding this style in code

Thank you very much!

[Hanso]

It is also good to try resizing your column widths

ItemStyle-Width="100px" HeaderStyle-Width="100px"

to better fit your grid column names. Sometimes, everything seems alright in the dev environment with a column name flowing over 2 lines in the column header, but after deploying to a client environment the resolution there causes the column name to display over 1 longer line and the required column display width is just barely enough to show the whole line, causing the grid to flicker.

We found that, in our case, this could be resolved by just increasing the problem column width slightly using the attributes above so that there is enough space to display the full column name in 1 line for situations where the resolution attempts to display it all in one line.

[Hanso]

It is also good to try resizing your column widths

ItemStyle-Width="100px" HeaderStyle-Width="100px"

to better fit your grid column names. Sometimes, everything seems alright in the dev environment with a column name flowing over 2 lines in the column header, but after deploying to a client environment the resolution there causes the column name to display over 1 longer line and the required column display width is just barely enough to show the whole line, causing the grid to flicker.

We found that, in our case, this could be resolved by just increasing the problem column width slightly using the attributes above so that there is enough space to display the full column name in 1 line for situations where the resolution attempts to display it all in one line.

[john]

Could you provide some sample project with the css or the code needed to solve this issue?
I'm facing this problem and the solutions you provide doesn't work for me.

Thanks in advance.

[Pavlina]

Hi,

In order to remove the flicker completely, you will have to remove the UseStaticHeaders="True" setting or set it to "False".

If you have to use scrolling with static headers, you can at least try to remove the vertical resizing flicker by setting ScrollHeight in the Scrolling settings of RadGrid. In this case you should remove the RadGrid's Height property.

Kind regards,
Pavlina
the Telerik team

[john]

Hi,
I need using static headers, so I can't set it to false. I'm already using ScrollHeight value in scrolling section (without Height property's value), and the flicker continues.

Any other suggestion to remove the flicker?

Regards,
John

[Robert]

I have spent some time on this issue myself, figuring out a workaround.

My scenario is we want the grid to have static headers and to have a scroll height.

The workaround I have come up with is in code behind when binding, if row count is less than the amount that would cause a vertical scroll, set UseStaticHeaders=false. else set it to true. If setting use static headers to false, increase the ScrollHeight to allow for the header size. else set it back to required size.

The only complexity is when the column widths can be adjusted, you might find that a user adjusting them can cause the vertical scroll to appear which will show next to the header, not desired as we want the same appearance as if use static headers was true.

A potential solution is to have a javascript function called by the OnGridCreated client event. It can check if gridElement.control.ClientSettings.Scrolling.UseStaticHeaders == false, then set the {div}.style.height="" on the div which has the overflow (scroll area). This will allow the vertical height to be dynamic and therefore prevent the vertical scroll from appearing. Of course when the code behind sets use static headers back to true, it was because there are more rows, therefore the vertical scroll will be present, the script will do nothing and the grid will behave as desired.

Hope it helps.

[San]

Hi team, 

I am also facing a similar problem, where I have headers and filter options below the headers for filtering the respective column values.

The problem is when i use staticheaders true, all seems to be fine, but the headers including the filters seems to be flickering each time page is navigated yotnext or previous page and when we change the count of records displayed in page 

 

Can you please asssist in this ??

[Eyup]

Hello San,

 

You can try the following steps to resolve this issue:

1. When using static headers, every column should have its Width defined as mentioned in the Note here:
https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/functionality/scrolling/scroll-with-static-headers

Try setting a larger Width to the columns.

2. Set a RadAjaxLoadingPanel with the Skin property:
https://demos.telerik.com/aspnet-ajax/ajaxpanel/overview/defaultcs.aspx

3. Try these steps:
https://www.telerik.com/support/kb/reporting/report-designer/details/misaligned-columns-in-radgrid-with-scrolling-enabled

4. If the issue still remains, try these steps:
https://www.telerik.com/forums/radgrid-jumps-to-first-line-when-selecting-row#oMKrk-s78UiZ5ik2B22pow

I hope this will prove helpful.

 

Regards,
Eyup
Progress Telerik