检查 RadListView ItemTemplate 中的 RadButton 复选框 - 客户端

Question

我只是想设置客户端 RadListView 项目模板内的 telerik RadButton 的复选框（javascript/jquery）。

RadListView:

<telerik:RadListView runat="server" 
                     ID="parameterList" 
                     OnNeedDataSource="parameterList_NeedDataSource">
  <ItemTemplate>
    <tr>
      <td>
        <telerik:RadButton ToggleType="CheckBox" 
                           ButtonType="LinkButton"
                           runat="server"
                           ID="chkParameterType" 
                           AutoPostBack="False"
                           Text='<%# Eval("Description") %>
                           CssClass='<%# Eval("ParameterName") + "_button" %>'>
          <ToggleStates>
            <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked"/>
            <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
          </ToggleStates>
        </telerik:RadButton>
      </td>
    </tr>
  </ItemTemplate>
</telerik:RadListView>

我的 jquery 尝试首先尝试使用 telerik 的库，如 this post

中所示

var listView = $find('<%= parameterList.ClientID %>');
var txbClientObject = $telerik.findControl(listView.get_element().parentNode, 
                                           "chkParameterType").get_value()
var current = txbClientObject.get_value();

但 txbClientObject 返回时身份不明，因此 current 与 cannot read property of null

中断

我也试过直接按类名找到按钮 jquery。我担心这一点，因为我相信渲染在不同的浏览器中可能会有所不同。

var button = $("." + name + "_button > input");  //"name" is parameterName
button.prop("checked", true);

这个没有报错，通过它调试，找到了button（或者span），但是也没有选中box。

对我做错了什么有什么想法吗？

Answer 1

您运行此代码用于什么事件？它必须至少是 Sys.Application.Load 事件，否则控件实例可能仍未定义。

此外，您在文本属性处还有一个额外的 %>，这会破坏编译。

然后，findControl() 会给你控件实例，你不需要在那里调用 get_value()。

你应该考虑的是你想要哪个按钮，因为 ListView 可以有几个项目，这会给你第一个。

所以，这对我有用：

<telerik:RadListView runat="server" 
                             ID="parameterList" 
                             OnNeedDataSource="parameterList_NeedDataSource">
            <ItemTemplate>
                <tr>
                    <td>
                        <telerik:RadButton ToggleType="CheckBox" 
                                           ButtonType="LinkButton"
                                           runat="server"
                                           ID="chkParameterType" 
                                           AutoPostBack="False"
                                           Text='<%# Eval("Description") %>'
                                           CssClass='<%# Eval("ParameterName") + "_button" %>'>
                            <ToggleStates>
                                <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked"/>
                                <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
                            </ToggleStates>
                        </telerik:RadButton>
                    </td>
                </tr>
            </ItemTemplate>
        </telerik:RadListView>
        <asp:Button ID="Button1" Text="get first button" OnClientClick="getFirstButton(); return false;" runat="server" />
        <script>
            function getFirstButton() {
                var listView = $find('<%= parameterList.ClientID %>');
                var txbClientObject = $telerik.findControl(listView.get_element().parentNode,
                                                           "chkParameterType");
                var current = txbClientObject.get_value();
                alert(txbClientObject.get_checked());
                alert(txbClientObject.get_text());
                txbClientObject.set_checked(true);
            }
        </script>

这是一个更完整的示例，它将向您展示如何使用 CSS 类来获取任何所需的元素，并且还将通过指定 LayoutTemplate 提供有效的 HTML：

<telerik:RadListView runat="server"
                             ID="parameterList"
                             OnNeedDataSource="parameterList_NeedDataSource"
                             ItemPlaceholderID="theItemPlaceHolder">
            <LayoutTemplate>
                <table>
                    <asp:PlaceHolder ID="theItemPlaceHolder" runat="server" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                    <td class="buttonCell">
                        <telerik:RadButton ToggleType="CheckBox" 
                                           ButtonType="LinkButton"
                                           runat="server"
                                           ID="chkParameterType" 
                                           AutoPostBack="False"
                                           Text='<%# Eval("Description") %>'
                                           CssClass='<%# Eval("ParameterName") + "_button" %>'>
                            <ToggleStates>
                                <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked"/>
                                <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
                            </ToggleStates>
                        </telerik:RadButton>
                    </td>
                </tr>
            </ItemTemplate>
        </telerik:RadListView>
        <asp:Button ID="Button1" Text="get third button" OnClientClick="getThirdButton();return false;" runat="server" />
        <script>
            function getThirdButton() {
                var listView = $find('<%= parameterList.ClientID %>');
                var buttonCells = $telerik.$(".buttonCell", listView.get_element().parentNode);
                var txbClientObject = $telerik.findControl(buttonCells[2],
                                                           "chkParameterType");
                var current = txbClientObject.get_value();
                alert(txbClientObject.get_checked());
                alert(txbClientObject.get_text());
                txbClientObject.set_checked(true);
            }
        </script>

检查 RadListView ItemTemplate 中的 RadButton 复选框 - 客户端

Check a RadButton checkbox within a RadListView ItemTemplate - Client Side

javascript

c#

asp.net

jquery

telerik