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

Issues with refresh of Grid

3 Answers 310 Views

Grid

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

Paul asked on 24 Jan 2017, 10:55 PM

Any help on the following code would be greatly appreciated. I have the following :

<!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 onClick: "refresh()">refresh</button></div>
<script id="grid-view" type="text/x-kendo-tmpl">
<div class="manage-roles">
<div 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() {
var grid = $("#grid").data("kendoGrid");
grid.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>

on the click of the refresh button I would expect the grid to be refreshed. Can someone tell me what I'm doing wrong?

3 Answers, 1 is accepted

answered on 24 Jan 2017, 10:58 PM

Sorry there was typo during the copy and paste: Here is the actual which can be run on Dojo.

<!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 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");
grid.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>

answered on 24 Jan 2017, 10:59 PM

Sorry was a typo in the first one. Can be run on dojo, but don't understand why it will not refresh.

<!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 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");
grid.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>

answered on 26 Jan 2017, 03:33 PM

Hello Paul,

Thank you for the provided example. I have made the following adjustments:

1) For the reference to the Grid to be obtained in the desired way, the HTML element it is initialized from has to have an ID attribute, e.g. <div id="grid">... --> var grid = $('#grid').data('kendoGrid');

2) The Grid API does not expose a "data" method. Instead, a reference to its dataSource must be obtained, so the dataSource.data() method can be called to provide the new data for the Grid

3) Same applies for the read() method, but in this case there is no need to call it, as the Grid will rebind automatically when provided with the new data, as described in point 2)

Here is the updated example:

http://dojo.telerik.com/Unede

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.