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
});
Related
I have a column that I want always to be rendered in the grid, but I have other columns that I want to allow users to toggle on and off. I'm struggling to find a setting on the kendo-grid-column component that would remove it as an option.
I want to remove the "Actions" column from the column menu. I've tried editable false, locked, etc not finding something that will remove it from the column selector options.
<kendo-grid-column
[width]="200"
[columnMenu]="false"
[resizable]="false"
[editable]="false"
id="actions-col"
field="actions"
title="Actions"
>
I don't know any property that will allow to do this directly. However, you can still use the columnMenuInit event to hide some menu items:
columnMenuInit(e) {
//Hides the ShipCountry column
//HiddenMenuItem set display: none!important
e.container.find('li.k-columns-item').find('input[data-field="ShipCountry"]').closest("li").addClass("HiddenMenuItem");
}
In this example, I can't use CSS display none directly because Kendo will overwrite it and we can't remove it from the DOM since the grid will raise an error if it can't find it... so that's why I'm using the HiddenMenuItem class.
Define menu inside column object and set it to false:
$("#grid").kendoGrid({
columns: [
{ field: "id", menu: false },
{ field: "name", menu: false },
{ field: "age" }
],
columnMenu: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
Example: Columns menu
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
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 }
]
});
I want to add custom attributes to model fields.Think can I add data-email-msg as attribute to a field in Kendo Grid.(Please look at my example and how I add it..)
here is a example.....
$("#grid").kendoGrid({
columns: [ {
field: "name",
title: "Name",
attributes: {
"class": "table-cell",
style: "text-align: right; font-size: 14px",
data-email-msg : "enter a valid email massage"
}
} ],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
I already know that above is wrong. I am asking, is there a way to do that ??
Put data-email-msg in quotes like "data-email-msg"
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>