I read this topic and use open source edition of kendo web, my current version is Kendo UI Web v2012.3.1114. My problem is exist as the link above and I could not solve it.
Part of my script is here:
function load() {
var grid = $("#grid").data("kendoGrid");
if (grid) {
//destroy the previous Grid instance
grid.destroy();
//clean up the html
grid.wrapper.html("");
}
var crudServiceBaseUrl = "WebForm.aspx",
//datasource = null;
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "?q=load&sql=" + $("#tbSQL").val(),
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "?q=update&sql=" + $("#tbSQL").val(),
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "?q=destroy&sql=" + $("#tbSQL").val(),
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "?q=create&sql=" + $("#tbSQL").val(),
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: getmodel()
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
//pageable: true,
selectable: true,
//groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
height: 500,
toolbar: ["create", "save", "cancel"],
columns: getColumns(),
editable: true
});
}
Every thing is ok, but only after loading page I can only One time group by headers.
It seems that this behavior is improved in the latest version of KendoUI 2012 Q3 SP1 (v.2012.3.1315), where the grouping is working as expected. For convenience I created this sample.
Related
How can I call custom service for deleting a row in Kendo UI grid.This custon service should have a confirmation dialog option that can be customized.
Any thoughts on this is highly appreciative
You should customize the kendo.data.DataSource 'destroy' attribute to specify the URL and update the kendoGrid 'delete' command code for the custom confirmation.
Example code
$(document).ready(function () {
var windowTemplate = kendo.template($("#windowTemplate").html());
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
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
width: "400px",
height: "200px",
}).data("kendoWindow");
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}"},
{ field: "UnitsInStock", title:"Units In Stock"},
{ field: "Discontinued"},
{ command: [
{name: "edit"},
{name: "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();
})
}
}
]}],
editable: {
mode: "inline"
}
}).data("kendoGrid");
});
Taken from:
http://docs.telerik.com/kendo-ui/web/grid/how-to/Editing/custom-delete-confirmation-dialog
You can set the delete option in your datasource to a function and do anything you want from that point. Without a sample of your service, I can't help you getting started but I can link you to the documentation.
I want to populate a Kendo dropdownlist with data from a database.
That's what I call the "frwMantenimientoEmpresas.aspx / SelectProvincias" method.
My problem is that the value "undefined" after making the call, in the dropdownlist appears ...
dataSource1 = new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
beforeSend: function (req) {
//alert("");
},
async: false,
url: "frwMantenimientoEmpresas.aspx/SelectProvincias",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8"
}
},
schema: {
model: {
fields: {
UIDProvincia: { type: "int" },
Nombre: { type: "string" }
}
}
}
});
$("#dropProv").kendoDropDownList({
dataSource:dataSource1,
dataTextField: "Nombre",
dataValueField: "UIDProvincia",
autoBind: true,
});
The read method calls the server SelectProvincias method correctly..
At this point dropDownList = undefined??
I have Kendo UI inline Grid. It read and populate the grid properly. but when i press edit and changes in any column and press update then update event is not firing. and it also not calling controller method.
my view
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
transport:
{
read:
{
url: "/Student/StudentGrid",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "GET"
},
update:
{
url: "#Url.Action("EditStudentDetails")",
contentType: "application/json;charset=utf-8",
dataType: "json",
type: "POST"
},
parameterMap: function (options, operation) {
if (operation != "read" && options) {
if (operation != "destroy") {
return JSON.stringify({
studentViewModel: options
});
}
else if (operation == "destroy") {
return JSON.stringify({
id: options.Id
});
}
}
}
},
parse: function (test) {
if (test.success) {
if (test.type != "read") {
alert(test.message);
$("#grid").data("kendoGrid").dataSource.read();
}
return test.data;
}
else {
alert(test.message);
return [];
}
}
})
$("#grid").kendoGrid({
dataSource: dataSource,
filterable: true,
toolbar: ["create"],
sortable: true,
pageable: true,
columns: [
{
field: "Id",
width: 120,
visible: false
},
{
field: "Name",
title: "Student Name",
editor: AutocompleteName,
width: 180
},
{
field: "CourseName",
title: "Course Name",
editor: CourseDropDownEditor,
width: 200,
template: "#=CourseName#"
},
{
command: ["edit", "destroy"], title: " ", width: "250px"
}
],
editable: "inline"
});
What i did wrong in this and when i click on edit button it is changing to editable mode but when i click on update it is not working
Is any of your cell text has HTML tags like "<" or ">", remove them and click on update and check the update event fire.
I am working on kendo ui listvie with paging. In this everytime I move to next page it will call datasource. In my scenario if I select 4th page it is calling datasource 4times times.
below is the code
function InitiateContactList() {
var RouteDataSource = null;
RouteDataSource = new kendo.data.DataSource({
serverPaging: true,
type: "aspnetmvc-ajax",
create: {
contentType: "application/json"
},
transport: {
read: {
url: '#Url.Content("~/Partner/GetPartnerContacts")',
data: { lPartnerId: $("#hdnPartnerId").val() },
dataType: "json",
type: "get",
}
},
serverFiltering: true,
pageSize: 2,
schema: {
data: "Data",
total: "Total"
}
});
$("#copyRoutelistdata").kendoListView({
autoBind: false,
dataSource: RouteDataSource,
template: kendo.template($("#Contactstemplate").html()),
//selectable: "single",
//pageable: true,
change: function (e) {
var index = this.select().index();
dataItem = this.dataSource.view()[index];
if (dataItem != null && dataItem.RouteId != null) {
//CopyRoute(dataItem.RouteId);
//HideWindow('MdCopyRouteSearch');
}
},
dataBound: function (e) {
$("#RoutelistPager").kendoPager({
autoBind:false,
dataSource: RouteDataSource
});
}
});
RouteDataSource.read();
}
Thanks in advance.
I cannot get Kendo Grid to populate from server side data.
I have a grid builder function as as follows:
var build = function (carrier, date) {
var urlBase = 'my base url';
var datasource = new kendo.data.DataSource({
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
schema: {
model: {
id: 'Id',
fields: {
StatementDate: { type: "string", editable: false },
CobDate: { type: "string", editable: false },
//lots more fields
Status: { type: "string", editable: false },
Matched: { type: "boolean", editable: true }
}
}
},
transport: {
read: function (options) {
var address = urlBase + '/' + carrier + '/' + date;
$.ajax({
url: address,
type: "POST",
data: JSON.stringify(options.data),
contentType: "application/json",
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
},
//update function omitted
parameterMap: function (data, operation) {
if (operation == "read") {
return JSON.stringify(data)
}
},
change: function (e) {
var data = this.data();
console.log(data.length); // displays "77"
}
}
});
return datasource;
};
return {
build: build
}
Grid Definition
elem.kendoGrid({
columns: [
{ field: "StatementDate", title: "State Date", width: 125 },
{ field: "CobDate", title: "COB Date", width: 100 },
//lots more fields
{ command: ["edit"], title: " ", width: "85px"}],
resizable: true,
sortable: true,
editable: "inline",
columnMenu: true,
filterable: true,
reorderable: true,
pageable: true,
selectable: "multiple",
change: this.onSelectedRecordChanged,
toolbar: kendo.template($('#' + templateName).html()),
scrollable: {
virtual: true
},
height: 800
});
I trigger the update via a button click. When I look at the response I see the data. Looks good but the grid will not show the data. It has previously worked fine when data was completely client side.
If I break point on the AJAX call back. I see the correct results.
The grid is bound with data bind. The datasource is a property on a viewmodel.
<div id="grid" data-bind="source: dataSource"></div>
At the start of the app. I create view model
var viewModel= kendo.observable(new GridViewModel(...
and bind
kendo.bind($('#grid'), viewModel);
If I look at the datasource attached to the grid, I see data for the page as expected
This has previously worked fine when data was client side.
I have tried using read() on datasource, and refresh() method on grid. Neither seems to work.
Example response content from server
{"Data":[{"Id": //lots more fields, 20 records],"Total":90375,"AggregateResults":null,"Errors":null}
Any help very much appreciated.
I found the cause in datasource schema missing
{ data: 'Data', total: 'Total' }