Kendo Grid Reload Static DataSource from Ajax

Ada kasus dimana Kendo Grid (maupun Kendo components yang lain) menggunakan static data source untuk memudahkan pemrosesan di client side (misalnya filtering, sorting). Kita ingin meng-update static data source ini via ajax tanpa me-reload website.

Caranya sebagai berikut

[code language=”javascript”]
var carPackageDataSource;

function reloadCarPackageGrid(idCarModel){
//kamus
var idCarModel = $(‘#IdCarModel’).val();
var filter = { idCarModel: idCarModel };

//algoritma
$.post(‘@Url.Action("BindingCarPackage")’, filter, function (data) {
console.log(data);
carPackageDataSource.data(data);
}, ‘json’);
}

$(document).ready(function(){
carPackageDataSource = new kendo.data.DataSource({
schema: {
data: "data",
total: "total",
model: {
fields: {
"Id": { type: "string" },
"IdCarBrand": { type: "string" },
"IdCarModel": { type: "string" },
"CarModelName": { type: "string" },
"CarBrandName": { type: "string" },
"Name": { type: "string" },
"Price": { type: "number" },
"IsActive": { type: "boolean" },
"IsChecked": { type: "string" },
"PriceEach": { type: "number" },
}
}
},
sort: { field: ‘Name’, dir: ‘asc’ },
});

$("#car-package-grid").kendoGrid({
dataSource: carPackageDataSource,
dataValueField: "Id",
dataBound: function (e) {
var dsData = this.dataSource.data();
this.tbody.find(".numeric").each(function(i){
$(this).kendoNumericTextBox({
format: ‘{0:n0}’,
spin: function(e){
spinValueSub(data[i].Id, dsData[i].Price);
},
});
});

onloadCheckedTemp();
},
filterable: kendoGridFilterable,
pageable: false,
sortable: true,
resizable: true,
columns: [
{
field: "Id",
title: " ",
//template: "<input type=’checkbox’ id=’ck-#=Id#’ class=’ck’ value=’#=Id#’ name=’action’ onClick=’setGlobalPriceData(\"#=Id#\", \"#=Price#\")’>",
template: kendo.template($("#checkboxAction").html()),
filterable: false,
sortable: false,
width: 30
},
{
field: "Name",
title: "Paket",
width: 130,
},
{
field: "Quantity",
title: "Quantity",
width: 150,
type:"number",
format: "{0:n0}",
//template: "<input type=’number’ disabled=true min=1 id=’qty-#=Id#’ onChange=’changeValueSub(\"#=Id#\", \"#=Price#\")’/>",
template: "<input id=’qty-#=Id#’ type=’number’ class=’numeric’ disabled=’disabled’ onChange=’changeValueSub(\"#=Id#\", \"#=Price#\")’></input>",
editable: true,
filterable: false,
},
{
field: "Price",
title: "Harga",
template: "<div id=’prc-#=Id#’ align=’right’>#=kendo.toString(Price, \"n0\")#</div>",
width: 130,
},
{
field: "PriceEach",
title: "Sub Total",
template: "<div id=’subtotal-#=Id#’ align=’right’></div>",
filterable: false,
width: 130,
},

],
});
});
[/code]