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

Grid header moves on Ajax postback

12 Answers 157 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ashish Sapkale
Top achievements
Rank 1
Ashish Sapkale asked on 23 Aug 2010, 09:07 AM

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

12 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 23 Aug 2010, 10:39 AM
Hello Ashish,

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

Kind regards,
Pavlina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ashish Sapkale
Top achievements
Rank 1
answered on 24 Aug 2010, 07:10 AM

Yes, I am using scrolling.

1.<ClientSettings>
2.  <Selecting AllowRowSelect="true" />
3.  <Scrolling AllowScroll="true" UseStaticHeaders="true" />
4.</ClientSettings>
0
Accepted
Pavlina
Telerik team
answered on 24 Aug 2010, 04:05 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ashish Sapkale
Top achievements
Rank 1
answered on 25 Aug 2010, 07:26 AM

I am adding this style in code

Thank you very much!

0
Hanso
Top achievements
Rank 1
answered on 08 Nov 2011, 04:44 AM
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.

0
Hanso
Top achievements
Rank 1
answered on 08 Nov 2011, 04:44 AM
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.
0
john
Top achievements
Rank 1
answered on 27 Jan 2012, 01:55 PM
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.
0
Pavlina
Telerik team
answered on 31 Jan 2012, 09:30 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
john
Top achievements
Rank 1
answered on 01 Feb 2012, 08:30 AM
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
0
Robert
Top achievements
Rank 1
answered on 02 Mar 2012, 11:18 AM
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.
0
San
Top achievements
Rank 1
answered on 26 Dec 2019, 08:40 AM

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 ??

0
Eyup
Telerik team
answered on 31 Dec 2019, 05:50 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Ashish Sapkale
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Ashish Sapkale
Top achievements
Rank 1
Hanso
Top achievements
Rank 1
john
Top achievements
Rank 1
Robert
Top achievements
Rank 1
San
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or