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

DataGrid not refreshing

1 Answer 74 Views

Grid

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

Paul asked on 25 Jan 2017, 12:46 PM

I'm new to Kendo and having issues with the following data grid not refreshing. Not sure what the issue is, but any help is greatly appreciated.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>

<div id="app"></div>
<div><button id="btnRefresh" onclick="refresh()">refresh</button></div>
<script id="grid-view" type="text/x-kendo-tmpl">
<div class="manage-roles">
<div id="grid" data-role="grid"
data-scrollable="true"
data-editable="inline"
data-columns='[
{ field : "JobTitle", width: 120, title : "Job Title Code" },
{ field : "Description" },
{ field : "CategoryId", template: "${Category}" },
{"command": "edit"}]'
data-bind="source: roles"
style="height: 500px">
</div>
</div>
</script>

<script>

var roleViewModel = kendo.observable({
categories: new kendo.data.DataSource({
data: [
{ "CategoryId": 1, "Description": "IT" },
{ "CategoryId": 2, "Description": "Billing" },
{ "CategoryId": 3, "Description": "HR" },
{ "CategoryId": 4, "Description": "Sales" },
{ "CategoryId": 5, "Description": "Field" },
{ "CategoryId": 10, "Description": "Stuff" },
{ "CategoryId": 11, "Description": "Unassigned" }
]
}),
roles: new kendo.data.DataSource({
data: [
{ "RoleId": 1, "JobTitle": "AADM1", "Description": "Administrative Assistant I", "Category": "Stuff", "CategoryId": 10 },
{ "RoleId": 2, "JobTitle": "AADM2", "Description": "Administrative Assistant II", "Category": null, "CategoryId": 0 },
{ "RoleId": 3, "JobTitle": "ACCIN", "Description": "Accounting Intern", "Category": null, "CategoryId": 0 },
{ "RoleId": 4, "JobTitle": "ACCSU", "Description": "Accounting Supervisor", "Category": null, "CategoryId": 0 }, { "RoleId": 5, "JobTitle": "ACCTC", "Description": "Accountant", "Category": null, "CategoryId": 0 }
]
})
});

function refresh() {
console.log('am here too');
var grid = $('#grid').data("kendoGrid");
console.log(grid);


grid.dataSource.data = new kendo.data.DataSource ({
data: [
{ "RoleId": 10, "JobTitle": "AADM11", "Description": "Administrative Assistant I", "Category": "Stuff", "CategoryId": 10 },
{ "RoleId": 12, "JobTitle": "AADM12", "Description": "Administrative Assistant II", "Category": null, "CategoryId": 0 },
{ "RoleId": 13, "JobTitle": "ACCIN1", "Description": "Accounting Intern", "Category": null, "CategoryId": 0 },
{ "RoleId": 14, "JobTitle": "ACCSU1", "Description": "Accounting Supervisor", "Category": null, "CategoryId": 0 }, { "RoleId": 5, "JobTitle": "ACCTC", "Description": "Accountant", "Category": null, "CategoryId": 0 }
]
});

console.log('am here');
//grid.read();
grid.refresh();
}

var categoryEditor = function(container, options) {
$('<input data-bind="value: ' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
dataSource: roleViewModel.categories,
dataTextField: 'Description',
dataValueField: 'CategoryId'
});
};

var view = new kendo.View($("#grid-view").html(), {
model: roleViewModel,
init: function() {
var widget = this.element.find("[data-role=grid]").data("kendoGrid");

widget.columns[2].editor = categoryEditor;
}

});

var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

layout.render($("#app"));

layout.showIn("#content", view);
</script>
</body>
</html>

DataGrid not refreshing

1 Answer, 1 is accepted