[英]Kendo MVC grid set selection mode programmatically
我有一個Kendo MVC網格,我想在選中復選框時使用Javascript或JQuery將SelectionMode從單個更改為多個,並在取消選中此復選框時將其從多個更改為單個。 這有可能嗎? (我也綁定和取消綁定更改事件,這按預期方式工作)。 這是我目前為更改選擇模式而嘗試的方法,但是它不起作用:
<div class="col-md-5 col-sm-5" style="background-color: #52666f;">
<h2 style="color:#fff;font-size:18px;margin-top:10px;margin-left:13px;">MultiSelect Products</h2>
@(Html.Kendo().CheckBox()
.HtmlAttributes(new { style = "" })
.Name("MultiSelect")
)
</div>
<div class="col-md-12 col-sm-12">
<h2 style="color:#fff;font-size:18px;margin-top:10px;margin:auto;width:100%;text-align:center;">Select Product</h2>
@(Html.Kendo().Grid<ManufacturerProduct>()
.Name("grdMainManufacturerProducts")
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(manpr => manpr.Name).Width(150);
columns.Bound(manpr => manpr.GenericStyle).Width(150);
})
.HtmlAttributes(new { style = "height: 420px;" })
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row))
.Scrollable()
.Sortable()
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
))
)
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Events(events => events.Change("onChangeMainManProduct"))
.Filterable(filterable => filterable
.Enabled(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(manpr => manpr.Id);
})
.Read(read => read
.Url(Url.Content("~/json/ManufacturerProductsController/ManufacturerProduct_ReadMainProduct"))
.Data("additionalDataForReadManProducts"))
)
)
</div>
<script>
$(function () {
$('#MultiSelect').change(function () {
var checked = $(this).is(':checked');
onChangeMultiSelect(checked);
});
});
function onChangeMultiSelect(checked) {
var grid = $("#grdMainManufacturerProducts").data("kendoGrid");
if (checked == true) {
//alert("Checked!");
grid.selectable = 'Multiple';
grid.select.setMode('Multiple');
('#grdMainManufacturerProducts).data("kendoGrid").unbind('change');
}
else {
//alert("UnChecked!");
grid.bind("change", kendoGridWithCheckboxSelectionOnChange);
grid.selectable = 'Single';
grid.select.setMode('Single');
}
}
function kendoGridWithCheckboxSelectionOnChange() {
alert("Change reactivated");
}
</script>
我也制作了Kendo UI dojo來嘗試達到預期的效果,您可以在這里找到它: Kendo UI設置網格選擇模式
有人能對此有所啟示嗎? 提前致謝!
您可以使用setOptions
方法完成此操作,如下所示:
if (checked == true) {
//alert("Checked!");
grid.setOptions({
selectable: "multiple"
});
('#grid').data("kendoGrid").unbind('change');
} else {
//alert("UnChecked!");
grid.bind("change", kendoGridWithCheckboxSelectionOnChange);
grid.setOptions({
selectable: "single"
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.