使用 javascript 在客户端访问 RadGrid <DetailItemTemplate> 中的 TextBox 控件答案

【问题标题】：Accessing a TextBox control in RadGrid <DetailItemTemplate> in client side using javascript使用 javascript 在客户端访问 RadGrid <DetailItemTemplate> 中的 TextBox 控件
【发布时间】：2014-09-11 14:55:27
【问题描述】：

在客户端使用 javascript 访问 RadGrid 中的 TextBox 控件

嗨，我可以使用 C# 在服务器端访问 RadGrid 中的 TextBox 控件 [下面的代码可以正常工作]，但是如何使用 javascript 在客户端访问 TextBox？

ASPX 代码：

<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#代码：

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;
}

【问题讨论】：

标签： c# javascript asp.net telerik

【解决方案1】：

您可以使用jquery id selector 获取所有textboxes：

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

它将选择所有以id 以字符串Txt_Pad_Dtl 结尾的文本框。

您可以像这样访问它们：

arr_txtBoxes[0].control.get_value()

或

如果您只有一个textbox 和必需的id，请使用：

var txtBox = $("#Txt_Pad_Dtl");

【讨论】：

谢谢，但是当有人单击“显示/隐藏”按钮 [ID="Btn_Pad_Toggle"] 时，我想获取特定的网格数据项（因此是“DetailItemTemplate”中的文本框）。这将更有效，因为可以轻松检测到单击的单个按钮。
右击你想获取的textbox，选择inspect element，找到textbox的id。然后你可以使用我提供给你的代码来选择它。
问题是如何从数组中获取 i 的值？ (arr_txtBoxes[i])
如果textbox只有一个，那么数组中显然会有一个元素，所以可以将i设置为0。
但是您必须了解这是一个网格，并且每行都会重复每个“DetailItemTemplate”。所以总会有多个文本框，其 ID 为“ct100_Div_Txt002_Txt_Pad_Dtl”。

【解决方案2】：

终于搞定了。下面是代码：

ASPX 代码：

    <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 代码：

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");
}

【讨论】：