I'm trying to rebind my grid using setOptions which seems to be a suitable option
Currently i'm working with Kendo UI v2014.2.903 and i'm trying to use setOptions but it doesn't reload my grid .
Code :
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
setTimeout(function(){
alert('update check')
var grid = $("#grid").data("kendoGrid");
grid.setOptions({
columns: [
{ field: "name" },
{ field: "age" },
{ field: "code" }
],
dataSource: [
{ name: "Jane Doe", age: 30,code:1 },
{ name: "John Doe", age: 33,code:11 }
]
});
grid.setDataSource([
{ name: "Jane Doe", age: 30,code:1 },
{ name: "John Doe", age: 33,code:11 }
]);
},2000);
</script>
sample here which shows the issue .
when i update the version to 2016.2.504 setOptions seem to work sample here.
It would be helpful if someone can throw me some hack to fix the issue i see in 2014 version .
I think that's probably a bug or a not supported feature for Kendo UI v2014.2.903(I'm not sure and I think you should post on telerik forums to get an actual answer. I'm curious too)
But since you wanted some work around/hack. One way could be to modify columns as below :
var grid = $("#grid").data("kendoGrid");
var ds = grid.dataSource;
grid.columns = [];
grid.thead.remove();
ds.data([{ name: "Jane Doe", age: 30,code:1 },
{ name: "John Doe", age: 33,code:11 }]);
Here is a working example
Related
Using kendo grid edit event I want to disable field name and id during Edit mode. I manage to disable id by following this example here. But went I try to disable name seem it not working, any thought how to do this?
WORKING DEMO IN DOJO
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" },
{ command: "edit" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" },
"name": { type: "string" }
}
}
}
},
editable: "inline",
toolbar:["create"],
edit: function(e) {
if (!e.model.isNew()) {
var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
numeric.enable(false);
//var x = e.container.find("input[name=name]").data("kendoTextBox");
//x.enable(false);
//$("input[name=name]").prop("disabled", true).addClass("k-state-disabled");
//$("input[name=name]").editable = false;
}
}
});
by using editable function i created this
function isEditable(e){
var dataSource = $("#grid").data("kendoGrid").dataSource;
return (e.id == null || e.id == '');
}
and add this into the grid > column
columns: [
{ field: "id", editable: isEditable },
{ field: "name", editable: isEditable },
{ field: "age" },
{ command: "edit" }
],
Full working demo is here
I want to set the datasource for a kendoui treelist at the run time. Please check following example. If I set the datasource at the design time, I am able to see the data in the control. But if I try to set the datasource at run time, I do not see the data in the control.
<div id="treeList"></div>
<script>
var data = [ { name: "Jane Doe" }, { name: "John Doe" }];
var dataSource = new kendo.data.TreeListDataSource({
data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ command: [{ name: "edit" }] }
],
editable: true
//,dataSource: dataSource
});
var grid = $("#treelist").data("kendoTreeList");
grid.setDataSource( dataSource);
grid.dataSource = dataSource;
grid.dataSource.read();
grid.dataSource.data(data);
</script>
The problem seems to be with the selector itself. You logic was ok but for some reason, the object returned by data("kendoTreeList") was null. I updated your code to chain the data after the kendoTreeList initialization.
var dataSource = new kendo.data.TreeListDataSource({
data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
var grid = $("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ command: [{ name: "edit" }] }
],
editable: true
}).data("kendoTreeList");
grid.setDataSource(dataSource);
It's a bit odd to say but I thought your code and my code would be equivalent. Obviously, it ain't but I can't figure out why.
Your main problem is that you have the id to the DOM element set to "treeList".
var grid = $("#treelist").data("kendoTreeList");
As you can see here, you use all lowercase when setting the grid variable. That was your only problem. It should look like this:
var grid = $("#treeList").data("kendoTreeList");
I am using the KendoUI Kendo UI v2015.1.408 version. I want to create a grid withe filter menu , but the javascript error "kendoFilterCell is not a function" is thrown. Below is my code ( Actually I just using one of the kendo UI example:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
filterable: {`enter code here`
mode: "menu, row"
},
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
In Kendo UI, with the Grid widget, I cannot figure out how to hide the extra column at the end of the table, the one that does nothing and is seeminlgy reserved for the scroll bar.
Anyone figure this out? It's in all the examples: http://demos.telerik.com/kendo-ui/web/grid/index.html
Use the scrollable configuration option:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
scrollable: false
});
I have searched a lot but I haven't found solution.
Is there any way to add a row(as a last row) with totals for each column in kendu grid?
You need to set the footerTemplate of the grid columns. Then use aggregates. Here is a running code snippet:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age",
footerTemplate: "Min: #: min # Max: #: max #"
}
],
dataSource: {
data: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
aggregate: [
{ field: "age", aggregate: "min" },
{ field: "age", aggregate: "max" }
]
}
});
</script>