<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div>
<h4>Add or update a record</h4>
<div data-role="grid"
data-editable="true"
data-toolbar="['create', 'save']"
data-columns="columns"
data-bind="source: products,
visible: isVisible,
events: {
save: onSave
}"
style="height: 200px"></div>
</div>
<div style="padding-top: 1em;">
<h4>Console</h4>
<div class="console"></div>
</div>
</div>
<div class="box wide">
<div class="box-col">
<h4>Configuration</h4>
<div>
<label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
</div>
</div>
<div class="box-col">
<h4>Information</h4>
Kendo UI Grid supports the
<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,
<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and
<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
</div>
</div>
<script>
var viewModel = kendo.observable({
isVisible: true,
onSave: function(e) {
kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
},
columns:[
{field:"id", width:50},
{field: "name", width:200}
// ...etc
],
products: new kendo.data.DataSource({
schema: {
model: {
id: "ProductID",
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" }
}
}
},
batch: true,
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
},
update: {
url: "//demos.telerik.com/kendo-ui/service/products/update",
dataType: "jsonp"
},
create: {
url: "//demos.telerik.com/kendo-ui/service/products/create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
}
})
});
kendo.bind($("#example"), viewModel);
</script>
</div>
</body>
</html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div>
<h4>Add or update a record</h4>
<div data-role="grid"
data-editable="true"
data-toolbar="['create', 'save']"
data-columns="columns"
data-bind="source: products,
visible: isVisible,
events: {
save: onSave
}"
style="height: 200px"></div>
</div>
<div style="padding-top: 1em;">
<h4>Console</h4>
<div class="console"></div>
</div>
</div>
<div class="box wide">
<div class="box-col">
<h4>Configuration</h4>
<div>
<label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
</div>
</div>
<div class="box-col">
<h4>Information</h4>
Kendo UI Grid supports the
<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,
<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and
<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
</div>
</div>
<script>
var viewModel = kendo.observable({
isVisible: true,
onSave: function(e) {
kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
},
columns:[
{field:"id", width:50},
{field: "name", width:200}
// ...etc
],
products: new kendo.data.DataSource({
schema: {
model: {
id: "ProductID",
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" }
}
}
},
batch: true,
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
},
update: {
url: "//demos.telerik.com/kendo-ui/service/products/update",
dataType: "jsonp"
},
create: {
url: "//demos.telerik.com/kendo-ui/service/products/create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
}
})
});
kendo.bind($("#example"), viewModel);
</script>
</div>
</body>
</html>
3 Answers, 1 is accepted
0
Hello Siminture,
The only way to achieve the desired behavior is to define, and use custom bindings, as described in the following section of our documentation:
http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom
However, the easier and more straightforward approach in the discussed scenario would be to provide the array with the columns configuration directly in the markup, as shown in this online demo:
http://demos.telerik.com/kendo-ui/grid/mvvm
http://dojo.telerik.com/eRecI
I hope this helps.
Regards,
Dimiter Topalov
Telerik by Progress
The only way to achieve the desired behavior is to define, and use custom bindings, as described in the following section of our documentation:
http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom
However, the easier and more straightforward approach in the discussed scenario would be to provide the array with the columns configuration directly in the markup, as shown in this online demo:
http://demos.telerik.com/kendo-ui/grid/mvvm
http://dojo.telerik.com/eRecI
I hope this helps.
Regards,
Dimiter Topalov
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
siminture
Top achievements
Rank 1
Rank 1
answered on 01 Sep 2016, 09:39 AM
Dear Dimiter,
i think configuration columns directly in the markup is not good idea when columns need to set templates, function ...
custom binder, you mean like this ?
kendo.data.binders.gridColumn = kendo.data.Binder.extend({
refresh: function() {
var value = this.bindings["gridColumn"].get();
var grid = $(this.element).data("kendoGrid");
var opts = grid.getOptions();
opts.columns = value;
grid.setOptions(opts);
}
});
this code will recreate grid widget, is not very good sol, Any suggestion?
0
Hi Siminture,
Unfortunately, the approaches, described in my initial answer, are the ones provided, and supported out-of-the-box. If you feel that some additional or different functionality can improve our product, please submit a feature request to our UserVoice portal:
http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback
It is closely monitored, and the most popular ideas are considered for implementation from our developers for a future release of Kendo UI.
Thank you in advance.
Regards,
Dimiter Topalov
Telerik by Progress
Unfortunately, the approaches, described in my initial answer, are the ones provided, and supported out-of-the-box. If you feel that some additional or different functionality can improve our product, please submit a feature request to our UserVoice portal:
http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback
It is closely monitored, and the most popular ideas are considered for implementation from our developers for a future release of Kendo UI.
Thank you in advance.
Regards,
Dimiter Topalov
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.