我的剑道网格有一些列。我正在尝试使用客户端模板有条件地隐藏一个复选框。当我使用客户端模板时,它可以正常工作。上面的代码在条件为true时隐藏了元素。
@(Html.Kendo().Grid<Spectrum.Model.CustomerInterestItem>()
.Name("customerInterestInfoGrid")
.AutoBind(true)
.Columns(columns =>
{
columns.Bound(c => c.ID).Width(200);
columns.Bound(c => c.SubscriptionEndDate).Title("End Date").Format("{0:MMM dd, yyyy}").Width(130);
columns.Bound(c => c.Notes).Width(200);
columns.Template(@<text></text>)
.ClientTemplate("#if (!InterestTypeID == 99) {#"
+"<input name='chkSubscribed' class='subscribedClass' type='checkbox' data-bind='checked: IsSubscribed' #= IsSubscribed ? checked='checked' : '' #/>"
+ "#} #").Width(130).Title("Subscribed");
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => { model.Id(c => c.ID); model.Field(f => f.Notes).Editable(false); model.Field(f => f.IsSubscribed).Editable(false); })
.Read(cfg => cfg.Action("testGridRead", "Customer").Data("customerIDData"))
.Update(cfg => cfg.Action("EditInterestItem", "Customer"))
.Destroy(cfg => cfg.Action("DeleteInterestItem", "Customer"))
.ServerOperation(false)
)
.Pageable(pageable => pageable
.Enabled(true)
.PageSizes(new int[3] { 10, 25, 50 })
.Refresh(true))
.Scrollable()
.Selectable()
.Sortable()
)
上面的代码将隐藏该复选框。但是我的问题是,当我单击更新按钮时,该复选框变为可见。我不知道原因
答案 0 :(得分:2)
尝试以下方法。您可以在客户端模板本身中指定条件
columns.Bound(c => c).Width(50).Title("Subscribed").ClientTemplate("<input type='checkbox' name='chkSubscribed' class='subscribedClass' #=InterestTypeID =='99' ? \"checked='checked' \" : '' # />");
答案 1 :(得分:1)
Kendo将在编辑模式下根据您的模型数据类型添加一个编辑器。因此,要阻止Kendo添加编辑器:-
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", title: "Discontinued", width: "80px",
template: "#if (UnitPrice > 20) {# <input name='chkSubscribed' class='subscribedClass' type='checkbox' data-bind='checked: Discontinued' #= Discontinued ? checked='checked' : '' #/> #} #",
editor: customBoolEditor },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
});
});
function customBoolEditor(container, options) {
var guid = kendo.guid();
if(options.model.UnitPrice > 20) {
$('<input class="k-checkbox" id="' + guid
+ '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
$('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container);
}
}
</script>
</div>