This is a migrated thread and some comments may be shown as answers.

MvvM grid how to define columns from model?

3 Answers 512 Views

Grid

This is a migrated thread and some comments may be shown as answers.

siminture asked on 29 Aug 2016, 02:14 PM

<!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>

3 Answers, 1 is accepted

answered on 31 Aug 2016, 10:25 AM

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

Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.

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?

answered on 05 Sep 2016, 09:01 AM

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

Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.