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

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

6 Answers 332 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ali
Top achievements
Rank 1
Ali asked on 21 Jul 2014, 07:03 AM
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;
}




6 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 24 Jul 2014, 06:31 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ali
Top achievements
Rank 1
answered on 24 Jul 2014, 10:55 PM
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?
0
Eyup
Telerik team
answered on 30 Jul 2014, 01:26 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ali
Top achievements
Rank 1
answered on 30 Jul 2014, 09:14 PM
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>
0
Accepted
Eyup
Telerik team
answered on 04 Aug 2014, 12:21 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ali
Top achievements
Rank 1
answered on 11 Aug 2014, 08:01 AM
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.
Tags
Grid
Asked by
Ali
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Ali
Top achievements
Rank 1
Share this question
or