I have a Kendo Grid, and instead of having a custom command:
$('#grid').kendoGrid({
dataSource: data,
columns:
[
...
{ command: { text: "Details", click: showDetails }, title: " " }
]
});
I'd like the same behavior to occur but on a standard link. Is it possible?
This is the functionality I'm looking for: http://jsfiddle.net/dmathisen/ERgkA/2/
But want it to behave like this: http://jsfiddle.net/dmathisen/qXAf6/4/
This is similar to what I use in my own projects. You can use whatever markup you desire and style it however you want to make it look functional.
function showDetails(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
document.getElementById('details').innerHTML = dataItem.quantity;
}
var data = [
{ name: "name1", quantity: 1 },
{ name: "name2", quantity: 4 },
{ name: "name3", quantity: 9 }
];
var grid = $('#grid').kendoGrid({
dataSource: data,
columns: [
{ field: 'name', template: '#= name #' },
{ field: 'quantity' }
]
}).data('kendoGrid');
grid.table.on('click', '.link', function(e) {
showDetails.call(grid, e);
});
JsFiddle
http://jsfiddle.net/qXAf6/7/
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
What I'm trying to accomplish is to apply an "automatic" secondary column sort when a user sorts a column in a kendo grid.
So in this JS fiddle example, if a user sorts by "Value", it'll also sort by "Name". Note that the 0s are sorted together, but the names aren't alphabetical. I'd like them to be alphabetical (the secondary sort).
Here's an attempt at overriding the datasource sorting to accomplish this. I'm taking the user's original sort and the adding an additional sort on "SortedName". Based on the sorting array that's logged, it seems to be close but is still not working.
Any other ideas on how to accomplish this?
Note: I don't want to allow users to sort by multiple columns. The real world example I'm using this for can have up to 50+ columns (unfortunately), so multiple sort can get confusing / unintuitive. And I'd like it to be done behind the scenes without extra user interaction.
Example code for overriding kendo datasource sort():
dataSource.originalSort = dataSource.sort;
dataSource.sort = function () {
// take the user's sort and apply sorting on an additional column
// the sort array should look like this:
[
{ field: "Value", dir: "asc" }, // this is what the user sorted by
{ field: "SortedName", dir: "asc" }, // and I'm adding this
]
return dataSource.originalSort.apply(this, arguments);
}
Please try with the below code snippet.
<div id="grid">
</div>
<script>
var dataSource = new kendo.data.DataSource({
data: [
{ Name: "Lisa", Value: 1 },
{ Name: "Dan", Value: 12 },
{ Name: "Ken", Value: 5 },
{ Name: "Arthur", Value: 15 },
{ Name: "Bob", Value: 0 },
{ Name: "Sally", Value: 0 },
{ Name: "Alexis", Value: 0 },
{ Name: "Cody", Value: 0 },
{ Name: "Steve", Value: 0 },
{ Name: "Andrew", Value: 0 },
{ Name: "Duke", Value: 0 }
],
schema: {
model: {
fields: {
Name: { type: "string" },
Value: { type: "number" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
dataBound: function (e) {
var isSortedByName = false;
var grid = $("#grid").data("kendoGrid");
var ds = grid.dataSource;
var sort = ds.sort();
if (sort) {
for (var i = 0; i < sort.length; i++) {
if (sort[i].field == "Name") {
isSortedByName = true;
}
}
if (isSortedByName == false) {
sort.push({ field: "Name", dir: "asc" });
ds.sort(sort);
}
}
},
columns: [
{ field: "Name" },
{ field: "Value" }
],
sortable: true
});
</script>
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");
Is it possible to use the Kendo-Dataviz pie chart as a button control. I want every piece to be a different control.
I could not find anything like that in the documentation.
You might define a seriesClick event. Something like:
$("#chart").kendoChart({
series: [
{
type: "pie",
categoryField: "type",
data: [
{ value: 1, type: "Category 1" },
{ value: 2, type: "Category 2" }
]
}
],
seriesClick : function (e) {
alert("You clicked on: " + JSON.stringify(e.dataItem));
}
});
See it running here : http://jsfiddle.net/rS3T4/
I'm adding and removing data to a Kendo dataSource. I wish to save it localStorage, and be able to read it again from localStorage.
Here I've attempted to use jStorage for the saving and loading of data.
How it's loaded:
if ($.jStorage.get('favoritter') != null) {
var datakilde_favoritter = $.jStorage.get('favoritter');
} else {
var data = [
{id: 5, name: "LINK ONE", url: "http://www.linkone.com" }
];
var datakilde_favoritter = new kendo.data.DataSource({
data: data,
sort: { field: "name", dir: "asc" }
});
}
How it's saved:
$.jStorage.set('favoritter', datakilde_favoritter);
Define your DataSource as:
var ds = new kendo.data.DataSource({
transport: {
read : function (op) {
var data = $.jStorage.get('favoritter');
if (!data) {
data = [
{id: 5, name: "LINK ONE", url: "http://www.linkone.com" }
];
}
op.success(data);
},
update : function (op) {
$.jStorage.set("favoritter", ds.data());
op.success(op.data);
},
destroy: function (op) {
console.log("destroy", ds.data());
$.jStorage.set("favoritter", ds.data());
op.success(op.data);
},
create : function (op) {
$.jStorage.set("favoritter", ds.data());
op.success(op.data);
}
},
sort : { field: "name", dir: "asc" },
pageSize : 10,
schema : {
model: {
id : "id",
fields: {
id : { type: 'number' },
name: { type: 'string' }
}
}
}
});
You might consider removing create and destroy if not needed.
And your grid would be something like:
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : "popup",
pageable : true,
toolbar : ["create"],
columns : [
{ command: ["edit", "destroy"], width: 100 },
{ field: "id", width: 90, title: "#" },
{ field: "name", width: 90, title: "URL Name" }
]
}).data("kendoGrid");
Basically when updating you need to invoke op.success with the data returned from the server. In your case since it is the browser itself, you don't need just to return the original data.