CODEWITHSUNDEEP
c#javascriptasp.nettelerik
Ali007
Ali007

Reputation: 678

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

Accessing a TextBox control in RadGrid in client side using javascript

Hi, I can access a TextBox control in RadGrid 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" 
OnItemDataBound="CsGrdIDB" OnSelectedIndexChanged="CsGrdSIC" 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>

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 = btn.SelectedToggleState.Selected;
}

Upvotes: 0

Views: 3246

Answers (2)

Ali007
Ali007

Reputation: 678

Finally got it working. Here is the code below:

ASPX Code:

    <telerik:GridTemplateColumn DataField="pad_name" HeaderText="Notes" SortExpression="pad_name" 
        UniqueName="pad_showhide" AllowFiltering="false"
        ShowFilterIcon="false" FilterControlToolTip="" FilterImageToolTip="" FilterControlAltText=""
        FilterControlWidth="100%">
        <HeaderStyle HorizontalAlign="Center" Width="10%"/>
        <ItemStyle HorizontalAlign="Center" Width="10%"/>
        <ItemTemplate>
            <telerik:RadButton ID="Btn_Pad_Toggle" runat="server" ButtonType="StandardButton"
                ToggleType="CheckBox" AutoPostBack="false"
                OnClientClicked='<%# "function (s,e){jsPadShowHide(s,e,"+Container.ItemIndex+");}" %>'
                CssClass="Btn_PadN" HoveredCssClass="Btn_PadH">
                <Image EnableImageButton="true"></Image>
                <ToggleStates>
                    <telerik:RadButtonToggleState Value="Show" />
                    <telerik:RadButtonToggleState Value="Hide" Selected="true" />
                </ToggleStates>
            </telerik:RadButton>
        </ItemTemplate>
    </telerik:GridTemplateColumn>

JavaScript Code:

function jsPadShowHide(s, e, i) {
    var grd_MT = $find(grd_ID).get_masterTableView();
    var row = grd_MT.get_dataItems()[i].get_element();
    var pad = $telerik.findControl($(row).next()[0], "Txt_Pad_Dtl");
    //var selected = s.get_selectedToggleState().get_text();
    var selected = s.get_selectedToggleState().get_value();
    pad.set_visible(selected == "Hide");
}

Upvotes: 0

Shaharyar
Shaharyar

Reputation: 12439

You can get the all textboxes using jquery id selector:

var arr_txtBoxes = $("[id$=Txt_Pad_Dtl]");    //return array of textboxes

It will select all textboxes with id ending with string Txt_Pad_Dtl.

You can access them like:

arr_txtBoxes[0].control.get_value()

OR

If you have only one textbox with required id, use this:

var txtBox = $("#Txt_Pad_Dtl");

Upvotes: 1

Related Questions