[Solved] Access to radgrid in NestedViewTemplate in client side code

[Michael]

I would like to access the radgrid in my nestedviewtemplate to perform some client side validation but I can't figure out how to access a radgrid in a nestedviewtemplate in javascript.
The goal is to loop thru the main grid(rGrdBaseSchedule) rows and then into the sub grid(rGrdTasks) rows and do validation on the whole structure before saving it.

I provided our current grid asp for reference.

 

 

 

<telerik:RadGrid ID="rGrdBaseSchedule" runat="server" Skin="RequestQueue"

 

 

EnableEmbeddedSkins="false" AutoGenerateColumns="false" AllowMultiRowEdit="true"

 

 

 

 

 

OnItemDataBound="rGrdBaseSchedule_ItemDataBound" OnDataBinding="rGrdBaseSchedule_OnDataBinding"

 

 

OnPreRender="rGrdBaseSchedule_PreRender" ClientSettings-AllowExpandCollapse="true"

 

 

EnableOutsideScripts="true" >

 

 

 

 

 

<ClientSettings AllowExpandCollapse="true">

 

 

 

 

 

<ClientEvents OnGridCreated="GridCreated"/>

 

 

 

 

 

<Scrolling AllowScroll="true" ScrollHeight="225" UseStaticHeaders="true"/>

 

 

 

 

 

</ClientSettings>

 

 

 

 

 

<MasterTableView CellPadding="0" CellSpacing="0" EditMode="InPlace" HierarchyLoadMode="Client"

 

 

ExpandCollapseColumn-Visible="true" HierarchyDefaultExpanded="true"

 

 

 

 

 

ExpandCollapseColumn-ButtonType="ImageButton" ExpandCollapseColumn-CollapseImageUrl="images/minus.gif"

 

 

ExpandCollapseColumn-ExpandImageUrl="images/plus.gif" ExpandCollapseColumn-HeaderStyle-Width="1"

 

 

 

 

 

ShowFooter="false" TableLayout="fixed" EnableColumnsViewState="true" EnableViewState="true">

 

 

<FooterStyle CssClass="totalsbottom" />

 

 

 

 

 

<NestedViewTemplate>

 

 

 

 

 

<telerik:RadGrid ID="rGrdTasks" runat="server" Skin="RequestQueue" EnableEmbeddedSkins="false"

 

 

 

 

 

AutoGenerateColumns="false" AllowMultiRowEdit="true" OnItemDataBound="rGrdTasks_ItemDataBound"

 

 

 

 

 

EnableOutsideScripts="true">

 

 

 

 

 

<MasterTableView CommandItemDisplay="None" CellPadding="0" CellSpacing="0" EditMode="InPlace"

 

 

ShowFooter="true" TableLayout="fixed">

 

 

 

 

 

<FooterStyle CssClass="totalsbottom" />

 

 

 

 

 

<Columns>

 

 

 

 

 

<telerik:GridBoundColumn HeaderText="TaskId" DataField="TaskId" Display="false">

 

 

 

 

 

</telerik:GridBoundColumn>

 

 

 

 

 

<telerik:GridTemplateColumn HeaderText="Type" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

UniqueName="StoryType">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<asp:Label ID="lblStoryType" runat="server"></asp:Label>

 

 

 

 

 

<img id="imgErr" src="images/icons/exclamation.gif" enableviewstate="false" style="display: none;"

 

 

 

 

 

alt="" />

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridTemplateColumn HeaderStyle-Width="30%" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

HeaderText="Slug" UniqueName="Slug">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<asp:HyperLink ID="lnkSlug" runat="server"></asp:HyperLink>

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridBoundColumn HeaderText="Date" DataField="StartDate" HeaderStyle-Width="40px"

 

 

 

 

 

ItemStyle-HorizontalAlign="Center" DataFormatString="{0:MM/dd/yyyy}" ReadOnly="true">

 

 

 

 

 

</telerik:GridBoundColumn>

 

 

 

 

 

<telerik:GridTemplateColumn HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

HeaderText="In Time" UniqueName="InTime">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<asp:TextBox ID="txtInTime" runat="server" CssClass="grdEdtTxt" onfocus="this.select();"></asp:TextBox>

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridTemplateColumn DataField="OutTime" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

UniqueName="OutTime" HeaderText="Out Time">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<asp:TextBox ID="txtOutTime" runat="server" CssClass="grdEdtTxt" onfocus="this.select();"></asp:TextBox>

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridTemplateColumn HeaderStyle-Width="100px" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

UniqueName="CostCenters" HeaderText="Cost Center(s)" FooterStyle-HorizontalAlign="right"

 

 

 

 

 

FooterStyle-Font-Bold="true">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<asp:Label ID="lblCostCenters" runat="server"></asp:Label>

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

<FooterTemplate>

 

 

 

 

 

<span><b>Total : </b></span>

 

 

 

 

 

</FooterTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridTemplateColumn HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

FooterStyle-HorizontalAlign="Center" FooterStyle-Font-Bold="true" HeaderText="OT"

 

 

 

 

 

UniqueName="OT">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<asp:TextBox ID="txtOTHrs" runat="server" CssClass="grdEdtTxt" onfocus="this.select();"

 

 

 

 

 

MaxLength="5" />

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

<FooterTemplate>

 

 

 

 

 

<b><span id="spnOTTot" runat="server">&nbsp;</span></b>

 

 

 

 

 

</FooterTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridTemplateColumn HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

FooterStyle-HorizontalAlign="Center" FooterStyle-Font-Bold="true" HeaderText="DT"

 

 

 

 

 

UniqueName="DT">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<asp:TextBox ID="txtDTHrs" runat="server" CssClass="grdEdtTxt" onfocus="this.select();"

 

 

 

 

 

MaxLength="5" />

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

<FooterTemplate>

 

 

 

 

 

<b><span id="spnDTTot" runat="server">&nbsp;</span></b>

 

 

 

 

 

</FooterTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridTemplateColumn HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

FooterStyle-HorizontalAlign="Center" FooterStyle-Font-Bold="true" HeaderText="Hours"

 

 

 

 

 

UniqueName="Total">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<span id="spnHrs" runat="server"></span>

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

<FooterTemplate>

 

 

 

 

 

<b><span id="spnWkTot" runat="server">&nbsp;</span></b>

 

 

 

 

 

</FooterTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridBoundColumn HeaderText="End Date" DataField="EndDate" Display="false"

 

 

 

 

 

DataFormatString="{0:MM/dd/yyyy}">

 

 

 

 

 

</telerik:GridBoundColumn>

 

 

 

 

 

<telerik:GridBoundColumn HeaderText="Estimated" DataField="Estimated" Display="false">

 

 

 

 

 

</telerik:GridBoundColumn>

 

 

 

 

 

<telerik:GridBoundColumn HeaderText="Work Description" DataField="WorkDescription"

 

 

 

 

 

Display="false">

 

 

 

 

 

</telerik:GridBoundColumn>

 

 

 

 

 

</Columns>

 

 

 

 

 

</MasterTableView>

 

 

 

 

 

<ClientSettings>

 

 

 

 

 

<Selecting AllowRowSelect="true" />

 

 

 

 

 

<ClientEvents OnGridCreated="TaskGridCreated" />

 

 

 

 

 

</ClientSettings>

 

 

 

 

 

</telerik:RadGrid>

 

 

</NestedViewTemplate>

 

 

 

 

 

<ParentTableRelation>

 

 

 

 

 

<telerik:GridRelationFields MasterKeyField="Date" />

 

 

 

 

 

</ParentTableRelation>

 

 

 

 

 

<Columns>

 

 

 

 

 

<telerik:GridTemplateColumn HeaderStyle-Width="10px" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

HeaderText="Day" UniqueName="DayName">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<span id="spnDyNm" enableviewstate="false" runat="server" />

 

 

 

 

 

<img id="imgErr" src="images/icons/exclamation.gif" enableviewstate="false" style="display: none;"

 

 

 

 

 

alt="" />

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridBoundColumn HeaderText="Date" DataField="Date" HeaderStyle-Width="40px"

 

 

 

 

 

ItemStyle-HorizontalAlign="Center" DataFormatString="{0:MM/dd/yyyy}" ReadOnly="true">

 

 

 

 

 

</telerik:GridBoundColumn>

 

 

 

 

 

<telerik:GridTemplateColumn HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

HeaderText="In" UniqueName="InTime">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<asp:Literal ID="ltlInTime" EnableViewState="false" runat="server" />

 

 

<asp:TextBox ID="txtInTime" Style="display: none;" runat="server" CssClass="grdEdtTxt"

 

 

 

 

 

onfocus="this.select();" ></asp:TextBox>

 

 

 

 

 

<span id="spnInOff" runat="server" style="display: none;">OFF</span>

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridTemplateColumn DataField="OutTime" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

UniqueName="OutTime">

 

 

 

 

 

<HeaderTemplate>

 

 

 

 

 

<span>Out</span>

 

 

 

 

 

</HeaderTemplate>

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<asp:Literal ID="ltlOutTime" EnableViewState="false" runat="server" />

 

 

 

 

 

<asp:TextBox ID="txtOutTime" Style="display: none;" runat="server" CssClass="grdEdtTxt"

 

 

 

 

 

onfocus="this.select();"></asp:TextBox>

 

 

 

 

 

<span id="spnOutOff" runat="server" style="display: none;" class="offText">OFF</span>

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridTemplateColumn HeaderText="Day Type" DataField="DayType" HeaderStyle-Width="50px"

 

 

 

 

 

ItemStyle-HorizontalAlign="Center" UniqueName="DayType">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<asp:Literal ID="ltlDayType" runat="server"></asp:Literal>

 

 

 

 

 

<asp:DropDownList ID="ddlDayType" runat="server" CssClass="ddlEdt" onfocus="ddlFocus(this);">

 

 

 

 

 

</asp:DropDownList>

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridTemplateColumn HeaderText="Cost Center(s)" HeaderStyle-Width="30%" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

FooterStyle-HorizontalAlign="Center" FooterStyle-Font-Italic="true" UniqueName="CostCenter">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<asp:Literal ID="ltlCC" runat="server" EnableViewState="true" Text="&nbsp;" />

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridTemplateColumn HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center"

 

 

 

 

 

FooterStyle-HorizontalAlign="Center" FooterStyle-Font-Bold="true" HeaderText="Hours"

 

 

 

 

 

UniqueName="Total">

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<asp:Literal ID="ltlHrs" runat="server" />

 

 

 

 

 

<asp:TextBox ID="txtHrsEdt" runat="server" Style="display: none;" CssClass="grdEdtTxt"

 

 

 

 

 

onfocus="this.select();" MaxLength="5" />

 

 

 

 

 

<span id="spnHrs" runat="server" style="display: none;"></span>

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

</Columns>

 

 

 

 

 

</MasterTableView>

 

 

 

 

 

<ClientSettings>

 

 

 

 

 

<Selecting AllowRowSelect="true" />

 

 

 

 

 

<ClientEvents OnGridCreated="GridCreated" />

 

 

</ClientSettings>

 

 

 

 

 

</telerik:RadGrid>

 

 

 

[Princy]

Hello Michael,

You can refer to the following code library submission links which explain on how to access nested controls on client:
1. In the following code library the client id of the textbox editor is stored in a window object attribute and then the textbox is obtained on the client calling the document.getElementById(id)  javascript method.
Retrieving grid editor value client side

2. Another option would be to use a global registry that keeps the nested control ID's ,emit script for every server control that will add an item to the global registry and then loop over all registered elements and get the one that contains the required server ID. This is explained clearly in the following code library submission:
Accessing server controls in a grid template on the client

Thanks
Princy.