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"
Related
I want to use 2 or more buttons in one field like Kendo Grid by using custom command in TreeList but I could not do that. Does anyone have a solution?
You just add an array of buttons to the column command property:
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{
command: [
{
name: "Cust1",
text: "Custom1",
click: function(e) {
alert("Custom1");
}
},
{
name: "Cust2",
text: "Custom2",
click: function(e) {
alert("Custom2");
}
},
]
}
],
editable: true,
dataSource: dataSource
});
DEMO
I'm trying to write a piece of code that shows the options of a column as checkboxes for the user to filter.
But I wanna do more than that. Let's say for instance that the user checks the "USA" option in the example below, it should show as a result: "USA", "USA1" and "USA2" (a contains filter).
I've found a variety of kendo filters but none of them could be applied to the property "filterable" - "multi:true".
I've tried the code on http://jsfiddle.net/phqs/vfqs917w/ but I couldn't achieve the results I want.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "country",
filterable: {
multi:true,
operators: {
string: {
contains: "Contains"
}
}
}
} ],
filterable: true,
dataSource: [ { country: "BG" }, { country: "USA" },{ country: "USA1" },
{ country: "USA2" }
]
});
</script>
Can someone please help me on this?
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
});