[Solved] Access label in EditTemplate with javascript

[Sam]

I need to access a label inside of an Edittemplate with javascript, typically I would just view the source of the page to get the name of the control that asp.net gives it at runtime ie. ("ctl00_ContentPlaceHolder1_lblAccount"), but I cannot view the source of the edit template (probably because it's hidden ). I really need to get this to work as I have to have this function in several places. Has anyone done this or does anyone know what these controls are named at runtime inside of the edit template????

[Daniel]

Hello Sam,

Try the following approach:

var myLabel = $telerik.findElement($get("RadGrid1"), "myLabelControlID");

Best regards,
Daniel
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.

[Sam]

I tried var food = $telerik.findElement($get("rgLogs"), "txtFoodSOLog");  rgLogs being the name of my radgrid and txtFoodSOLog is my textbox and it errors there with a null object error. Here is my radgrid code, I really need this to work otherwise we have to consider not using the radgrids.

<telerik:RadGrid ID="rgLogs" runat="server" AllowPaging="True" AllowSorting="True" AllowAutomaticDeletes="True" AllowAutomaticInserts="True" AllowAutomaticUpdates="True"
                    AutoGenerateColumns="False" DataSourceID="sdsLogs" GridLines="None" EnableTheming="True"
                    ShowStatusBar="True" AllowFilteringByColumn="True">
                    <MasterTableView DataKeyNames="SOLogKeyID" CommandItemDisplay="Top" DataSourceID="sdsLogs"
                       EditMode="PopUp" AllowMultiColumnSorting="True">
                        <Columns>
                            <telerik:GridEditCommandColumn>
                            </telerik:GridEditCommandColumn>
                            <telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="column">
                            </telerik:GridButtonColumn>
                            <telerik:GridBoundColumn DataField="StartDateTime" HeaderText="Start" SortExpression="StartDateTime"
                                UniqueName="StartDateTime">
                            </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn DataField="EndDateTime" HeaderText="End" SortExpression="EndDateTime"
                                UniqueName="EndDateTime">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="RepName" HeaderText="Engineer" SortExpression="RepName"
                                UniqueName="RepName">
                            </telerik:GridBoundColumn>
                              <telerik:GridBoundColumn DataField="ActualHours" HeaderText="Time Spent" SortExpression="ActualHours"
                                UniqueName="ActualHours">
                            </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn DataField="LogComment" HeaderText="Comment" SortExpression="LogComment"
                                UniqueName="LogComment">
                            </telerik:GridBoundColumn>


                        </Columns>
                        <RowIndicatorColumn>
                            <HeaderStyle Width="20px" />
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn>
                            <HeaderStyle Width="20px" />
                        </ExpandCollapseColumn>
                        <PagerStyle Mode="NextPrevNumericAndAdvanced" PageButtonCount="5" PagerTextFormat="Change page: {4}  Page {0} of {1},  {5} items."
                            AlwaysVisible="True" />

                           <EditFormSettings EditFormType="Template" PopUpSettings-Width="850px">
                                <EditColumn UniqueName="EditCommandColumn1">
                                </EditColumn>
                                <FormTemplate>
                                    <table style="width: 100%; float: left" cellpadding="5" cellspacing="2">
                                        <tr>
                                            <td>
                                                <b>Start Date</b>
                                            </td>
                                            <td>
                                                <telerik:RadDatePicker ID="txtStartDateSOLog" Width="180" DBSelectedDate='<%# Bind("StartdateTime")%>' runat="server" DateInput-EmptyMessage="">
                                                <Calendar ID="Calendar3" runat="server" FastNavigationStep="12" ShowColumnHeaders="False" ShowOtherMonthsDays="False"
                                                 ShowRowHeaders="False">
                                                </Calendar>
                                        <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                       </telerik:RadDatePicker>

                                            </td>

                                            <td>
                                                <b>Start Time</b>
                                            </td>
                                            <td>
                                                <telerik:RadTimePicker ID="txtStartTimeSOLog" Width="180" DBSelectedDate='<%# Bind("StartDateTime") %>' MinDate="12/30/1899" runat="server" />
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <b>End Date</b>
                                            </td>
                                            <td>
                                                <telerik:RadDatePicker ID="txtEndDateSOLog" Width="180" DBSelectedDate='<%# Bind("EndDateTime") %>' runat="server" DateInput-EmptyMessage="">
                                                <Calendar ID="Calendar7" runat="server" FastNavigationStep="12" ShowColumnHeaders="False" ShowOtherMonthsDays="False"
                                                 ShowRowHeaders="False">
                                                </Calendar>
                                        <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                       </telerik:RadDatePicker>

                                            </td>

                                            <td>
                                                <b>End Time</b>
                                            </td>
                                            <td>
                                                <telerik:RadTimePicker ID="txtEndTimeSOLog" Width="180" DBSelectedDate='<%# Bind("EndDateTime") %>' MinDate="12/30/1899" runat="server" />
                                            </td>
                                            <td>
                                            <b>Actual Time</b>
                                            </td>
                                            <td>
                                            <asp:TextBox ID="txtActualTimeSOLog" Width="160" Text='<%# Bind("ActualHours") %>' runat="server"></asp:TextBox>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <b>Rep</b>
                                            </td>
                                          <td>
                                                <asp:DropDownList ID="ddlRepSOLog" runat="server" Width="175" DataTextField="RepName" DataValueField="RepNumber" DataSourceID="sdsReps" SelectedValue='<%# Bind("RepNumber") %>' AppendDataBoundItems= "true" >
                                            <asp:ListItem Value="0" Text="- Select One -"></asp:ListItem>
                                        </asp:DropDownList>
                                            </td>
                                            <td><b>Billable</b></td>
                                            <td><asp:CheckBox ID="cbBillableSOLog" Checked='<%# bind("Billable") %>' runat="server" /></td>
                                            <td>
                                                <b>Reason</b>
                                            </td>
                                          <td>
                                                <asp:DropDownList ID="ddlReasonSOLog" runat="server" Width="170" DataSourceID="sdsReason" DataTextField="LogReason" DataValueField="LogReason" SelectedValue='<%# Bind("LogReason") %>' AppendDataBoundItems= "true" >
                                            <asp:ListItem Value="0" Text="- Select One -"></asp:ListItem>
                                        </asp:DropDownList>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Chargeable</b></td>
                                            <td><asp:CheckBox ID="cbChargeableSOLog" Checked='<%# bind("Chargable") %>' runat="server" /></td>
                                            <td>
                                            <b>Labor Rate</b>
                                            </td>
                                            <td>
                                            <asp:TextBox ID="txtLaborRateSOLog" Width="160" Text='<%# Bind("LaborRate") %>' runat="server"></asp:TextBox>
                                            </td>
                                            <td><b>Lodging</b></td>
                                        <td><asp:TextBox ID="txtLodgingSOLog" Width="160" Text='<%# Bind("Accomodations") %>' onchange="CalcTotal(this)" runat="server" /></td>
                                        </tr>
                                        <tr>
                                        <td><b>Food</b></td>
                                        <td><asp:TextBox ID="txtFoodSOLog" Width="170" Text='<%# Bind("Meals") %>' onchange="CalcTotal(this)" runat="server" />
                                        </td>
                                        <td>
                                        <b>Fuel</b>
                                        </td>
                                        <td>
                                        <asp:TextBox ID="txtFuelSOLog" Width="160" Text='<%# Bind("Fuel") %>' onchange="CalcTotal(this)" runat="server" />
                                        </td>
                                        <td><b>Parking</b></td>
                                        <td><asp:TextBox ID="txtParkingSOLog" Width="160" Text='<%# Bind("Parking") %>' onchange="CalcTotal(this)" runat="server" /></td>
                                        </tr>
                                        <tr>
                                        <td><b>Tolls</b></td>
                                        <td><asp:TextBox ID="txtTollsSOLog" Width="170" Text='<%# Bind("Tolls") %>' onchange="CalcTotal(this)" runat="server" />
                                        </td>
                                        <td>
                                        <b>Misc</b>
                                        </td>
                                        <td>
                                        <asp:TextBox ID="txtMiscSOLog" Width="160" Text='<%# Bind("MiscExpenses") %>' onchange="CalcTotal(this)" runat="server" />
                                        </td>
                                        <td><b>Mileage</b></td>
                                        <td>
                                        <asp:TextBox ID="txtMileage" Width="160" Text='<%# Bind("Mileage") %>' runat="server" />
                                        </td>
                                        </tr>
                                        <tr>
                                        <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                        <td valign="top"><b>Note</b></td>
                                        <td colspan="3"><asp:TextBox ID="txtNoteSOLog" runat="server" Text='<%# Bind("LogComment") %>' Height="100" Width="300" TextMode="MultiLine"></asp:TextBox></td>
                                        <td valign="top"><b>Total : </b></td><td valign="top" align="right"><asp:Label ID="lbTotalSOLog" ForeColor="Green" Font-Bold="true" Font-Underline="true" Text="$0.00" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td colspan="6" align="center">
                                                <asp:Button CssClass="button" ID="btnLogs" Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Save", "Save") %>'
                                                    runat="server" CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>'>
                                                </asp:Button>
                                                <asp:Button ID="Button1" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel" CssClass="button"></asp:Button>
                                            </td>
                                        </tr>

                                    </table>
                                </FormTemplate>
                            </EditFormSettings>
                    </MasterTableView>
                    <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnableRowHoverStyle="True">
                        <Selecting AllowRowSelect="False" />
                        <Resizing AllowColumnResize="True" ClipCellContentOnResize="False" EnableRealTimeResize="True" />
                    </ClientSettings>
                    <GroupPanel ID="GroupPanel" Style="width: 100%;">
                    </GroupPanel>
                    <PagerStyle Mode="NextPrevNumericAndAdvanced" PagerTextFormat="Change page: {4} &lt;br&gt;Displaying page {0} of {1}, items {2} to {3} of {5}." />
                    <FilterItemStyle HorizontalAlign="Left" />
                    <FilterMenu EnableTheming="True">
                        <CollapseAnimation Duration="200" Type="OutQuint" />
                    </FilterMenu>
                </telerik:RadGrid>

[Jacob Button]

I am experiencing this exact same problem, any help would be highly appreciated.

[Sam]

I just used Firebug in Firefox to get the actual name of my controls in the Edit Template, just open the form with firebug running and click in the textbox and it shows you the name. FINALLY!!!

[Jacob Button]

Yes, I suppose that does work.  It's not very pretty though.  There has to be another way to get the control name.  I feel pretty stupid right now.

[Sam]

I agree but it was stopping me from moving forward on a project so if it works I'm ok with it. The names are coming out like this  "ctl00_ContentPlaceHolder1_rgLogs_ctl00_ctl02_ctl04_txtFoodSOLog"........ 

[Jacob Button]

Oh, by all means, it's good enough for now so that I can move forward.  But I definitely want to revisit this and do it the 'right way' before I'm done with it.

If anybody can shed some lite on this is would be appreciated... I feel like I've tried everything.