选中RadListView项目模板-客户端中的RadButton复选框
Check a RadButton checkbox within a RadListView ItemTemplate - Client Side
我只是试图设置客户端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的库,如本文所示
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);
这不会出错,通过调试,它会找到按钮(或跨度),但也无法选中该框。
你知道我做错了什么吗?
运行此代码的事件是什么?它必须至少是Sys.Application.Load事件,否则控件实例可能仍然未定义。
此外,在Text属性中还有一个额外的%>
,它会中断编译。
然后,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>
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 正在验证8个真/假复选框或复选框中的2个
- 为复选框javascript指定两个值
- 如何在单击复选框后调用控制器方法
- 从复选框和Selects-KnockoutJS中获取值的总和
- 选中多个具有相同名称的复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 使用$.ajax发布多个复选框
- AngularJS单选筛选不适用于Name、Description和Field4复选框值
- 使用jquery选中/取消选中单个复选框
- Angular JS Filter-通过3个复选框进行筛选
- 如果选中了多个复选框,如何添加事件
- Javascript复选框函数:;缺少:在属性id之后"
- JavaScript-切换“;全部检查”;复选框true/false
- 如何从javascript/jquery中的复选框中获取布尔值
- 在Ajax中捕获复选框值
- 显示隐藏复选框
- 如何使用javascript函数在gridview中按行启用/禁用复选框
- 选中RadListView项目模板-客户端中的RadButton复选框