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

Rendering issue with TabStrip in NestedViewTemplate

1 Answer 124 Views

Grid

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

Thomas Mittag asked on 24 Feb 2011, 04:05 PM

screenshot.PNG

I have a grid with a NestedViewTemplate, and in the template I am displaying a databound TabStrip. The DataSource for the tabStrip is part of the template. Generally the template works, however, I am getting a very strange rendering issue the first time I open a Nested view. The tab strip does not render correctly, I am getting some strange characters and the Label and image of the last tab rather than the TabStrip control.
After collapsing and re-opening the Nested View everything works correctly and all Nested views display correctly. Even after refreshing the grid, it will display correctly. After reloading the page, I am getting the same issue the first time the nested view is displayed. Any ideas?

Here is my Grid definition:

<telerik:RadGrid ID="grdPages" runat="server" AutoGenerateColumns="false" AllowPaging="true"

OnNeedDataSource="grdPages_NeedDataSource" Width="100%" Skin="Office2007"

OnDetailTableDataBind="grdPages_DetailTableDataBind">

<MasterTableView TableLayout="Fixed" Caption="Quick Data Entry Path Screens" CommandItemDisplay="Top" DataKeyNames="Pages_Id,QuickDataEntryPath_Id">

<PagerStyle AlwaysVisible="true" Position="Bottom" Mode="NumericPages" />

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton">

<HeaderStyle Width="30px" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="Order" HeaderText="Page Order">

<HeaderStyle Width="90px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Name" HeaderText="Page Title">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Description" HeaderText="Description">

</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="Repeate" HeaderText="Repeating Page">

<HeaderStyle Width="100px" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridCheckBoxColumn>

<telerik:GridClientDeleteColumn ButtonType="ImageButton">

<HeaderStyle Width="30px" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridClientDeleteColumn>

</Columns>

<CommandItemTemplate>

<table class="commandItems" width="100%">

<tr>

<td class="editControls">

<common:CommandItem ID="cmdAddScreen" runat="server" Text="Add Screen" ImageUrl="~/Images/add.png" />

</td>

<td align="right">

<common:GridCommonCommandItemCollection ID="cmdCommonControls" runat="server" Show_Export="false" Show_FilterToggle="false"

Show_PagingToggle="true" Show_Refresh="true" />

</td>

</tr>

</table>

</CommandItemTemplate>

<NestedViewTemplate>

<div style="border: 2px solid Blue;">

<asp:Panel ID="pnlNestedView" runat="server" CssClass="collapsible">

<asp:HiddenField ID="hdnWhereClause" runat="server" Value='<%# this.GetWhereClause(Eval("QuickDataEntryPath_Id"), Eval("Pages_Id")) %>' />

<asp:ObjectDataSource ID="ODSDataEntryForms" TypeName="Tempo.Utilities.PrototypeDataLoader" runat="server" SelectMethod="LoadData">

<SelectParameters>

<asp:Parameter Name="fileSource" Type="String" DefaultValue="QDEPMaintenance.xml" />

<asp:Parameter Name="tableName" Type="String" DefaultValue="DataEntryForms"/>

<asp:ControlParameter Name="whereClause" ControlID="hdnWhereClause" PropertyName="Value" Type="String" />

<asp:Parameter Name="copyRelations" Type="Boolean" DefaultValue="true" />

</SelectParameters>

</asp:ObjectDataSource>

<telerik:RadTabStrip ID="radTabStrip1" runat="server" Skin="Office2007"

DataTextField="TabLabel" DataValueField="TabOrder"

SelectedIndex="0" DataSourceID="ODSDataEntryForms" OnDataBound="radTabStrip1_DataBound" OnTabClick="radTabStrip1_TabClick">

</telerik:RadTabStrip>

<div style="border: 1px solid #9cf;">

<table width="100%" cellpadding="5" cellspacing="10" border="1">

<tr>

<td class="gradient" style="width: 100px; height: 80px;" align="center">

<asp:Image ID="imgTabType" runat="server" ImageUrl="~/Images/Form.png" Height="60px" />

</td>

<td>

<table style="padding-left: 10px;" width="100%">

<tr>

<td>

<asp:Label ID="lblTabOrder" runat="server" Text="Tab Order:"></asp:Label>

</td>

<td>

<telerik:RadNumericTextBox ID="txtTabOrder" runat="server" Width="40px" NumberFormat-DecimalDigits="0" MinValue="1" MaxValue="10"

ShowSpinButtons="true">

</telerik:RadNumericTextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblTabLabel" runat="server" Text="Tab Label:"></asp:Label>

</td>

<td>

<telerik:RadTextBox ID="txtLabel" runat="server" Width="200px"></telerik:RadTextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblFormType" runat="server" Text="Form Type:"></asp:Label>

</td>

<td>

<telerik:RadComboBox ID="cboFormType" runat="server">

<Items>

<telerik:RadComboBoxItem Text="" Value="" />

<telerik:RadComboBoxItem Text="System Form" Value="S" />

<telerik:RadComboBoxItem Text="Custom Form" Value="C" />

</Items>

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblFormName" runat="server" Text="Form Control:"></asp:Label>

</td>

<td>

<telerik:RadComboBox ID="cboFormControl" runat="server" AllowCustomText="true"></telerik:RadComboBox>

</td>

</tr>

<tr>

<td colspan="2" align="right">

<telerik:RadButton ID="btnSaveTab" runat="server" Text="Save Tab">

<Icon PrimaryIconUrl="../Images/accept.png" />

</telerik:RadButton>

<telerik:RadButton ID="btnDeleteTab" runat="server" Text="Delete Tab">

<Icon PrimaryIconUrl="~/Images/delete.png" />

</telerik:RadButton>

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

</asp:Panel>

</div>

</NestedViewTemplate>

</MasterTableView>

</telerik:RadGrid>

Rendering issue with TabStrip in NestedViewTemplate

1 Answer, 1 is accepted