i am very much new to kendo grid, so please consider my question and help me.
i have a coldfusion page which has an array variable that contains all the user records retrieved from database.
now i have a function, for pagination.
i want to enable server side paging in this, but actually have no idea on how to do this.
please help.
$(document).ready(function(){
$("#data_table3").kendoGrid({
dataSource: {
pageSize: 10
},
pageable: {
refresh: true,
pageSizes: true
},
columns: [ {
field: "UserName",
width: 90,
title: "User Name"
} ,
{
field: "FirstName",
width: 90,
title: "First Name"
}
],
height: 460,
sortable: true
});
$("#data_table").show();
});
Hi try like this ,
$("#appointmentsGrid").kendoGrid({
columns: [
{ field: "MemberFirstName", title: "Member<br/>First Name" },
{ field: "MemberLastName", title: "Member<br/>Last Name" }
],
dataSource: new kendo.data.DataSource({
serverPaging: true,
serverSorting: true,
transport: {
read: {
url: "/Content/GetCustomerNameWithId",
data: additionalData
}
},
pageSize: 10,
schema: { data: "data", total: "total" }
}),
pageable: true,
sortable : true
});
Related
I am working on a odata grid with Kendo UI.
The problem is that the ajax request keeps containing a callback parameter. Which causes this error: Callback parameter is not supported. When I do the request manually without the callback, my odata service works perfect.
Someone an idea how to fix this?
$("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
type:"odata",
serverPaging: true,
serverFiltering: true,
serverSorting: true,
transport: {
contentType: "application/json; charset=utf-8",
type: "GET",
read: "/odata/FestivalSignUps?$inlinecount=allpages&$expand=PrefferedTasks/Task,AvailableDays,ApplicationUser",
dataType: "json",
parameterMap: function (options, type) {
var paramMap = kendo.data.transports.odata.parameterMap(options);
delete paramMap.$format; // <-- remove format parameter.
return paramMap;
}
},
pageSize: 10,
schema: {
data: function (data) {
return data["value"];
},
total: function (data) {
return data["odata.count"];
},
}
}),
filterable:true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "ApplicationUser.Email", width: 90, title: "Email" },
{ field: "ApplicationUser.FirstName", width: 90, title: "Voornaam" },
{ field: "ApplicationUser.LastName", width: 90, title: "Achternaam" },
{ field: "PrefferedTasks", width: 90, title: "Taken",
template: "#= formatTasks(data) #"},
{ field: "Beschikbaar", width: 90, title: "Taken" }
]
});
Update
This code solved the problem:
$("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
type: 'odata',
transport: {
read: {
url: "/odata/FestivalSignUps?$expand=PrefferedTasks/Task,AvailableDays,ApplicationUser",
dataType: "json"
},
},
schema: {
data: function (data) {
return data["value"];
},
total: function (data) {
return data["odata.count"];
},
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
}),
filterable:true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "ApplicationUser.Email", width: 90, title: "Email" },
{ field: "ApplicationUser.FirstName", width: 90, title: "Voornaam" },
{ field: "ApplicationUser.LastName", width: 90, title: "Achternaam" },
{ field: "PrefferedTasks", width: 90, title: "Taken",
template: "#= formatTasks(data) #"},
{
field: "AvailableDays", width: 90, title: "Beschikbaar",
template: "#= formatDays(data) #"
},
]
});
I cover this issue and some others in a blog post that I wrote: Server-Side Filtering Using KendoUI With MVC4 WebAPI and OData.
If you are querying your own data, and don't need to do a cross-domain request, we can just not use jsonp. To do this, we just tell Kendo the dataType for the read operation is "json".
var dataSource = new kendo.data.DataSource({
type: 'odata', // <-- Include OData style params on query string.
transport: {
read: {
url: "/api/Albums",
dataType: "json"; // <-- The default was "jsonp".
}
}
});
I am trying to bind a kendo datasource to a odata source for the first time without to much luck. I found an example product that allows versioning of the odata controller which looks pretty useful. The odata output looks something like
{
"d": {
"__metadata": {
"id": "http://localhost:11232/versionbyroute/v1/Products(7)",
"uri": "http://localhost:11232/versionbyroute/v1/Products(7)",
"type": "ODataVersioningSample.V1.ViewModels.Product",
"actions": {
"http://localhost:11232/versionbyroute/v1/$metadata#Container.Product": [
{
"title": "Product",
"target": "http://localhost:11232/versionbyroute/v1/Products(7)/Product"
}
]
}
},
"ID": 7,
"Name": "MS-DOS 3.0 (OEM)",
"ReleaseDate": null,
"SupportedUntil": null
}
}
Now with Kendo I am not quite sure how I am meant to gain access to ID & Name so far
var datasource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
beforeSend: function (req) {
req.setRequestHeader('Accept', 'application/json;odata=verbose');
},
url: "http://localhost:11232/versionbyroute/v1/Products(7)",
}
},
schema: {
model: {
fields: {
Name: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
$("#grid").kendoGrid({
height: 430,
sortable: true,
dataSource: datasource,
columns: [{ field: 'Name', title: 'Name' }]
});
I feel I am close but I think I am doing something wrong with the way I setup the schema? Can anyone point me in the right direction.
EDIT
If anyone else is in the same boat
$("#grid").kendoGrid({
height: 430,
sortable: true,
dataSource: {
type: "odata",
transport: {
read: {
beforeSend: function (req) {
req.setRequestHeader('Accept', 'application/json;odata=verbose');
},
url: "http://localhost:11232/versionbyroute/v1/Products",
dataType: "json"
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
filterable: true,
pageable: true,
columns: [{ field: 'Name', title: 'Name' }]
});
Answered by the author:
If anyone else is in the same boat
$("#grid").kendoGrid({
height: 430,
sortable: true,
dataSource: {
type: "odata",
transport: {
read: {
beforeSend: function (req) {
req.setRequestHeader('Accept', 'application/json;odata=verbose');
},
url: "http://localhost:11232/versionbyroute/v1/Products",
dataType: "json"
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
filterable: true,
pageable: true,
columns: [{ field: 'Name', title: 'Name' }]
});
I am using Kendo UI web in an ASP.NET MVC4 project.
I am trying to create a master/details grids and a detailsTemplate for each. I have some question regarding this situation:
What's the difference between hierarchy and details?
Is it possible to populate the details grid in a separate div on a master row click instead of that little triangle?
This code was my starting point : http://jsfiddle.net/WKSkC/2/
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 430,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns:
[
{field: "FirstName", title: "First Name", width: "110px" },
{ field: "LastName", title: "Last Name", width: "110px" },
{ field: "Country", width: "110px" },
{ field: "City", width: "110px" },
{ field: "Title" }
]});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: false,
selectable: true,
pageable: true,
columns:
[
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
}).data("kendoGrid");
}
Thank you for your help.
You can use the API of the Grid to expand it programatically.
//you can expand it programatically using the expandRow like this
element.on('click','tr',function(){
$(element).data().kendoGrid.expandRow($(this));
})
Here is updated version.
Or you can use make the Grid selectable and use the select event instead of hooking a click event like shown above.
I am using kendo,
and work on it with grid.
I found this demo from the kendo web page
of kendo grid batch editing.
In this demo I am tring to bind my data source.
It works perfectly but only destroys and does not work on them.
I am also trying this:
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
destory: {
url: "<?php echo site_url('search_result_queue/destory_urls_fields').'/'.$id; ?>",
dataType: "json",
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
regex_id: "ProductName",
value: "Race",
event_url:"url"
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 430,
toolbar: ["create","save", "cancel"],
columns: [
{ field: "key", title: "field", width: 110 },
{ field: "value", title: "Units In Stock", width: 110 },
{ field: "event_url", width: 110 },
{ command: "destroy", title: " ", width: "90px" }],
editable: true,
destory:"inline"
});
});
Can anyone please know me how can I do this?
You spelled the dataSource transport function "destory" instead of "destroy".
You need to check the spelling of destroy. In your code it is "destory" it should be "destroy".
I am able to get the selected row in kendo grid ( master grid), But I am unable to get the selected row data in detail grid. Please provide me a code sample.
Thanks,
abhi
It is like for the main grid. Being childgrid the grid corresponding to details, do:
var row = childgrid.select();
var data = childgrid.dataItem(row);
console.log("row", row);
console.log("data", data);
Where I defined master grid as:
$("#grid").kendoGrid({
...
detailInit: detailInit,
...
});
And details grid is created using the following function when a row in master grid is expanded:
function detailInit(e) {
childgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: false,
selectable: true,
pageable: true,
columns:
[
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
}).data("kendoGrid");
}
Running example here : http://jsfiddle.net/OnaBai/2M86L/ (When you click on Show button, its displays in the console of your browser the selected row and its data).
Here a somewhat simpler example on how to get to the data of the clicked row: http://jsfiddle.net/Corne/AQqMH/5/
This is the code where the magic happens:
change: function (arg) {
var selectedData = this.dataItem(this.select());
// selectedData now points to the selected dataSource item!
alert("Clicked id: " + selectedData.id);
}