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

Issue with Scrolling and dynamic width columns

9 Answers 234 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 03 Jul 2008, 05:20 PM

There is an odd display issue with the RadGrid that I am seeing.

It seems that if you have a mix of fixed width columns and dynamic width columns, that the headings and items no longer line up when the Grid scrollbar appears.

Bascically, it appears that as you have columns (left to right), that are fixed, all is good and they line up, but all columns following a dynamic column no longer line up and the rest of the columns follow suit.  Also, there appears to be a blank section towards the end of the grid that looks sized to match up with the scroll bar, but it doesn't.  Instead there is un skinned heading above the scrollbar.  I have an image, but wasn't sure how to get that to you.

In my sample below, all columns after the Description column fail to line up with their headings.

<telerik:RadGrid ID="rgAttributes" runat="server" Skin="Vista" Width="100%" AutoGenerateColumns="false">  
    <ClientSettings> 
        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" ScrollHeight="100px">  
        </Scrolling> 
    </ClientSettings> 
    <MasterTableView TableLayout="Fixed">  
        <Columns> 
            <telerik:GridCheckBoxColumn DataField="IsRequired" HeaderText="Req" UniqueName="IsRequired">  
                <HeaderStyle Width="30px"/>  
                <ItemStyle Wrap="false" Width="30px"/>  
                <FooterStyle Width="30px"/>  
            </telerik:GridCheckBoxColumn> 
            <telerik:GridBoundColumn DataField="Description" HeaderText="Description" UniqueName="Description">  
                <HeaderStyle Width="100%" /> 
                <ItemStyle Wrap="false" Width="100%" /> 
                <FooterStyle Width="100%" /> 
            </telerik:GridBoundColumn> 
            <telerik:GridBoundColumn DataField="Display" HeaderText="Display" UniqueName="Display">  
                <HeaderStyle Width="100px"/>  
                <ItemStyle Wrap="false" Width="100px"/>  
                <FooterStyle Width="100px"/>                                                                            </telerik:GridBoundColumn> 
            <telerik:GridBoundColumn DataField="Value" HeaderText="Value" UniqueName="Value">  
                <HeaderStyle Width="100px"/>  
                <ItemStyle Wrap="false" Width="100px"/>  
                <FooterStyle Width="100px"/>                                                                            </telerik:GridBoundColumn> 
        </Columns> 
    </MasterTableView> 
</telerik:RadGrid> 

Thanks!

Michael

9 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 03 Jul 2008, 05:35 PM
Hi Michael,

Please remove all ItemStyle-Width declarations and use only HeaderStyle-Width - this is enough and it's better.

Let us know whether it makes any difference. If you still have problems, please specify which browser you are using.


Greetings,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Michael
Top achievements
Rank 1
answered on 03 Jul 2008, 05:41 PM
Thanks Dimo,

This did not solve the issue.  I am using IE7.

I did see a few other posts regarding this issue, but they seemed to mention that using the built in skins ands having no gridlines should prevent it.  I am using the Vista skin and no gridlines, but still have the problem.
Any other thoughts?

Thanks!

Michael
0
Dimo
Telerik team
answered on 03 Jul 2008, 06:11 PM
Hi Michael,

Hm, I took your RadGrid declaration and placed in on an empty page. The columns aligned without making any modifications. Could you open a new support ticket and send us a sample project, so that we can investigate locally? Thank you in advance.


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Michael
Top achievements
Rank 1
answered on 03 Jul 2008, 06:26 PM
Did you populate it with enough data to cause the scrollbar to appear?

That is when the issue appears.

Thanks!

Michael
0
Dimo
Telerik team
answered on 03 Jul 2008, 06:55 PM
Hello Michael,

Yes, this is what I got, using exactly the same declaration as you provided (attached).

Am I missing something? I am testing with Telerik.Web.UI 2008.1 619.

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Michael
Top achievements
Rank 1
answered on 03 Jul 2008, 07:41 PM
I was hoping to not send you the entire webpage code as it is company sensitive...

The RadGrids that are showing this issue nested in a series of controls as follows:

RadGrid (not using scrolling here, so ok)
    formtemplate
        table
            tr
                td
                    RadTabStrip
                    RadMultiPage
                        RadPageView
                            table
                                tr
                                    td
                                        RadGrid (need scrolling and get this bad display)

Does this help?

Thanks!

Michael

P.S.  How do you attach an image?  I have one of this issue.
        
0
Dimo
Telerik team
answered on 03 Jul 2008, 08:21 PM
Hi Michael,

You cannot attach files in the forum, but you can do this in support tickets, so I recommend that you open a new support ticket and send us a small working project, which reproduces the issue with some dummy data. Otherwise it will be hard for us to track down and solve the problem. Thank you for understanding.


Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Michael
Top achievements
Rank 1
answered on 03 Jul 2008, 09:32 PM
Dimo,

One last bit of information, in case this helps...

This is contained within a module within DotNetNuke with PartialPagePostback enabled.

Can you please try this scenario as it will be very difficult and time consuming for me to attempt to send you a code example.  We are in a crunch time right now and I can not afford the time to send that.

Also, I noticed that if I have a control that causes postback on the same page, the columns initially look fine, but the a second later they adjust to their incorrect positions.  At the same time, I have a RadTabStrip with the tabs set to align as justified... on postback, they look incorrect at first, then they expand to justify and fill the space.

I appreciate your assistance!

Michael
0
Dimo
Telerik team
answered on 04 Jul 2008, 06:53 AM
Hello Michael,

Ah, DNN. This probably means that the browsers are rendering the pages in Quirks mode (no XHTML doctype). Well, I tested in quirks mode and indeed, the alignment was broken. This is fixed now and you will be able to test next week when we release the so-called "Futures" (beta of the coming Q2 2008 release). Let us know if you still have problems then.

Thank you for bringing this issue to our attention. You Telerik points have been updated.

As for the TabStrip and its expanding - this issue can occur if the control is placed inside a table cell. In this case the TabStrip has to wait for the table content to load and its layout to adjust and after that, the TabStrip's width and layout is calculated. This is a common drawback of using table-based layouts - the content can shrink and expand until everything is loaded.


Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Michael
Top achievements
Rank 1
Share this question
or