Prevent Kendo Grid from auto saving - kendo-grid

How can I stop the kendo grid/datasource automatically posting changes to the server?
I've tried intercepting Grid's saveChanges but it isn't being triggered by the Updated command. As per the docs, DataSource's auto-sync by default should be false, but I went ahead and set it anyway but to no effect.
$("#items-grid").kendoGrid({
dataSource: {
autoSync: false,
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("
ItemList ", "
PurchaseRequisition ", new {prId = #Model.Id }))",
type: "POST",
dataType: "json",
},
update: {
url: "#Html.Raw(Url.Action("
ItemEdit ", "
PurchaseRequisition "))",
type: "POST",
dataType: "json",
}
},
sync: function(e) {
console.log("sync complete");
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
/...
}
}
},
},
saveChanges: function(e) {
// not fired from Update command
e.preventDefault();
},
columns: [{
// ...
}, {
command: [{
name: "edit",
text: {
edit: "Edit",
update: "Update",
cancel: "Cancel"
}
}],
width: 100
}]
});
});

You can try with dataSource batch set to true.
var dataSource = new kendo.data.DataSource({
transport: {...},
batch: true
...}
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [...],
editable: true
});
NOTE: this is inline editing.
You can see an example on the official page: Batch editing

Related

Pagination using kendo grid does not work on page load

In my js. i am loading data using kendoGridOptions. I have mapped the data source which fetches all the records. I have configured pageable = true. However noticed that when page load the pagination option are not available they become available only on when i sort one of the columns. following is the configuration of my grid and data source
var enhancedGridOptions = mydataKendoGridManager.kendoGridOptions({
dataSource: myGridDataSource,
sortable: true,
scrollable: true,
editable:false,
resizable: true,
reorderable: true,
pageable: true,
columnResize: function (e) {
adjustLastColumn(e, this);
},
columns:
[
{
field: "dealType",
title: $.i18n.prop('buyType.label'),
width: "108px"
},
{
field: "myStatus",
title: $.i18n.prop('myStatus.label'),
width: "105px"
},
{
field: "action",
title: $.i18n.prop('action.label'),
width: "105px"
},
],
pdf:
{
fileName: "my_List_" + (new Date()).toString(myformat + "_HH:mm") + ".pdf",
allPages: true,
},
excel:
{
fileName: "my_List_" + (new Date()).toString(myformat + "_HH:mm") + ".xlsx",
allPages: true,
}
}
and my data source is configured as below
transport: {
read: function (e) {
myapi.rootGet("data/mylist?dealId=" + id, function (response) {
var data;
// console.log(response.data)
if (_.isString(response.data)) {
response.data = JSON.parse(response.data);
data = response.data;
setTimeout(function () {
e.success(data);
}, 10000);
}
else {
e.error("XHR response", response.status, JSON.parse(response.data));
}
});
},
},
schema:
{
model: {
id: "id",
fields: {
dealType: {
type: "string"
},
myStatus: {
type: "string"
},
action: {
type: "string"
},
}
},
parse:function(data)
{
return parseData(data);
}
},
serverSorting: false,
serverFiltering: false,
serverPaging: false
};
appreciate if someone can guide what is missing on pagination that does not work on page load.
Thanks,
Anjana
If you are getting "NaN - NaN of 500 items" like error at left bottom corner in grid, then you should add pageSize in dataSource Property.
var enhancedGridOptions = mydataKendoGridManager.kendoGridOptions({
dataSource: {
data: myGridDataSource,
pageSize: 50
},
....
....
....
pageable: {
pageSizes: [20, 30, 50, 100],
buttonCount: 5
}
});

Server side sorting is not working in kendo ui grid

I am trying to apply sorting on all data when i click on Name but sorting operation is applied on first page data.
Here is my code.
$("#products-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ProductList", "Product"))",
type: "POST",
dataType: "json",
data: additionalData
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
pageSize: #(defaultGridPageSize),
serverPaging: true,
// serverFiltering: true,
sort: { field: "Name", dir: "desc" },
},
pageable: true,
sortable: true,
editable: {
confirmation: "#T("Admin.Common.DeleteConfirmation")",
mode: "inline",
},
scrollable: false,
columns: [
{
field: "Name",
title: "#T("Admin.Catalog.Products.Fields.Name")",
sortable: {
initialDirection: "desc"
},
width: 300,
} ]
});
I have also tried with serverSorting: true but at that time default sorting not working.

Kendo Grid UI transport.destroy is not firing the service in datasource

I am new to Kendo UI, While I am using the Kendo Grid UI which is consuming the service, the read operation is working fine and the Grid is populated with the data from services but the delete operation is not working
I have tested the delete service using the fiddler getting a perfect response,but I confused why the delete button in kendo grid is not firing the endpoint
I struggled for past one week but no improvement
This is my code,
var carsDataSource1 = new kendo.data.DataSource(
{
batch: true,
transport: {
read: {
url: "/DesktopModules/MyServicesTest/API/DropData/Drop",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
},
destroy: {
url: function(options)
{
return 'DesktopModules/MyServicesTest/API/DeleteCategory/
Delete' + options.models[0].id;
},
dataType: "json",
type: "DELETE"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
var CategoryID = options.models[0].id;
console.log(CategoryID);
return CategoryID;
}
}
},
shema:
{
model: {
id: "CategoryID",
field: {
CategoryID:
{
editable: false,
nullable: true,
type: "number"
},
CategoryName:
{
editable: false,
nullable: false,
type: "string"
},
}
}
}
});
$("#grid1").kendoGrid({
dataSource: carsDataSource1,
height: "500px",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "CategoryID",
title: "number "
},
{
field: "CategoryName",
title: "Name"
},
{ command:"destroy"}
],
toolbar: ["create"],
editable: "inline",
destroy:true,
});
});

Kendo UI Grid with object ID translation

I'm trying to make a grid with KendoUI with external data via JSON (php+mysql engine) from TABLE A and one of columns of these data, get text labels from another TABLE B.
Example, data are: idPermission=1, user_id=1, business_unit_id=1, permission=10
The user_id=1 I want get from another table (Users) their names, 1=John Doe, 2=Martin Brown.
I want to see "John Doe" instead id 1 in the visualization of grid, and "Martin Brown" instead id 2. When inline (or popup) editing of the records I've already reached the target, and I've a select box with the names and not the ids!
Here is my code:
<script>
$(function() {
var crudServiceBaseUrl = "http://localhost/ajax/";
var dataTable = "UsersPermissions";
// This is the datasource of the grid
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "table_action.php?op=R&tbl="+dataTable,
dataType: "json"
},
update: {
url: crudServiceBaseUrl + "table_action.php?op=U&tbl="+dataTable,
type: "POST"
},
destroy: {
url: crudServiceBaseUrl + "table_action.php?op=D&tbl="+dataTable,
type: "POST"
},
create: {
url: crudServiceBaseUrl + "table_action.php?op=C&tbl="+dataTable,
type: "POST"
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "idPermission",
fields: {
idPermission: { editable: false, nullable: true },
user_id: { validation: { required: true } },
business_unit_id: {},
permission: { validation: { required: true } },
}
}
}
});
// This is the datasource of the user_id column
usersSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "table_action.php?op=R&tbl=Users",
dataType: "json"
}
},
batch: true,
schema: {
model: {
id: "idUser",
fields: {
idUser: {},
email: {},
password: {},
name: {},
last_login: {},
status: {}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
sortable: {
mode: "single",
allowUnsort: false
},
reorderable: true,
resizable: true,
scrollable: false,
toolbar: ["create"],
columns: [
{
field: "user_id",
editor: function (container, options) { // This is where you can set other control types for the field.
$('<input name="' + options.field + '"/>').appendTo(container).kendoComboBox({
dataSource: usersSource,
dataValueField: "idUser",
dataTextField: "name",
});
},
title: "ID Utente"
},
{ field: "business_unit_id", title: "Business Unit"},
{ field: "permission", title: "Permission"},
{ command: ["edit", "destroy"], width: "230px"}],
editable: "inline"
});
});
</script>
How I can make the same thing I've done in editing mode, in view mode?
For achieving that you have to first edit the query of the read operation seeing your sample data it must be like this
SELECT a.idPermission, b.name, a.business_unit_id, a.permission
FROM TABLE_A AS a
JOIN TABLE_B(users) AS B ON a.user_id=b.user_id;
json encode the data and send to client
and in your kendo grid change column user_id to name
I know you were asking about the HTML/JavaScript way, but using MVC, this is a good, alternative way to do it:
http://decisivedata.net/kendo-ui-grid-and-entity-framework-code-first-foreign-key-fields/

Why is my Read Method being called when I click update on the inline editing of a grid row

Another frustrating day with the Kendo Grid. Anyway, my problem is this: When I click "Edit" on a grid row item, it goes into edit mode. Good. Then I modify a record, and click update. I would expect the "/Company/SaveAccountAdmin" method to be called.But no... The read method is called again. When I click "Cancel" the record just disappears! The $("#save") click event is just an attempt to force a save, but surely these events can be triggered off the grid command buttons? Any ideas anyone?
/// <reference path="../kendo.all-vsdoc.js" />
$(document).ready(function () {
var CompanyId = $("#CompanyId").val();
var dataSource = new kendo.data.DataSource(
{
batch: true,
pageSize: 10,
transport: {
create: {
url: "/Company/SaveAccountAdmin",
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
url: "/Company/ReadAccountAdmin",
},
read: {
url: "/Company/ReadAccountAdmin"
},
update: {
url: "/Company/SaveAccountAdmin",
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
url: "/Company/ReadAccountAdmin",
},
//destroy: {},
parameterMap: function (options, operation) {
if (operation !== "read" && options.model) {
return { model: kendo.stringify(options.model) };
}
}
},
schema: {
model: {
id: "ComanyContactId",
fields: {
CompanyId: { type: "number", editable: false, nullable: false, defaultVaue: CompanyId },
CompanyContactId: { type: "number", editable: false, defaultValue: 0 },
FirstName: { type: "string", nullable: false, validation: { required: true } },
LastName: { type: "string", nullable: false, validation: { required: true } },
Email: { type: "string", nullable: false, validation: { required: true } },
Phone: { type: "string", nullable: false, validation: { required: true } },
IsActive: { type: "boolean" }
}
}
}
});
$("#save").click(function (event) {
event.preventDefault();
var rows = $.map(dataSource.data(), function (value, index) {
return {
CompanyId: value["CompanyId"],
CompanyContactId: value["CompanyContactId"],
FirstName: value["FirstName"],
LastName: value["LastName"],
Email: value["Email"],
Phone: value["Phone"],
IsActive: value["IsActive"]
}
});
var jsonCompanyContacts = JSON.stringify(rows);
$.ajax({
url: '/Company/SaveAccountAdmin',
type: 'POST',
traditional: true,
data: { "jsonCompanyContacts": jsonCompanyContacts },
success: alert("Data Saved")
})
});
$("#AccountAdmins").kendoGrid({
dataSource: dataSource,
toolbar: ["create"],
editable: "inline",
sortable: true,
pageable: true,
navigatable: true,
editable: "inline",
columns: [
{ field: "CompanyId", title: "CompanyID", sortable: true },
{ field: "CompanyContactId", title: "Company ContactID", sortable: true },
{ field: "FirstName", title: "First Name", sortable: true },
{ field: "LastName", title: "Last Name" },
{ field: "Email", title: "Email", },
{ field: "Phone", title: "Phone", },
{ field: "IsActive", title: "Is Active" },
{ command: ["edit", "destroy"], title: " ", width: "210px" }]
});
});
My guess is that it is because you have the Read URL set for the Update command:
update: {
url: "/Company/SaveAccountAdmin", // <-- Not used because it is changed below
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
url: "/Company/ReadAccountAdmin", // <-- Read URL set
},