Question

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

Answer 1

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

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

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

使用javascript访问客户端RadGrid <detailitemtemplate>中的TextBox控件</detailitemtemplate>

2 个答案: