I have a question about the Kendo Grid and grouping - I'd like to include some logic when it comes to grouping a grid. I need to group addresses by state, and if state is empty, then group by country. Is this doable? Thanks.
You could create a hidden column that has state is available otherwise country, and then set the datasource to group by that column:
var jsondata = [
{City : "Houston",State : "Texas",Country : "USA"},
{City : "New York",State : "New York",Country : "USA"},
{City : "Austin",State : "Texas",Country : "USA"},
{City : "London",State : "",Country : "UK"},
{City : "Manchester",State :"",Country : "UK"},
{City : "Paris",State : "",Country : "France"}
];
for (var i=0; i < jsondata.length; i++){
var stateCountry = jsondata[i].State ? jsondata[i].State : jsondata[i].Country;
jsondata[i].Group = stateCountry;
}
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: jsondata,
schema: {
model: {
fields: {
City: { type: "string" },
State: { type: "string" },
Country: { type: "string" },
}
}
},
group: {
field: "Group",
dir: "asc"
}
},
groupable: false,
scrollable: true,
columns: [
{ field: "City" },
{ field: "State" },
{ field: "Country" },
{ field: "Group", title: "State/Country", hidden: true }
]
});
});
DEMO
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'm beginner...
I'm using kendo-grid with Jquery.
I want to get current sorted field in kendo-gird.
I found this.
console.log(grid.dataSource._sort[0].dir);
console.log(grid.dataSource._sort[0].field);
Can I find alternative way?
this is my code.
var dataSource = new kendo.data.DataSource({
transport : {
read : {
type : 'post',
dataType : 'json',
contentType : 'application/json;charset=UTF-8',
url : cst.contextPath() + "/watcher/kendoPagination_statsErrorHistoryRetrieveQry.htm",
data : param
},
parameterMap: function (data, opperation) {
return JSON.stringify(data);
}
},
schema : {
data : function(data) {
return data;
},
total : function(response) {
return response.length > 0 ? response[0].TOTAL_COUNT : 0;
}
},
pageSize : cst.countPerPage(),
serverPaging : true,
serverSorting : true
});
var columns = kendoGridColumns();
$("#grid")
.kendoGrid({
dataSource : dataSource,
sortable : {
mode : 'multiple',
allowUnsort : true
},
columns : columns.error()
selectable : 'row',
scrollable : true,
resizable : true,
}));
How can I get current sorted field name?
Avoid using private fields. The DataSource sort method is the official way to get the current sort state:
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-sort
var dataSource = new kendo.data.DataSource({
data: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
sort: { field: "age", dir: "desc" }
});
var sort = dataSource.sort();
console.log(sort.length); // displays "1"
console.log(sort[0].field); // displays "age"
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.
I referred Kendo articles and did goggling ,But I couldn't found any solution.
step 1:
Is it possible that when we are using common data source and binding the whole data to chart and grid with pagination this is to happen when the page is loading.
step 2:
later on based on the filter condition applied on grid the data in chart should change.
Any help or suggest me whether it is possible or not..
var common = new kendo.data.DataSource({
type : "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderDate: { type: "date" }
}
}
}
});
common.read();
var grid = $("#grid").kendoGrid({
dataSource: common,
pageSize : 10,
pageable : {
refresh : true,
pageSizes: [10, 20]
},
filterable:true,
columns : [
{
field : "OrderID",
filterable: false
},
"Freight",
{
field : "OrderDate",
title : "Order Date",
width : 100,
format: "{0:MM/dd/yyyy}",
filterable: true
},
{
field: "ShipName",
title: "Ship Name",
width: 200,
filterable: true
},
{
field: "ShipCity",
title: "Ship City",
filterable: true
}
]
}).data("kendoGrid");
$("#chart").kendoChart({
dataSource : common,
autoBind : false,
categoryAxis: {
field: "OrderID"
},
legend : {
position: "right", visible: true
},
seriesDefaults: { type: "area" },
series : [
{ field: "OrderDate", name: "OrderDate" },
{ field: "Freight", name: "Freight" },
{ field: "ShipVia", name: "ShipVia" }
],
valueAxis : [
{
name : "OrderID",
max : 5.0,
min : 0,
labels : {
format: "{0}"
},
tooltip: { visible: true }
}
]
});
Here is fiddle up to now I have tested with : http://jsfiddle.net/D3rSk/189/
The grid doesn't have a pageSize option. You need to set the page size in the data source configuration:
var common = new kendo.data.DataSource({
pageSize : 10,
type : "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderDate: { type: "date" }
}
}
}
});
Here is the updated jsFiddle: http://jsfiddle.net/D3rSk/192/
In my group's project, we had a one grid and export button. We came across an issue which is that when exopt the data in excel format fiddle: http://jsfiddle.net/SZBrt/11/ need to display the pop up message stating that 'The data is getting filtered' to be displayed so that the we can know the filtering is under process. I appreciate your help in advance.
And My Code:
var grid = $("#grid").kendoGrid({
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderID : { type: "number" },
Freight : { type: "number" },
ShipName : { type: "string" },
OrderDate: { type: "date" },
ShipCity : { type: "string" }
}
}
},
pageSize : 10
},
filterable: true,
sortable : true,
pageable : true,
columns : [
{
field : "OrderID",
filterable: false
},
"Freight",
{
field : "OrderDate",
title : "Order Date",
width : 100,
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipName",
title: "Ship Name",
width: 200
},
{
field: "ShipCity",
title: "Ship City"
}
]
}).data("kendoGrid");
Add to the DataSource definition an event handler for requestStart and requestEnd.
dataSource: {
requestStart : function() {
// Add code for displaying your own "loading" message
},
requestEnd: function() {
// Add code for hiding your own "loading" message
},
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderID : { type: "number" },
Freight : { type: "number" },
ShipName : { type: "string" },
OrderDate: { type: "date" },
ShipCity : { type: "string" }
}
}
},
pageSize : 10
},
You did not specify how that Loading message looks like, it might be as simple as adding / removing visibility:
requestStart: function () {
$("#loading-msg").css("visibility", "visible");
},
requestEnd: function () {
$("#loading-msg").css("visibility", "hidden");
},
or open / close a window:
requestStart: function () {
$("#loading-msg").data("kendoWindow").center().open();
},
requestEnd: function () {
$("#loading-msg").data("kendoWindow").close();
},