I have two aplications that both use the RadGrid (version 2008.3.1314.35). In one of the applications, I declare the grid in markup, and bind it to a data source. columns are auto generated, and I set TableLayout to Auto.
In the other application, the grid is created at runtime in my code behind (from CreateChildControls). Again, I set TableLayout to auto and use autogenerated columns from a bound data source.
I set my various properties the same for both apps (scrolling enabled, auto layout, nowrap, etc).
The first application, that declares the grid in markup, is fine - the columns automatically size the the data in them, and if horizontal scolling is required, it does that.
The second application creates all columns of equal width even though I have:
In the other application, the grid is created at runtime in my code behind (from CreateChildControls). Again, I set TableLayout to auto and use autogenerated columns from a bound data source.
I set my various properties the same for both apps (scrolling enabled, auto layout, nowrap, etc).
The first application, that declares the grid in markup, is fine - the columns automatically size the the data in them, and if horizontal scolling is required, it does that.
The second application creates all columns of equal width even though I have:
grid.MasterTableView.TableLayout =
GridTableLayout.Auto;
I am at wits end as to why the markup based one would work but the one created from code behind does not honor the auto table layout. I have noticed that the page source between the two has some differences.
1) In the working (markup based) app, the <div> for the GridHeader has style="overflow: hidden; width: 100%", whereas in the code-behind based app the <div> for the GridHeader has style="overflow: hidden; padding-right: 17px;". I don;t know if that width: 100% in the header is making the difference, but I can't figure how to force it in the code behind based app to test it out.
2) In the working app, the ctl00_Header <div> has a width in it's style setting whereas in the code-behind based one there is not.
3) In the working app, the header has a colgroup that looks like this:
<colgroup>
<col width="316"/>
<col width="403"/>
<col width="146"/>
<col width="98"/>
</colgroup>
whereas in the code-behind based app it clooks like this:
<colgroup>
<col width="20"/>
<col/>
<col/>
<col/>
<col/>
</colgroup>Note that one significant difference between the two aps is that the code-behind based app also uses a detail table (so the first visible column, corresponding the the first column in the colgroup above, is the expand/collapse icon for the detail table.)
Any ideas for what might cause a non-markup based app to not honor the TableLayout set to Auto would be aprciated.
-Ed Hinton
13 Answers, 1 is accepted
0
Hello Ed,
There are some RadGrid features, which require Fixed TableLayout - for example column resizing, row resizing, grouping, etc. You seem to be using such a feature for the RadGrid, which appears with a fixed layout.
I would suggest that you set column widths explicitly, according to your preference and control datasource, so that the control's layout and available space are used optimally.
Let us know if you need more information.
All the best,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
There are some RadGrid features, which require Fixed TableLayout - for example column resizing, row resizing, grouping, etc. You seem to be using such a feature for the RadGrid, which appears with a fixed layout.
I would suggest that you set column widths explicitly, according to your preference and control datasource, so that the control's layout and available space are used optimally.
Let us know if you need more information.
All the best,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Ed
Top achievements
Rank 1
Rank 1
answered on 11 Mar 2009, 04:50 PM
It is not known until runtime what columns and how many will be displayed in the grid. Therefore, column widths can't be explicitly set.
Further, this works for me in the one app, just not in the others (two now). I am slowly but surely working through what differences exist in the generated page source, but it is slow going trying to surmise what causes certain attributes to get set for a given RadGrid element in the page source when it is rendered.
I was hoping you mioght be able to shed some light on what settings cause what attributes to appear in the page source. I know it's doable based on the app I have that works, but trying to nail down exactly what property combination generated either markup side or code-behind side is slow going. It also is unclear if it might matter whether an ascx control (in both the working and non-working cases the Radgrid is actually inside an ascx control) is referenced in markup or whether it is loaded at runtime. I am looking into this because in the second non-working scenario I have, the ascx control is referenced in the markup, but in the working scenario, though the RadGrid is in markup, that markup is in an ascx control that is loaded from the OnInit handler of the codebehind of the page.
I still think I'll get it igured out, and if/when i do, i will post what the causes/solutions are, because it would seem to me that being able to display a runtime-determined number of auto-generated columns that are sized to their contents but that may need horizontal scrolling does not seem to me to be that odd an application need.
-Ed
Further, this works for me in the one app, just not in the others (two now). I am slowly but surely working through what differences exist in the generated page source, but it is slow going trying to surmise what causes certain attributes to get set for a given RadGrid element in the page source when it is rendered.
I was hoping you mioght be able to shed some light on what settings cause what attributes to appear in the page source. I know it's doable based on the app I have that works, but trying to nail down exactly what property combination generated either markup side or code-behind side is slow going. It also is unclear if it might matter whether an ascx control (in both the working and non-working cases the Radgrid is actually inside an ascx control) is referenced in markup or whether it is loaded at runtime. I am looking into this because in the second non-working scenario I have, the ascx control is referenced in the markup, but in the working scenario, though the RadGrid is in markup, that markup is in an ascx control that is loaded from the OnInit handler of the codebehind of the page.
I still think I'll get it igured out, and if/when i do, i will post what the causes/solutions are, because it would seem to me that being able to display a runtime-determined number of auto-generated columns that are sized to their contents but that may need horizontal scrolling does not seem to me to be that odd an application need.
-Ed
0
Hello Ed,
It doesn't matter how you register your user control - the RadGrid rendering depends solely on the used functionality and settings.
If you post here the code which creates the RadGrid with a Fixed TableLayout, I will tell you what sets the layout to fixed.
Judging by the provided information and HTML, I think that you either have a GroupSplitterColumn, a RowIndicator column or similar. They have a width of 20px and this requires a fixed table layout, otherwise the width will not be applied correctly.
As for the fact that you can find out the number of columns at runtime - well, you can also set column widths at runtime, using the ColumnCreated event.
http://www.telerik.com/help/aspnet-ajax/grdusingcolumns.html
Regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
It doesn't matter how you register your user control - the RadGrid rendering depends solely on the used functionality and settings.
If you post here the code which creates the RadGrid with a Fixed TableLayout, I will tell you what sets the layout to fixed.
Judging by the provided information and HTML, I think that you either have a GroupSplitterColumn, a RowIndicator column or similar. They have a width of 20px and this requires a fixed table layout, otherwise the width will not be applied correctly.
<colgroup>
<col width="20"/>
<col/>
<col/>
<col/>
<col/>
</colgroup>As for the fact that you can find out the number of columns at runtime - well, you can also set column widths at runtime, using the ColumnCreated event.
http://www.telerik.com/help/aspnet-ajax/grdusingcolumns.html
Regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Ed
Top achievements
Rank 1
Rank 1
answered on 12 Mar 2009, 02:40 PM
I have completely solved my problem (for my target browser environments - not ALL browsers). I encountered a couple remaining issues that i had to solve:
1) In the two apps that didn't work properly, I had some template columns in the markup on which I was explicitly setting widths. The presence of width values for ANY of those columns caused the grid to render with table-layout: fixed, even though i was setting it to Auto.
2) Once I fixed that problem, I was instead getting misaligned column headers from the data columns. The problem appeared to be caused by the fact that I had nowrap set for both the headers and the items, and my header labels were wider in a few cases than the data in the items in some columns, so the header was getting one set of auto colum,nws widths and the item rows another set of auto column widths.
I was able to solve the second problem by leaving the items with nowrap but allowing the headers to wrap. As soon as I did that, it now works correctly. My columns autosize according to content, i get a horizontal scrollbar when needed, and my header and item columns align perfectly (with horizontal gridlines even showing). Note that when i say it works, I should qualify that. It works in IE and Chrome. It still misaligns the coilumn headers and data row columns in Firefox (and in fact resizing the header columns has no particular effect on the item column widths in firefox with these settings). But since IE is our main target for our customers, and chrome is our second choice, I am not required to make it work in firefox for our customers.
To summarize, if your target is IE and/or Chrome and you want the following behavior:
1) Columns determined dynamically as auto-bound at runtime with no advance knowledge of what the columns are (so explicit widths not an option.
2) Those columns automatically sized to the data in them with no item wrap on the data items
3) Horizontal scrollbar automatically shown if needed.
Then what you have to do is:
a) Set MasterTableView.TableLayout to "Auto"
b) Set Scrolling.AllowScroll to "True"
c) Set Scrolling.useStaticHeaders to "True"
d) Set Resizing.ClipCellContentsOnResize to "False" (I'm not sure this one is 100% necessary, but I did see an article that said if this is set to true that you get table-layout: fixed - I am fine with the "False" setting, so i haven't investigated this further.
e) Set headerStyle.Wrap to "True"
f) Do not set explicit widths on ANY of your columns. If you have to set an explcit width on even one column in your markup, then you are going to have to set explicit widths on all the columns you care about. You apparently cannot have a mix of intelligently auto-sized columns and explicitly set column widths. I don't know why, but that's what I discovered. By the way, it's NOT a browser issue - the rendered page source used table-layout: fixed if even one of the columns has an explicit width, so the rendering code is effectively preventing the browser from having control of column widths of the remainign columns if ANY of them have an explicit width. The rendering code forces it to be all or nothing (not the browser).
Honestly, there may be a few other of my settings that are significant, but this has been a confusing enough investigation that I may just have other things set effectively.
I may later if I have time try to figure out how to get columns to align in firefox as well, but things are pretty straight out right now, so that may not happen before april sometime. If I succeed in resolving column alignment under firefox for the above scenario, I'll post the solution to that as well.
-Ed
1) In the two apps that didn't work properly, I had some template columns in the markup on which I was explicitly setting widths. The presence of width values for ANY of those columns caused the grid to render with table-layout: fixed, even though i was setting it to Auto.
2) Once I fixed that problem, I was instead getting misaligned column headers from the data columns. The problem appeared to be caused by the fact that I had nowrap set for both the headers and the items, and my header labels were wider in a few cases than the data in the items in some columns, so the header was getting one set of auto colum,nws widths and the item rows another set of auto column widths.
I was able to solve the second problem by leaving the items with nowrap but allowing the headers to wrap. As soon as I did that, it now works correctly. My columns autosize according to content, i get a horizontal scrollbar when needed, and my header and item columns align perfectly (with horizontal gridlines even showing). Note that when i say it works, I should qualify that. It works in IE and Chrome. It still misaligns the coilumn headers and data row columns in Firefox (and in fact resizing the header columns has no particular effect on the item column widths in firefox with these settings). But since IE is our main target for our customers, and chrome is our second choice, I am not required to make it work in firefox for our customers.
To summarize, if your target is IE and/or Chrome and you want the following behavior:
1) Columns determined dynamically as auto-bound at runtime with no advance knowledge of what the columns are (so explicit widths not an option.
2) Those columns automatically sized to the data in them with no item wrap on the data items
3) Horizontal scrollbar automatically shown if needed.
Then what you have to do is:
a) Set MasterTableView.TableLayout to "Auto"
b) Set Scrolling.AllowScroll to "True"
c) Set Scrolling.useStaticHeaders to "True"
d) Set Resizing.ClipCellContentsOnResize to "False" (I'm not sure this one is 100% necessary, but I did see an article that said if this is set to true that you get table-layout: fixed - I am fine with the "False" setting, so i haven't investigated this further.
e) Set headerStyle.Wrap to "True"
f) Do not set explicit widths on ANY of your columns. If you have to set an explcit width on even one column in your markup, then you are going to have to set explicit widths on all the columns you care about. You apparently cannot have a mix of intelligently auto-sized columns and explicitly set column widths. I don't know why, but that's what I discovered. By the way, it's NOT a browser issue - the rendered page source used table-layout: fixed if even one of the columns has an explicit width, so the rendering code is effectively preventing the browser from having control of column widths of the remainign columns if ANY of them have an explicit width. The rendering code forces it to be all or nothing (not the browser).
Honestly, there may be a few other of my settings that are significant, but this has been a confusing enough investigation that I may just have other things set effectively.
I may later if I have time try to figure out how to get columns to align in firefox as well, but things are pretty straight out right now, so that may not happen before april sometime. If I succeed in resolving column alignment under firefox for the above scenario, I'll post the solution to that as well.
-Ed
0
Hello Ed,
Thanks for the in-depth description of your implementation.
When using static headers, the table-layout is fixed, but it mimics an auto layout by setting column widths programmatically with Javascript, depending on the cell content. Table layout must be fixed in this scenario, otherwise we will not be able to ensure that the header cells align with the data cells.
Regarding the Firefox alignment, please send us a simple runnable web page if the problem persists.
All the best,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Thanks for the in-depth description of your implementation.
When using static headers, the table-layout is fixed, but it mimics an auto layout by setting column widths programmatically with Javascript, depending on the cell content. Table layout must be fixed in this scenario, otherwise we will not be able to ensure that the header cells align with the data cells.
Regarding the Firefox alignment, please send us a simple runnable web page if the problem persists.
All the best,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
ALAN NEMARIC
Top achievements
Rank 1
Rank 1
answered on 23 Feb 2010, 02:01 PM
thnkas for your descriptive response.
I have the same problem as you.
I Have tried you way but fails to get the expected result.
Please let me know if you have modified the same to get the result.
thanks in advance
I have the same problem as you.
I Have tried you way but fails to get the expected result.
Please let me know if you have modified the same to get the result.
thanks in advance
0
Hello Alan,
As mentioned, sometimes the Fixed TableLayout is required. If you provide more information about your scenario and tell us how do you expect the RadGrid control to behave, I will explain whether this is achievable.
Best wishes,
Dimo
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.
As mentioned, sometimes the Fixed TableLayout is required. If you provide more information about your scenario and tell us how do you expect the RadGrid control to behave, I will explain whether this is achievable.
Best wishes,
Dimo
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
Prava kafle
Top achievements
Rank 1
Rank 1
answered on 13 Sep 2011, 06:06 PM
Hi Dimo,
I have a grid where autogenerate = false and tablelayout = fixed. When grouped by some field, the header column do not align with itemcolumns,width of individual header column is larger than individual grouped columns. How can I solve this issue?
Thanks,
Prava
I have a grid where autogenerate = false and tablelayout = fixed. When grouped by some field, the header column do not align with itemcolumns,width of individual header column is larger than individual grouped columns. How can I solve this issue?
Thanks,
Prava
0
Hello Prava Kafle,
Did you set column widths? If so, can you please specify how. Note that it is not recommended to use ItemStyle-Width to set column widths. Only HeaderStyle-Width should be used.
Best wishes,
Pavlina
the Telerik team
Did you set column widths? If so, can you please specify how. Note that it is not recommended to use ItemStyle-Width to set column widths. Only HeaderStyle-Width should be used.
Best wishes,
Pavlina
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal
0
Prava kafle
Top achievements
Rank 1
Rank 1
answered on 14 Sep 2011, 03:21 PM
Hi Pavlina,
No, I have not given any width to columns/header, grid width and height is set using css. If possible I would like to set TableLayout = 'auto', but on doing so item columns do not align with header column on initial page load. It renders perfectly after post back or firing client side events on grid. How can I have perfect layout even on initial page load with tableLayout = auto?
/* Grid Style */
#TicketsGrid
{
width:99%!important;
}
#TicketsGrid_ctl00
{
width:100%!important;
}
Thanks,
Prava
No, I have not given any width to columns/header, grid width and height is set using css. If possible I would like to set TableLayout = 'auto', but on doing so item columns do not align with header column on initial page load. It renders perfectly after post back or firing client side events on grid. How can I have perfect layout even on initial page load with tableLayout = auto?
/* Grid Style */
#TicketsGrid
{
width:99%!important;
}
#TicketsGrid_ctl00
{
width:100%!important;
}
<asp:Panel ID="TicketPanel" runat="server" CssClass="ShowQueryNTicketPanel" ><telerik:RadGrid ID="TicketsGrid" runat="server" EnableEmbeddedSkins="false" AllowPaging="True" PageSize="20" AllowFilteringByColumn="True" AllowSorting="True" ShowGroupPanel="True" ClientSettings-ClientEvents-OnRowClick="gridClick" EnableHeaderContextFilterMenu="True" EnableHeaderContextMenu="True" GridLines="None" oncolumncreated="rgTicketsGrid_ColumnCreated" ondatabound="rgTicketsGrid_DataBound" ongroupschanging="rgTicketsGrid_GroupsChanging" onsortcommand="rgTicketsGrid_SortCommand" onpageindexchanged="rgTicketsGrid_PageIndexChanged" onpagesizechanged="rgTicketsGrid_PageSizeChanged" > <mastertableview allowfilteringbycolumn="False" GroupLoadMode="Server" Height="99%" TableLayout="Fixed" > </mastertableview> <SortingSettings EnableSkinSortStyles="false" /> <clientsettings allowdragtogroup="True" allowrowsdragdrop="True" enablerowhoverstyle="True" > <selecting allowrowselect="True" /> <clientevents onrowdropping="rowDropping" /> <clientevents onrowcontextmenu="RowContextMenu" /> <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" > </Scrolling> </clientsettings> <activeitemstyle borderstyle="Solid" font-bold="True" /> <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle> <GroupingSettings ShowUnGroupButton="true" /> <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" /> <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" /> <AlternatingItemStyle HorizontalAlign="Left" VerticalAlign="Middle" /> </telerik:RadGrid><telerik:RadContextMenu ID="cmTechFilter" runat="server" EnableRoundedCorners="true" EnableShadows="true" EnableViewState="true" OnClientItemClicked="ContextMenuClicked"> <Items <telerik:RadMenuItem Text="Show All Appts " Value="ShowAppts" /> <telerik:RadMenuItem Text="BuStatus" Value="Bump" /> <telerik:RadMenuItem Text="Zoom" Value="Zoom" /> </Items> </telerik:RadContextMenu> </asp:Panel> Thanks,
Prava
0
Hello Prava Kafle,
I took the sample code you provided and put it in a sample page following a similar scenario you have.
I am attaching the page for your reference. Give it a try and let me know if it helps.
All the best,
Pavlina
the Telerik team
I took the sample code you provided and put it in a sample page following a similar scenario you have.
I am attaching the page for your reference. Give it a try and let me know if it helps.
All the best,
Pavlina
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal
0
Prava kafle
Top achievements
Rank 1
Rank 1
answered on 19 Sep 2011, 04:58 PM
Hi Pavlina,
Your code runs perfectly when the grid isnot wrapped by Splitter, once I wrap it with RadSplitter and let it inherit its height from Panel (width=99%, height=99%)inside Rad pane, the problem restarts.
Here is my markup for grid and splitter
<telerik:RadSplitter ID="MainSplitter" runat="server" Orientation="Horizontal" VisibleDuringInit="false" Height="100%" Width="100%" PanesBorderSize="0" BorderSize="0" EnableEmbeddedSkins="true" Skin="WebBlue" >
<telerik:RadPane ID="SchedulerPane" runat="server" Width="100%" Scrolling="None" >
............................
</telerik:RadPane>
<telerik:RadSplitBar ID="MainSplitBar" runat="server" CollapseMode="Both" ></telerik:RadSplitBar>
<telerik:RadPane ID="TicketPane" runat="server" Height="200px" Width="100%" >
<div id="BtnsDiv" class="BtnsDiv" > /<!-- This has height of 27px -->
</div>
<asp:Panel ID="RgTicketsPanel" runat="server" Height="160px" width="99%" >
<telerik:RadGrid ID="rgTicketsGrid" runat="server"
EnableEmbeddedSkins="false" AllowPaging="True" PageSize="20"
AllowFilteringByColumn="True" AllowSorting="True" ShowGroupPanel="True"
.....................
>
</asp:Panel>
</telerik:RadPane>
</telerik:RadSplitter>
Thanks,
Prava
Your code runs perfectly when the grid isnot wrapped by Splitter, once I wrap it with RadSplitter and let it inherit its height from Panel (width=99%, height=99%)inside Rad pane, the problem restarts.
Here is my markup for grid and splitter
<telerik:RadSplitter ID="MainSplitter" runat="server" Orientation="Horizontal" VisibleDuringInit="false" Height="100%" Width="100%" PanesBorderSize="0" BorderSize="0" EnableEmbeddedSkins="true" Skin="WebBlue" >
<telerik:RadPane ID="SchedulerPane" runat="server" Width="100%" Scrolling="None" >
............................
</telerik:RadPane>
<telerik:RadSplitBar ID="MainSplitBar" runat="server" CollapseMode="Both" ></telerik:RadSplitBar>
<telerik:RadPane ID="TicketPane" runat="server" Height="200px" Width="100%" >
<div id="BtnsDiv" class="BtnsDiv" > /<!-- This has height of 27px -->
</div>
<asp:Panel ID="RgTicketsPanel" runat="server" Height="160px" width="99%" >
<telerik:RadGrid ID="rgTicketsGrid" runat="server"
EnableEmbeddedSkins="false" AllowPaging="True" PageSize="20"
AllowFilteringByColumn="True" AllowSorting="True" ShowGroupPanel="True"
.....................
>
</asp:Panel>
</telerik:RadPane>
</telerik:RadSplitter>
Thanks,
Prava
0
Hi Prava Kafle,
Please, open a formal support ticket and send us a runnable application where the problem can be observed. Thus we will be able to investigate it locally and provide a proper solution.
Regards,
Pavlina
the Telerik team
Please, open a formal support ticket and send us a runnable application where the problem can be observed. Thus we will be able to investigate it locally and provide a proper solution.
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