隐藏表格列 ：
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn(1);
</script><div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn("age");
</script><div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
title: "Person",
columns: [
{ field: "fname", title: "First name"},
{ field: "lname", title: "Last name"}
]}, {
field: "age"
}
],
dataSource: [
{ fname: "Jane", lname: "Smith", age: 30 },
{ fname: "John", lname: "Stevens", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn(grid.columns[0].columns[1]);
</script>链接： https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/hidecolumn
关于绑定的几种情况：
第一种方式（通过弹框将dataItem传值到templete）
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html()); function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
} <script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>链接： https://demos.telerik.com/kendo-ui/grid/custom-command
第二种方式（通过绑定字段到组件）
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName",title:"Product Name" },
{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },
{ command: "destroy", title: " ", width: "150px" }],
editable: true
});
});
function categoryDropDownEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
});
}
链接： https://demos.telerik.com/kendo-ui/grid/editing-custom
第三种方式（通过kendoui自带编辑绑定，data-bind="value:"）
{
command: [
{name: "edit", text: {edit: "编辑", update: "保存", cancel: "取消"}},
{name: "destroy", text: "删除"}
], title: "操作", width: "250px"
}],
editable: {
mode: "popup",
template: kendo.template($(".stock_editor").html())
},
edit: function (e) {
var editWindow = e.container.data("kendoWindow");
if (e.model.isNew()) {
editWindow.title('新增');
} else {
editWindow.title('编辑');
}
}<script class="usermanage_edit" type="text/x-kendo-template">
<div class="k-edit-form-container">
<div class="k-edit-label"><label>登陆名</label></div>
<div data-container-for="num" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ProductName" required="required" data-bind="value:num">
</div>
<div class="k-edit-label"><label>真实姓名</label></div>
<div data-container-for="num" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ProductName" required="required"
data-bind="value:nickname">
</div>
<div class="k-edit-label"><label>所属角色</label></div>
<select data-role="multiselect" data-placeholder="" data-text-field="ProductName" data-value-field="ProductID" data-bind="source: products"
></select>
</div>
</script>第四种方式（通过MVVM数据绑定）
<ul data-template="ul-template" data-bind="source: products">
</ul>
<script id="ul-template" type="text/x-kendo-template">
<li>
id: <span data-bind="text: id"></span>
name: <span data-bind="text: name"></span>
</li>
</script>
<script>
var viewModel = kendo.observable({
products: [
{ id: 1, name: "Coffee" },
{ id: 2, name: "Tea" },
{ id: 3, name: "Juice" }
]
});
kendo.bind($("ul"), viewModel);
</script>链接：https://blog.csdn.net/qq_38328041/article/details/76550533
<div class="demo-section k-content wide">
<div>
<ul class="fieldlist">
<li><h4>Text</h4> <input type="text" data-bind="value: textValue" class="k-textbox" /></li>
<li><h4>Text with update on keyup event</h4> <input type="text" data-value-update="keyup" data-bind="value: textValue" class="k-textbox" /></li>
<li><h4>Textarea</h4> <textarea data-bind="value: textareaValue" class="k-textbox" style="height: 40px; width: 140px;"></textarea></li>
<li><h4>Checkbox</h4>
<label>
<input type="checkbox" data-bind="checked: checkboxValue" />Check
</label>
</li>
</ul>
</div>
<div>
<ul class="fieldlist">
<li><h4>Radio</h4>
<label>
<input type="radio" name="fruit" value="Apple"
data-bind="checked: radioValue" />Apple
</label>
<label>
<input type="radio" name="fruit" value="Banana"
data-bind="checked: radioValue" />Banana
</label>
<label>
<input type="radio" name="fruit" value="Orange"
data-bind="checked: radioValue" />Orange
</label>
</li>
<li><h4>Checkbox list</h4>
<label>
<input type="checkbox" value="Apple"
data-bind="checked: checkboxListValue" />Apple
</label>
<label>
<input type="checkbox" value="Banana"
data-bind="checked: checkboxListValue" />Banana
</label>
<label>
<input type="checkbox" value="Orange"
data-bind="checked: checkboxListValue" />Orange
</label>
</li>
<li><h4>Select</h4> <select data-bind="source: fruits, value: selectValue" style="width: 147px;"></select></li>
<li><h4>Multiple select</h4> <select multiple data-bind="source: fruits, value: multipleSelectValue" style="width: 147px;"></select></li>
</ul>
</div>
<div>
<h4>Current view model state</h4>
<pre>
{
textValue: <span data-bind="text: textValue"></span>,
textareaValue: <span data-bind="text: textareaValue"></span>,
checkboxValue: <span data-bind="text: checkboxValue"></span>,
radioValue: <span data-bind="text: radioValue"></span>,
checkBoxListValue: [<span data-bind="text: displayCheckBoxListValue"></span>],
selectValue: <span data-bind="text: selectValue"></span>,
multipleSelectValue: [<span data-bind="text: displayMultipleSelectValue"></span>]
}
</pre>
</div>
</div>var viewModel = kendo.observable({
textValue: "Text value",
textareaValue: "Textarea value",
checkboxValue: false,
radioValue: "Apple",
checkboxListValue: ["Apple"],
multipleSelectValue: ["Apple"],
fruits:["Apple", "Banana", "Orange"],
selectValue: "Apple",
displayCheckBoxListValue: function() {
return this.get("checkboxListValue").join(", ");
},
displayMultipleSelectValue: function() {
return this.get("multipleSelectValue").join(", ");
}
});
kendo.bind($("div.demo-section"), viewModel);链接：https://demos.telerik.com/kendo-ui/mvvm/elements
<div id="example">
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Units</th>
<th>Delete</th>
</tr>
</thead>
<tbody data-template="row-template" data-bind="source: products"></tbody>
<tfoot data-template="footer-template" data-bind="source: this"></tfoot>
</table>
<div>
<span>Add a product</span>
<ul>
<li>
<label>Name:<input type="text" placeholder="Enter name" data-bind="value: productName" /></label>
</li>
<li>
<label>Price:<input type="number" placeholder="Enter number" data-bind="value: productPrice" /></label>
</li>
<li>
<label>Units in stock:<input type="number" placeholder="Enter number" data-bind="value: productUnitsInStock" /></label>
</li>
<li>
<button data-bind="click: addProduct">Add a new product</button>
</li>
</ul>
</div>
</div>
<script id="row-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name">
</td>
<td data-bind="text: price" data-format="C">
#: kendo.toString(get("price"), "C") #
</td>
<td data-bind="text: unitsInStock"></td>
<td><button data-bind="click: deleteProduct">Delete</button></td>
</tr>
</script>
<script id="footer-template" type="text/x-kendo-template">
<tr>
<td>
Products count: #: total() #
</td>
<td>
Total price: #: totalPrice() #
</td>
<td colspan="2">
Units in stock: #: totalUnitsInStock() #
</td>
</tr>
</script>var viewModel = kendo.observable({
productName: "Product name",
productPrice: 10,
productUnitsInStock: 10,
addProduct: function() {
this.get("products").push({
name: this.get("productName"),
price: parseFloat(this.get("productPrice")),
unitsInStock: parseFloat(this.get("productUnitsInStock"))
});
},
deleteProduct: function(e) {
// the current data item (product) is passed as the "data" field of the event argument
var product = e.data;
var products = this.get("products");
var index = products.indexOf(product);
// remove the product by using the splice method
products.splice(index, 1);
},
total: function() {
return this.get("products").length;
},
totalPrice: function() {
var sum = 0;
$.each(this.get("products"), function(index, product) {
sum += product.price;
});
return sum;
},
totalUnitsInStock: function() {
var sum = 0;
$.each(this.get("products"), function(index, product) {
sum += product.unitsInStock;
});
return sum;
},
products: [
{ name: "Hampton Sofa", price: 989.99, unitsInStock: 39 },
{ name: "Perry Sofa", price: 559.99, unitsInStock: 17 },
{ name: "Donovan Sofa", price: 719.99, unitsInStock: 29 },
{ name: "Markus Sofa", price: 839.99, unitsInStock: 3 }
]
});
kendo.bind($("#example"), viewModel);