When running the rad grid in a card view type manner, I can't get the width of the template to work in Safari or Chrome as 100% width, it only works with fixed with.
So in the grid below, If I don't have the bolded div tag a fixed with the column doesn't fill the table.
So <div style="width: 791px;"> works while <div style="width: 100%;"> doesn't work. What am I missing for the template to be 100% width in WebKit browsers?
Also, in certain conditions I change the row background color in the prerender event with: dataItem.BackColor = System.Drawing.Color.FromArgb(204, 153, 153); this works great in IE and FF but in webkit browsers only colors a section of the grid. The section that is colored actual is the width of the column if I don't fix width the div tag?
<telerik:RadGrid ID="RadGrid1" runat="server"
ShowHeader="false" GridLines="None"
OnNeedDataSource="RadGrid1_NeedDataSource"
OnItemDataBound="RadGrid1_ItemDataBound"
OnUpdateCommand="RadGrid1_UpdateCommand"
OnPreRender="RadGrid1_PreRender" Width="100%"
>
<MasterTableView TableLayout="Fixed"
EditMode="InPlace" AllowCustomSorting="true"
AllowNaturalSort="false" DataKeyNames="BulkLoadUserID" ShowHeader="false"
CommandItemDisplay="None"
BorderStyle="Solid" BorderWidth="1px" BorderColor="#666666"
>
<AlternatingItemStyle BackColor="#e3e3e3" />
<ItemStyle BackColor="#ffffff" />
<EditItemStyle BackColor="#ffffcc" ForeColor="#000000"/>
<ItemTemplate>
<div style="width: 791px;">
<div style="float: left; width: 35%;">
<div style="float: left; font-weight: bold; width: 100px;">
Email Address:
</div>
<div style="float: left;">
<%# Eval("Email")%>
</div>
<div style="clear: both;"></div>
<asp:Panel ID="InvalidEmailPanel" runat="server" ForeColor="Red">
<div style="padding-left: 100px;"><asp:Label ID="InvalidEmailText" runat="server"></asp:Label></div>
</asp:Panel>
<div style="float: left; font-weight: bold; width: 100px;">
First Name:
</div>
<div style="float: left;">
<%# Eval("FirstName")%>
</div>
<div style="clear: both;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Last Name:
</div>
<div style="float: left;">
<%# Eval("LastName")%>
</div>
<div style="clear: both;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Home Folder ID:
</div>
<div style="float: left;">
<%# Eval("InboundEmailDefaultFolderID")%>
</div>
<div style="clear: both;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
User Type:
</div>
<div style="float: left;">
<%# Eval("UserTypeDescription")%>
</div>
<div style="clear: both;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Network:
</div>
<div style="float: left;">
<%# Eval("Network.NetworkName")%>
</div>
<div style="clear: both;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Sponsor:
</div>
<div style="float: left;">
<%# Eval("Sponsor.Name")%>
</div>
<div style="clear: both;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Time Zone:
</div>
<div style="float: left;">
<asp:Label ID="TimeZoneDisplaySTD" runat="server" Text='<%# Eval("TimeZone.TimeZoneLongDisplayStd")%>'></asp:Label>
<asp:Label ID="TimeZoneDisplayDST" runat="server" Text='<%# Eval("TimeZone.TimeZoneLongDisplayDST")%>'></asp:Label>
</div>
<div style="clear: both;"></div>
</div>
<div style="float: left; width: 20%;">
<div style="font-weight: bold;">
Folder Access/Alerts IDs
</div>
<div>
<asp:Repeater ID="folderAccessIDS" runat="server" OnItemDataBound="folderAccessIDS_OnItemDataBound">
<ItemTemplate>
<div style="float: left;">
<%# Eval("FolderID") %>
</div>
<div style="float: left; padding-left: 10px;">
<asp:Label id="folderAccessError" runat="server" ForeColor="Red"></asp:Label>
</div>
<div style="clear:both;"></div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<div style="float: left; width: 17%;">
<div style="font-weight: bold;">
Folder Leader IDs
</div>
<div>
<asp:Repeater ID="folderLeaderIDS" runat="server" OnItemDataBound="folderLeaderIDS_OnItemDataBound">
<ItemTemplate>
<div style="float: left;">
<%# Eval("FolderID") %>
</div>
<div style="float: left; padding-left: 10px;">
<asp:Label id="folderLeaderError" runat="server" ForeColor="Red"></asp:Label>
</div>
<div style="clear:both;"></div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<div style="float: left; width: 13%;">
<asp:Panel ID="GroupSectionListing" runat="server">
<div style="font-weight: bold;">
Group IDs
</div>
<div>
<asp:Repeater ID="groupIDS" runat="server" OnItemDataBound="groupIDS_OnItemDataBound">
<ItemTemplate>
<div style="float: left;">
<%# Eval("GroupID") %>
</div>
<div style="float: left; padding-left: 10px;">
<asp:Label id="groupError" runat="server" ForeColor="Red"></asp:Label>
</div>
<div style="clear:both;"></div>
</ItemTemplate>
</asp:Repeater>
</div>
</asp:Panel>
</div>
<div style="float: left; width: 10%;">
<div>
<asp:LinkButton ID="Edit" runat="server" CommandName="Edit" Text="Edit" ForeColor="#336699"></asp:LinkButton>
|
<asp:LinkButton ID="lbDeleteBulkLoadUser" ForeColor="#336699" runat="server" Text="Delete" OnClick="DeleteBulkLoadUser_Click"></asp:LinkButton>
</div>
<div>
</div>
</div>
<div style="float: left; width: 5%;">
<asp:CheckBox ID="DoProcessing" runat="server" OnCheckedChanged="DoProcessing_CheckedChanged" />
</div>
<div style="clear: both;"></div>
</div>
</ItemTemplate>
<EditItemTemplate>
<div style="padding-left: 5px; padding-top: 5px; padding-bottom: 10px;">
<div style="padding-bottom: 0px;">
<div style="float: right; padding-right: 20px; padding-bottom: 10px;">
<asp:Button ID="btnSave" Text="Save" runat="server" CssClass="smallbutton" CommandName="Update"></asp:Button>
<asp:Button ID="btnCancel" Text="Cancel" runat="server" CssClass="smallbutton" CommandName="Cancel"></asp:Button>
</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="float: left; width: 300px">
<div style="float: left; font-weight: bold; width: 100px;">
Email Address:
</div>
<div style="float: left;">
<asp:TextBox ID="Email" runat="server" CssClass="regsmall" Width="170px"></asp:TextBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
First Name:
</div>
<div style="float: left;">
<asp:TextBox ID="FirstName" runat="server" CssClass="regsmall" Width="170px"></asp:TextBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Last Name:
</div>
<div style="float: left;">
<asp:TextBox ID="LastName" runat="server" CssClass="regsmall" Width="170px"></asp:TextBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Home Folder ID:
</div>
<div style="float: left;">
<asp:TextBox ID="InboundEmailDefaultFolderID" runat="server" CssClass="regsmall" Width="170px"></asp:TextBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
User Type:
</div>
<div style="float: left;">
<asp:ListBox ID="UserTypes" runat="server" CssClass="regsmall" Rows="1" SelectionMode="Single">
<asp:ListItem Text="Web Admin" Value="1"></asp:ListItem>
<asp:ListItem Text="Manager" Value="2"></asp:ListItem>
<asp:ListItem Text="User - All Access" Value="3"></asp:ListItem>
<asp:ListItem Text="User - Restricted" Value="4"></asp:ListItem>
</asp:ListBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Network:
</div>
<div style="float: left;">
<asp:ListBox ID="Networks" runat="server" CssClass="regsmall" Rows="1" SelectionMode="Single" AutoPostBack="true" OnSelectedIndexChanged="Networks_SelectedIndexChanged"></asp:ListBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Sponsor:
</div>
<div style="float: left;">
<asp:ListBox ID="Sponsors" runat="server" CssClass="regsmall" Rows="1" SelectionMode="Single"></asp:ListBox>
</div>
</div>
<div style="float: left; width: 150px;">
<div style="font-weight: bold;">
Folder Access/Alerts IDs
</div>
<div>
<asp:TextBox ID="FolderAccessIDs" CssClass="regsmall" runat="server" Height="100px" Width="130px" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<div style="float: left; width: 150px;">
<div style="font-weight: bold;">
Folder Leader IDs
</div>
<div>
<asp:TextBox ID="FolderLeaderIDs" CssClass="regsmall" runat="server" Height="100px" Width="130px" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<div style="float: left; width: 150px;">
<asp:Panel ID="GroupSection" runat="server">
<div style="font-weight: bold;">
Group IDs
</div>
<div>
<asp:TextBox ID="GroupIDs" CssClass="regsmall" runat="server" Height="100px" Width="130px" TextMode="MultiLine"></asp:TextBox>
</div>
</asp:Panel>
</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Time Zone:
</div>
<div style="float: left;">
<asp:ListBox ID="TimeZones" runat="server" CssClass="regsmall" Rows="1" SelectionMode="Single"></asp:ListBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
</div>
</div>
</EditItemTemplate>
</MasterTableView>
</telerik:RadGrid>
So in the grid below, If I don't have the bolded div tag a fixed with the column doesn't fill the table.
So <div style="width: 791px;"> works while <div style="width: 100%;"> doesn't work. What am I missing for the template to be 100% width in WebKit browsers?
Also, in certain conditions I change the row background color in the prerender event with: dataItem.BackColor = System.Drawing.Color.FromArgb(204, 153, 153); this works great in IE and FF but in webkit browsers only colors a section of the grid. The section that is colored actual is the width of the column if I don't fix width the div tag?
<telerik:RadGrid ID="RadGrid1" runat="server"
ShowHeader="false" GridLines="None"
OnNeedDataSource="RadGrid1_NeedDataSource"
OnItemDataBound="RadGrid1_ItemDataBound"
OnUpdateCommand="RadGrid1_UpdateCommand"
OnPreRender="RadGrid1_PreRender" Width="100%"
>
<MasterTableView TableLayout="Fixed"
EditMode="InPlace" AllowCustomSorting="true"
AllowNaturalSort="false" DataKeyNames="BulkLoadUserID" ShowHeader="false"
CommandItemDisplay="None"
BorderStyle="Solid" BorderWidth="1px" BorderColor="#666666"
>
<AlternatingItemStyle BackColor="#e3e3e3" />
<ItemStyle BackColor="#ffffff" />
<EditItemStyle BackColor="#ffffcc" ForeColor="#000000"/>
<ItemTemplate>
<div style="width: 791px;">
<div style="float: left; width: 35%;">
<div style="float: left; font-weight: bold; width: 100px;">
Email Address:
</div>
<div style="float: left;">
<%# Eval("Email")%>
</div>
<div style="clear: both;"></div>
<asp:Panel ID="InvalidEmailPanel" runat="server" ForeColor="Red">
<div style="padding-left: 100px;"><asp:Label ID="InvalidEmailText" runat="server"></asp:Label></div>
</asp:Panel>
<div style="float: left; font-weight: bold; width: 100px;">
First Name:
</div>
<div style="float: left;">
<%# Eval("FirstName")%>
</div>
<div style="clear: both;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Last Name:
</div>
<div style="float: left;">
<%# Eval("LastName")%>
</div>
<div style="clear: both;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Home Folder ID:
</div>
<div style="float: left;">
<%# Eval("InboundEmailDefaultFolderID")%>
</div>
<div style="clear: both;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
User Type:
</div>
<div style="float: left;">
<%# Eval("UserTypeDescription")%>
</div>
<div style="clear: both;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Network:
</div>
<div style="float: left;">
<%# Eval("Network.NetworkName")%>
</div>
<div style="clear: both;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Sponsor:
</div>
<div style="float: left;">
<%# Eval("Sponsor.Name")%>
</div>
<div style="clear: both;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Time Zone:
</div>
<div style="float: left;">
<asp:Label ID="TimeZoneDisplaySTD" runat="server" Text='<%# Eval("TimeZone.TimeZoneLongDisplayStd")%>'></asp:Label>
<asp:Label ID="TimeZoneDisplayDST" runat="server" Text='<%# Eval("TimeZone.TimeZoneLongDisplayDST")%>'></asp:Label>
</div>
<div style="clear: both;"></div>
</div>
<div style="float: left; width: 20%;">
<div style="font-weight: bold;">
Folder Access/Alerts IDs
</div>
<div>
<asp:Repeater ID="folderAccessIDS" runat="server" OnItemDataBound="folderAccessIDS_OnItemDataBound">
<ItemTemplate>
<div style="float: left;">
<%# Eval("FolderID") %>
</div>
<div style="float: left; padding-left: 10px;">
<asp:Label id="folderAccessError" runat="server" ForeColor="Red"></asp:Label>
</div>
<div style="clear:both;"></div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<div style="float: left; width: 17%;">
<div style="font-weight: bold;">
Folder Leader IDs
</div>
<div>
<asp:Repeater ID="folderLeaderIDS" runat="server" OnItemDataBound="folderLeaderIDS_OnItemDataBound">
<ItemTemplate>
<div style="float: left;">
<%# Eval("FolderID") %>
</div>
<div style="float: left; padding-left: 10px;">
<asp:Label id="folderLeaderError" runat="server" ForeColor="Red"></asp:Label>
</div>
<div style="clear:both;"></div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<div style="float: left; width: 13%;">
<asp:Panel ID="GroupSectionListing" runat="server">
<div style="font-weight: bold;">
Group IDs
</div>
<div>
<asp:Repeater ID="groupIDS" runat="server" OnItemDataBound="groupIDS_OnItemDataBound">
<ItemTemplate>
<div style="float: left;">
<%# Eval("GroupID") %>
</div>
<div style="float: left; padding-left: 10px;">
<asp:Label id="groupError" runat="server" ForeColor="Red"></asp:Label>
</div>
<div style="clear:both;"></div>
</ItemTemplate>
</asp:Repeater>
</div>
</asp:Panel>
</div>
<div style="float: left; width: 10%;">
<div>
<asp:LinkButton ID="Edit" runat="server" CommandName="Edit" Text="Edit" ForeColor="#336699"></asp:LinkButton>
|
<asp:LinkButton ID="lbDeleteBulkLoadUser" ForeColor="#336699" runat="server" Text="Delete" OnClick="DeleteBulkLoadUser_Click"></asp:LinkButton>
</div>
<div>
</div>
</div>
<div style="float: left; width: 5%;">
<asp:CheckBox ID="DoProcessing" runat="server" OnCheckedChanged="DoProcessing_CheckedChanged" />
</div>
<div style="clear: both;"></div>
</div>
</ItemTemplate>
<EditItemTemplate>
<div style="padding-left: 5px; padding-top: 5px; padding-bottom: 10px;">
<div style="padding-bottom: 0px;">
<div style="float: right; padding-right: 20px; padding-bottom: 10px;">
<asp:Button ID="btnSave" Text="Save" runat="server" CssClass="smallbutton" CommandName="Update"></asp:Button>
<asp:Button ID="btnCancel" Text="Cancel" runat="server" CssClass="smallbutton" CommandName="Cancel"></asp:Button>
</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="float: left; width: 300px">
<div style="float: left; font-weight: bold; width: 100px;">
Email Address:
</div>
<div style="float: left;">
<asp:TextBox ID="Email" runat="server" CssClass="regsmall" Width="170px"></asp:TextBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
First Name:
</div>
<div style="float: left;">
<asp:TextBox ID="FirstName" runat="server" CssClass="regsmall" Width="170px"></asp:TextBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Last Name:
</div>
<div style="float: left;">
<asp:TextBox ID="LastName" runat="server" CssClass="regsmall" Width="170px"></asp:TextBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Home Folder ID:
</div>
<div style="float: left;">
<asp:TextBox ID="InboundEmailDefaultFolderID" runat="server" CssClass="regsmall" Width="170px"></asp:TextBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
User Type:
</div>
<div style="float: left;">
<asp:ListBox ID="UserTypes" runat="server" CssClass="regsmall" Rows="1" SelectionMode="Single">
<asp:ListItem Text="Web Admin" Value="1"></asp:ListItem>
<asp:ListItem Text="Manager" Value="2"></asp:ListItem>
<asp:ListItem Text="User - All Access" Value="3"></asp:ListItem>
<asp:ListItem Text="User - Restricted" Value="4"></asp:ListItem>
</asp:ListBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Network:
</div>
<div style="float: left;">
<asp:ListBox ID="Networks" runat="server" CssClass="regsmall" Rows="1" SelectionMode="Single" AutoPostBack="true" OnSelectedIndexChanged="Networks_SelectedIndexChanged"></asp:ListBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Sponsor:
</div>
<div style="float: left;">
<asp:ListBox ID="Sponsors" runat="server" CssClass="regsmall" Rows="1" SelectionMode="Single"></asp:ListBox>
</div>
</div>
<div style="float: left; width: 150px;">
<div style="font-weight: bold;">
Folder Access/Alerts IDs
</div>
<div>
<asp:TextBox ID="FolderAccessIDs" CssClass="regsmall" runat="server" Height="100px" Width="130px" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<div style="float: left; width: 150px;">
<div style="font-weight: bold;">
Folder Leader IDs
</div>
<div>
<asp:TextBox ID="FolderLeaderIDs" CssClass="regsmall" runat="server" Height="100px" Width="130px" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<div style="float: left; width: 150px;">
<asp:Panel ID="GroupSection" runat="server">
<div style="font-weight: bold;">
Group IDs
</div>
<div>
<asp:TextBox ID="GroupIDs" CssClass="regsmall" runat="server" Height="100px" Width="130px" TextMode="MultiLine"></asp:TextBox>
</div>
</asp:Panel>
</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="clear: both; padding-top: 5px;"></div>
<div style="float: left; font-weight: bold; width: 100px;">
Time Zone:
</div>
<div style="float: left;">
<asp:ListBox ID="TimeZones" runat="server" CssClass="regsmall" Rows="1" SelectionMode="Single"></asp:ListBox>
</div>
<div style="clear: both; padding-top: 5px;"></div>
</div>
</div>
</EditItemTemplate>
</MasterTableView>
</telerik:RadGrid>
1 Answer, 1 is accepted
0
Hello John,
Thanks for the code snippet.
Indeed, this is a strange behavior. I suppose it has something to do with the fact that table cells with a colspan attribute are rendered in a table with an invisible header. In this case the WebKit browsers seem to get confused about the table row width. The same thing can be reproduced with a quite simple HTML table (see below).
I would recommend you to set ShowHeader="true" and use HeaderText=" " for all columns in order to not have any visible header text. The second option is to remove TableLayout="Fixed" from the MasterTableView tag - this also makes the backgrounds expand to the end of RadGrid.
Best wishes,
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 code snippet.
Indeed, this is a strange behavior. I suppose it has something to do with the fact that table cells with a colspan attribute are rendered in a table with an invisible header. In this case the WebKit browsers seem to get confused about the table row width. The same thing can be reproduced with a quite simple HTML table (see below).
I would recommend you to set ShowHeader="true" and use HeaderText=" " for all columns in order to not have any visible header text. The second option is to remove TableLayout="Fixed" from the MasterTableView tag - this also makes the backgrounds expand to the end of RadGrid.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| <title>WebKit test</title> |
| </head> |
| <body> |
| <p>This is a table with 8 columns, invisible header, and table cells with colspan="8".</p> |
| <div style="width:100%;"> |
| <table cellspacing="0" style="border:1px solid red;width:100%;table-layout:fixed;empty-cells:show;"> |
| <colgroup> |
| <col /> |
| <col /> |
| <col /> |
| <col /> |
| <col /> |
| <col /> |
| <col /> |
| <col /> |
| </colgroup> |
| <thead> |
| <tr style="display:none;"> |
| <th scope="col">Column1</th> |
| <th scope="col">Column2</th> |
| <th scope="col">Column3</th> |
| <th scope="col">Column4</th> |
| <th scope="col">Column5</th> |
| <th scope="col">Column6</th> |
| <th scope="col">Column7</th> |
| <th scope="col">Column8</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr><td colspan="8">template</td></tr> |
| <tr style="background:#ccc"><td colspan="8">template</td></tr> |
| <tr><td colspan="8">template</td></tr> |
| <tr style="background:#ccc"><td colspan="8">template</td></tr> |
| <tr><td colspan="8">template</td></tr> |
| <tr style="background:#ccc"><td colspan="8">template</td></tr> |
| </tbody> |
| </table> |
| </div> |
| </body> |
| </html> |
Best wishes,
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.