Accessing a TextBox control in RadGrid <DetailItemTemplate> in client side using javascript

[Ali]

Hi,
I can access a TextBox control in RadGrid <DetailItemTemplate> in server side using C# [the code below works fine], but how can I access the TextBox in client side using javascript?

ASPX code:

<telerik:RadGrid ID="Grd_Pad" runat="server" GridLines="None" AllowSorting="true" AllowPaging="true" PageSize="20"AllowFilteringByColumn="true" AutoGenerateColumns="false" AllowMultiRowSelection="true" AllowMultiRowEdit="true"AllowAutomaticInserts="true" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true"DataSourceID="Sql_Pad" Width="100%">
    <SortingSettings SortToolTip=""/>
    <FilterItemStyle Width="100%"></FilterItemStyle>
    <GroupingSettings CaseSensitive="false"></GroupingSettings>
    <PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric"/>
    <MasterTableView DataKeyNames="pad_id" CommandItemDisplay="Top" EditMode="InPlace"
        GroupLoadMode="Client" GroupsDefaultExpanded="true" TableLayout="Fixed" Width="100%">
            <telerik:GridTemplateColumn DataField="pad_name" HeaderText="Show Hide" SortExpression="pad_name"
                UniqueName="pad_showhide" CurrentFilterFunction="Contains"
                ShowFilterIcon="false" FilterControlToolTip="" FilterImageToolTip="" FilterControlAltText=""
                FilterControlWidth="100%">
                <HeaderStyle HorizontalAlign="Left" Width="5%"/>
                <ItemStyle HorizontalAlign="Left" Width="5%"/>
                <ItemTemplate>
                    <telerik:RadButton ID="Btn_Pad_Toggle" runat="server" Text="Toggle" ButtonType="StandardButton"
                        ToggleType="CheckBox" AutoPostBack="true" OnClick="CsPadShowHide">
                        <ToggleStates>
                           <telerik:RadButtonToggleState Text="Show"/>
                           <telerik:RadButtonToggleState Text="Hide" Selected="true"/>
                        </ToggleStates>
                    </telerik:RadButton>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        <DetailItemTemplate>
            <telerik:RadTextBox ID="Txt_Pad_Dtl" runat="server" TextMode="MultiLine" InputType="Text" Wrap="false"
                Label="" Text='<%# Eval("pad_text") %>' EmptyMessage="None..."
                AutoPostBack="false" Display="false" ReadOnly="true"
                BorderColor="#25A0DA" BorderWidth="1px" Width="100%" Height="200px">
            </telerik:RadTextBox>
        </DetailItemTemplate>
    </MasterTableView>
</telerik:RadGrid>

C# code:

protected void CsPadShowHide(object s, EventArgs e)
{
    RadButton btn = (RadButton)s;
    GridDataItem di = (GridDataItem)btn.NamingContainer;
    RadTextBox pad = di.DetailTemplateItemDataCell.FindControl("Txt_Pad_Dtl") as RadTextBox;
    //pad.Display = true; // Ali - works
    pad.Display = btn.SelectedToggleState.Selected;
}

[Eyup]

Hello Ali,

Once you have the container element, you can use the $telerik.findElement or $telerik.findControl methods to access the textbox in question as demonstrated in the last part of the following post:
http://www.telerik.com/forums/javascript-on-each-item#FpwQalBeNkGNGYJoZBJYhg

Hope this helps.

Regards,
Eyup
Telerik

 

 

[Ali]

Hi Eyup,
Thanks for your reply. I tried with the two methods, but with no success. Can you please post the sample code.

Also, can I do this without using those methods, just using the 'sender' object and 'event arguments' in javascript?

[Eyup]

Hi Ali,

I'm sending a sample RadGrid web site to demonstrate a similar implementation. Please run the attached application and let me know if it helps you.

Regards,
Eyup
Telerik

 

 

[Ali]

Hi Eyup,
Thanks a lot for the sample. But I am trying to find a control [ID="Txt_Pad_Dtl"] inside the "DetailItemTemplate" of the RadGrid, not in the grid template "column" with a unique name. How can you do that in client-side?

        <DetailItemTemplate>
            <telerik:RadTextBox ID="Txt_Pad_Dtl" runat="server" TextMode="MultiLine" InputType="Text" Wrap="false"
                Label="" Text='<%# Eval("pad_text") %>' EmptyMessage="None..." 
                AutoPostBack="false" Display="false" ReadOnly="true"
                BorderColor="#25A0DA" BorderWidth="1px" Width="100%" Height="200px">
            </telerik:RadTextBox>
        </DetailItemTemplate>

[Eyup]

Hi Ali,

I've created a sample web site to implement the requested behavior. Can you check the application and let me know how it works on your side?

Regards,
Eyup
Telerik

 

 

[Ali]

Hi Eyup,
Thank you so much. I wish there was a built-in way to do what I needed, the solution you provided worked great for me.