KendoGrid Excel export all pages with lazy loading - kendo-ui

My export excel toolbar works great when i don't use allPages = true.
with all pages option it doesn't raise any error and do nothing, I figured out this is may caused by lazy loading rows for each page.
I've searched a lot and found nothing for this problem.
<script>
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
serverPaging: true,
serverSorting: true,
serverFiltering: true,
requestEnd: function (e) {
showServerMessageInGrid(e);
if (e.response.IsSuccess == false)
this.read();
},
transport: {
read: {
url: "#Url.Action("AjaxOrderList", "Order")",
dataType: "json",
type: "POST"
},
parameterMap: function (options, operation) {
if (operation == "read") {
return { options: kendo.stringify(options) };
}
if (operation !== "read") {
return {
models: kendo.stringify(options.models),
options: kendo.stringify(options)
};
}
}
},
batch: true,
pageSize: 20,
schema: {
data: 'ViewModel',
total: 'TotalCount',
model: {
id: "Id",
fields: {
Id: { width: 90, editable: false },
CityName: { width: 120, editable: false }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
toolbar:[{ name: "excel" }],
excel: {
fileName: "OrderList.xlsx",
filterable: true,
allPages: true
},
scrollable:true,
pageable: true,
selectable: true,
resizable: true,
filterable: true,
sortable: true,
columns: [
{ field: "Id", width: "90px", editable: false, filterable: filterableNumeric() },
{ field: "CityName", width: "120px", editable: false }
],
editable: "inline",
}
});
});
</script>
Any idea how can i export all pages with lazy loading?

I found my problem.
It was MaxJsonLength because the result of my action was new JavaScriptSerializer().Serialize(_orderList).
I solved it by Int32.MaxValue()
var json = new JavaScriptSerializer();
json.MaxJsonLength = Int32.MaxValue;
var jsonResult = json.Serialize(_orderList);
return jsonResult;

Related

kendo grid server side filtering and not working

I'm using a Kendo Grid, with Server Side Filtering, Sorting and Pagination.
This my code for initializing the Grid:
In this code Server side pagination and virtual scroll is working but filtering and shorting is not working.
In any request, I am getting this
type of request parameters.
[HttpPost]
public JsonResult getGridData([DataSourceRequest] DataSourceRequest request)
{
var userList = data;
return Json(userList.ToDataSourceResult(request));
}
$("#grid").kendoGrid({
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: {
url: "#Url.Action("getGridData", "ListMaster")",
type: "POST",
dataType: "json",
async: true,
contentType: 'application/json',
data: function (e) {
return e;
}
}
,parameterMap: function (data, type) {
return kendo.stringify(data);
}
},
schema: {
data: function (result) {
return result.Data;
},
total: function (result) {
return result.Total;
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: false
},
height: 550,
groupable: true,
sortable: true,
pageable: true,
resizable: true,
scrollable: { virtual: true },
filterable: { mode: 'row' },
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
dataBound: function () {
var data = this.dataSource.view();
},
columns: [{ field: "Id", title: "Id", filterable: filter(true), hidden: true },
{ field: "Name", title: "Name", filterable: filter(true) }]
});
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Url.Action("getGridData", "ListMaster")",
type: "POST",
dataType: "json",
async: true,
cache: false,
contentType: 'application/json',
data: function (e) {
return e;
}
},
parameterMap: function (data, type) {
return kendo.stringify(data);
}
},
schema: {
data: function (result) {
return result.Data;
},
total: function (result) {
return result.Total;
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: false
},
height: 550,
groupable: true,
sortable: true,
pageable: true,
resizable: true,
scrollable: { virtual: true },
filterable: {
mode: 'row',
operators: {
string: {
contains: "contains"
}
} },
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
dataBound: function () {
var data = this.dataSource.view();
},
columns: [{ field: "Id", title: "Id", filterable: filter(true), hidden: true },
{ field: "Name", title: "Name", filterable: filter(true) }]
});

Kendo ui odata request callback not supported

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".
}
}
});

Kendo UI Grid - not working in IE for POST/DELETE requests

I am having problem getting the Kendo Grid to work correctly. I am using ASP.NET WebAPI to fetch data from SQL Server and display it in the grid. Use the Kendo Grid to do Updates and Deletes.
POST: While debugging I noticed that a NULL object in IE but Chrome gets a valid data.
which I am passing to update the DB.
IE versions 10 and 11. There are no JS errors but the object is NULL on the WEB API.
WEBAPI - GET Works (IE and Chrome),
POST/DELETE does not work in IE (Works in Chrome)
#model dynamic
#{
ViewBag.Title = "FunctionalGroup";
}
<div class=".col-xs-12 .col-sm-6 .col-lg-8">
<div class="well well-sm">
<h2>Functional Groups - Management</h2>
<p>Create, Update and Delete Functional Groups</p>
</div>
<div class="row">
<div class="well well-sm">
<div style="overflow-x: auto" id="FunctionalGroupGrid"></div>
<div id="window"></div>
</div>
</div>
<div>
<button data-role="button" data-icon="cancel"></button>
</div>
</div>
#section Scripts{
<script type="text/x-kendo-template" id="windowTemplate">
<p>Delete <strong>#= FunctionalGroupName #</strong> ? </p>
<p>#= FunctionalGroupDescription # </p>
<button class="k-button" id="yesButton">Yes</button>
<button class="k-button" id="noButton"> No</button>
</script>
<script>
var windowTemplate = kendo.template($("#windowTemplate").html());
var window = $("#window").kendoWindow({
title: "Are you sure you want to delete this record?",
visible: false, //the window will not appear before its .open method is called
modal: true,
resizable: false,
width: "400px",
height: "200px",
}).data("kendoWindow");
var LookupFunctionalGroupType = new kendo.data.DataSource({
transport: {
read: "/api/FunctionalGroupType",
datatype : "json"
}
});
function getfunctionalGroupType(functionalGroupTypeID) {
for (var idx = 0, length = LookupFunctionalGroupType.length; idx < length; idx++) {
if (LookupFunctionalGroupType[idx].FunctionalGroupTypeID === functionalGroupTypeID) {
return LookupFunctionalGroupType[idx].FunctionalGroupTypeName;
}
}
}
function functionalGroupTypeDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "FunctionalGroupTypeName",
dataValueField: "FunctionalGroupTypeID",
dataSource: LookupFunctionalGroupType
}).appendTo(container);
}
$(function () {
var baseUrl = "/api/FunctionalGroup";
var datatype = "json";
var contentType = "application/json";
var datasourceFG = new kendo.data.DataSource({
serverPaging: true,
pageSize: 10,
autoSync: false,
batch: true,
transport: {
read: {
url: baseUrl,
dataType: datatype,
contentType: contentType
},
create: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "POST"
},
update: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "PUT"
},
destroy: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "DELETE"
}
, parameterMap: function (data, operation) {
if (operation !== "read" && data.models) {
return kendo.stringify(data.models);
}
else {
return {
take: data.take,
skip: data.skip,
pageSize: data.pageSize,
page:data.page
}
}
},
},
schema: {
data: "Data.$values",
total: "RecordCount",
model: {
id: "FunctionalGroupID",
fields: {
FunctionalGroupID: { editable: false, type: "number" },
FunctionalGroupName: { editable: true, nullable: false, validation: { required: true } },
FunctionalGroupDescription: { editable: true, nullable: false, validation: { required: true } },
FunctionalGroupTypeID: { field: "FunctionalGroupTypeID", type: "number", defaultValue: 101 },
IsActive: { editable: true, nullable: false, type: "boolean" },
CreatedBy: { editable: false, nullable: false, validation: { required: true } },
CreatedDateTime: { editable: false, type: "date", format: "{0:MM/dd/yyyy HH:mm:ss}" },
ModifiedBy: { editable: false},
ModifiedDateTime: { editable: false, type: "date", format: "{0:MM/dd/yyyy HH:mm:ss}" }
}
},
}
});
$("#FunctionalGroupGrid").kendoGrid({
dataSource: datasourceFG,
navigatable: true,
autoBind: false,
pageable: true,
resizable: true,
reorderable: true,
editable: kendo.support.mobileOS ? "popup":true,
groupable: true,
filterable: true,
sortable:true,
columnMenu: true,
selectable: "row",
mobile: true,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "FunctionalGroupID", width: 50, title: "ID", hidden: true },
{ field: "FunctionalGroupName", width: 150, title: "Functional Group" },
{ field: "FunctionalGroupDescription", width: 200, title: "Description" },
{
field: "FunctionalGroupTypeID", width: 180, title: "Functional Group Type"
, template: '#=getfunctionalGroupType(FunctionalGroupTypeID)#'
, editor: functionalGroupTypeDropDownEditor, filterable:false
},
{
field: "IsActive", width: 80, title: "Is Active",
template: '<input type="checkbox" #= IsActive ? checked="checked" : "" # disabled="disabled" ></input>'
},
{ field: "CreatedBy", width: 100, title: "Created By", hidden: true },
{ field: "CreatedDateTime", width: 100, title: "Created DateTime", format: "{0:MM/dd/yyyy}", hidden: true },
{ field: "ModifiedBy", width: 100, title: "ModifiedBy", hidden: true },
{ field: "ModifiedDateTime", width: 100, title: "Modified DateTime", format: "{0:MM/dd/yyyy}", hidden: true },
{
title: "Actions",
command: [
{
name: "destroy",
text: "Delete",
click: function (e) { //add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = this.dataItem(tr); //get the row data so it can be referred later
window.content(windowTemplate(data)); //send the row data object to the template and render it
window.open().center();
$("#yesButton").click(function () {
grid.dataSource.remove(data) //prepare a "destroy" request
//grid.dataSource.sync() //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
window.close();
})
$("#noButton").click(function () {
window.close();
})
}
}
]
}
]
});
LookupFunctionalGroupType.fetch(function () {
LookupFunctionalGroupType = this.data(); //First fetch the Lookup data
datasourceFG.read(); // This will bind to the grid.
});
});
</script>
Which versoin of IE are you running? Are you seeing JS error in IE?
I see in your secript
},
}
You might want to remove "," if there are no elements following it in the list

Kendo UI DataSource not triggering transport.destroy

I am using Kendo UI with ASP.NET Web API. There is a ProjectsController that has all the necessary methods.
My issue is that when I click on Delete button, Kendo UI grid will raise remove() event, but DataSource never invokes transport.destroy. Rather, it seems that tansport.create is being invoked. In transport.parameterMap I can see that the operation is create instead of destroy.
Here is a sample JavaScript code:
$(document).ready(function () {
var apiUrl = '/api/projects/';
var dataType = 'json';
var dataSource = new kendo.data.DataSource({
batch: true,
autoSync: false,
transport: {
read: {
url: apiUrl,
dataType: dataType,
type: "GET"
},
update: {
url: apiUrl,
dataType: dataType,
type: "PUT"
},
destroy: {
url: apiUrl,
type: "DELETE"
},
create: {
url: apiUrl,
contentType: "application/json;charset=utf-8",
dataType: dataType,
type: "POST"
},
parameterMap: function (data, operation) {
console.log("Operation: " + operation);
if (operation === "create" && data.models) {
for (var i in data.models) {
var model = data.models[i];
if (model.ProjectId === 0) {
return kendo.stringify(model);
}
}
} else if (operation === "destroy") {
console.log("Data.Models: " + data.models);
console.log("Data.id: " + data.ProjectId);
return { id: data.ProjectId };
}
return data;
}
},
schema: {
id: "ProjectId",
model: {
fields: {
ProjectId: { type: "number", editable: false, nullable: false, defaultValue: 0 },
ProjectName: { type: "string", validation: { required: true } },
Status: { type: "string", validation: { required: true } },
IsActive: { type: "boolean" }
}
}
},
pageSize: 10,
serverPaging: false,
serverFiltering: false,
serverSorting: false
});
$("#projectsGrid").kendoGrid({
dataSource: dataSource,
groupable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
pageSize: 10,
toolbar: ["create"],
editable: "popup",
columns: [
{ field: "ProjectId", width: 30, title: "ID" },
{ field: "ProjectName", width: 180, title: "Project" },
{ field: "Status", width: 90, title: "Status" },
{ field: "IsActive", width: 40, title: "Is Active", type: "boolean", template: '<input type="checkbox" #if (IsActive) {# checked="checked" #}# disabled="disabled" />' },
{ command: ["edit", "destroy"], title: "&nbsp", width: "80px" }
],
remove: function (e) {
console.log("Delete button clicked.");
console.log("Project ID: " + e.model.ProjectId);
//dataSource.remove(e.model);
//dataSource.sync();
}
});
});
Web API works fine when requests are issued via Fiddler, but Kendo UI Grid shows:
POST http://localhost:port/api/Projects
when it should be DELETE.
Thanks everyone in advance!
On your datasource, you have the batch flag set to true, this means the datasource will make the call only after you tell it to, e.g calling sync().
http://docs.kendoui.com/api/framework/datasource#configuration-batch
As well as
Make sure you have defined Id in the model, as OnaBai explained here Why does the KendoUI Grid Transport Create event gets raised multiple times, and even when the action is Update? , your id is outside the model, should be in :
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
}
}
if someone has defined the id in model as answered in above ,but dataSource not triggering transport.destroy yet ,below configuration could be helpful:
editable: {
..
mode: "inline", //or "popup
...
}
//or
editable: "inline" //or "popup"
http://www.telerik.com/forums/transport-destroy-of-grid-editor-is-not-working

Shifting of cell's value to right side

I'm working on kendoui. If we observe a grid then all the values are on the left side of each cell.I have a field of price and i want its value on the right side of cell.
Is it possible in kendo ui?
My code :-
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = ${grailsApplication.config.grails.serverURL}"+/course/,
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl+"listAll", dataType: "json",
cache: false
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models:
kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 15,
sort: { field: "dateCreated", dir: "desc" },
schema: {
model: {
id: "id",
fields: {
name: { editable: false, type: "string", validation: { required:
true, min: 1} },
type: { editable: false, type: "Type",validation: { required: true, min: 1}
},
fee: { editable: false, type: "double",validation: { required: true, min: 1}
},
duration: { editable: false, type: "integer", validation: { required: true, min: 1} },
status: { editable: false, type:"Status" , validation: { required: true, min: 1} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
groupable:true,
sortable:true,
selectable:true,
height: 300,
columns: [
{field: "name",
title:'<g:message code="grid.billingServicesGroup.holidayName.label"
default="Course Name" />'},
{field: "type.name",
title:'<g:message code="grid.billingServicesGroup.reason.label"
default="Type of course" />'},
{field: "fee",title:'<g:message
code="grid.billingServicesGroup.code.label"
default="Fee" />'},
{field: "duration",title:'
<g:message code="grid.billingServicesGroup.holidayDate.label"
default="Duration(Year)" />'}
,
{field: "status.name",title:'<g:message
code="grid.billingServicesGroup.status.label" default="Status" />'},
],
editable: true,
change:function(e){
idOfData=this.select().data("id");
window.location.href=crudServiceBaseUrl+"show/"+idOfData;
},
saveChanges:function(){
},
remove:function(e){
/*alert(e.model.id.value);
selectedId=this.select().data("id");
$.ajax({
url:"http://localhost:8080/billing-
app/api/skeletonBill/"+selectedId,
type:"DELETE"
}).done(function(){alert('deleted')});*/
},
scrollable: {
virtual: true
}
});
});
</script>
You can use a column template to wrap the contents of all the cells in that column in for example a div-tag.
You can then use a class on the div to style the contents using CSS.
For example:
columns:
[{
field:"Department",
title:"Department",
width:80,
template: "<div class='foobar'>#= Department#</div>"
}]
/* CSS */
.foobar {
width: 100%;
text-align: right;
}

Resources