This is a migrated thread and some comments may be shown as answers.

No sync with datasource

4 Answers 707 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Timur asked on 28 Jun 2012, 02:27 PM

Hi,

i am implementing an copy button for a grid. Thats my code. The click handler is implemented at the end. I can insert the new record to the grid but when i call

dataSource.sync();

no request is made to the server. Can i call the create function manually? I tested the code with

Kendo UI Web v2012.1.322
and
Kendo UI Complete v2012.1.515

$(document).ready(function() {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "/rentingtenants/?property_id=#{@property.id}",

dataType: "json"

},

update: {

url: "#{update_attribute_rentingtenants_url}",

dataType: "json",

type: "GET",

complete: function(e) {

$("#grid").data("kendoGrid").dataSource.read();

}

},

destroy: {

url: "#{remove_rentingtenants_url}",

dataType: "json",

type: "GET"

},

create: {

url: "#{rentingtenants_url(:property_id => @property.id )}",

type: "POST",

complete: function(e) {

$("#grid").data("kendoGrid").dataSource.read();

}

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

batch: true,

schema: {

model: {

id: "id",

fields: {

renter: { editable: true, type: "string", validation: { required: true } },

useright: { editable: false, type: "string" },

rentablespace: {

editable: true,

nullable: false,

type: "number",

validation: {

min: 1,

rules: {

required: true

},

messages: {

required: "Bitte geben Sie eine Mietfläche ein."

}

},

vacant: { editable: true, type: "boolean" },

monthlyrent: { editable: true, type: "number" },

rental_end: { editable: true, type: "date"

},

indexfree: { editable: true, type: "boolean" },

option: { editable: true, type: "boolean" },

comments: { editable: true, type: "string" }

}

},

aggregate: [ { field: "rentablespace", aggregate: "sum" }, { field: "monthlyrent", aggregate: "sum" }]

});

$('#grid').kendoGrid({

sortable: true,

dataSource: dataSource,

navigatable: true,

dataBound: onDataBound,

remove: function(e) {

handleRemoveChanges(e, this);

},

saveChanges: function (e) {

handleSaveChanges(e, this);

},

toolbar: [

{ name: "create", text: "Neue Mieteinheit" },

{ name: "save", text: "Änderungen speichern" },

{ name: "cancel", text: "Änderungen verwerfen" }

],

columns: [

{ field: "renter", title: "Mieter", width: 100, editor: renterDropDownEditor },

{ field: "useright", title: "Nutzungsrecht", width: 120},

{ field: "rentablespace", title:"Mietfläche", template: "#= kendo.toString(rentablespace, 'n2') # m²", footerTemplate: "#= kendo.toString(sum, 'n2') # m²", width: 110 },

{ field: "vacant", template: "#= vacant == true ? 'Ja' : 'Nein' #", title:"Leerstehend", width: 80 },

{ field: "monthlyrent", title:"Monatsmiete", format: "{0:c}", footerTemplate: "#= kendo.toString(sum, 'c2') #", width: 90 },

{ field: "rental_end", title:"Vertragsende", width: 90, template: "#= rental_end != 'null' && rental_end != '' ? kendo.toString(rental_end, 'dd.MM.yyyy') : '' #", width: 90 },

{ field: "indexfree", title:"Indexfrei", template: "#= indexfree == true ? 'Ja' : 'Nein' #", width: 60 },

{ field: "option", title:"Option", template: "#= option == true ? 'Ja' : 'Nein' #", width: 50 },

{ field: "comments", title:"Kommentar", width: 100 },

{ title: "", width: 100, command: [{ name: "copy", text: "Kopieren", className: "copy-button"}, { name: "destroy", text: "Löschen" }] },

],

editable: {

update: true,

confirmation: "Wollen Sie die Mieteinheit wirklich löschen?",

save: true,

mode: "incell"

}

});

$("#grid").delegate(".copy-button", "click", function(e) {

var row = $(this).closest("tr"),

grid = $(this).parents("[data-role=grid]").data("kendoGrid"); //gets child grid

var model = grid.dataItem(row);

dataSource.insert(0, model);

dataSource.sync();

e.preventDefault();

});

});

4 Answers, 1 is accepted

answered on 22 Aug 2012, 03:26 PM

I'm having the exact same problem.

Here is the code:

$(document).ready(function() {

$("#grid").kendoGrid({

dataSource: {

pageSize: 10,

type: "json",

serverPaging: true,

serverSorting: true,

transport: {

read: {

url:"data.php",

dataType: "json",

type: "GET",

contentType: "application/json; charset=utf-8"

},

update: {

url: "data.php",

type: "POST"

}

},

error: function(e) {

alert(e.responseText);

},

schema: {

data: "data",

total: "c",

model: {

id: "site_url_id",

fields: {

site_domain_id: { type: "number" },

site_url_address: { type: "string" }

}

},

columns: [{field:"site_domain_id"}, {field:"site_url_address"}],

toolbar: ["create", "save", "cancel"],

pageable: true,

selectable: true,

editable: true,

sortable: true

});

$("#btnEdit").click(function(e){

var grid = $("#grid").data("kendoGrid");

var ds = grid.dataSource;

var gridSelection = grid.select();

gridSelection.each(function(){

var model = grid.dataItem(this);

var data = ds.get(model.site_url_id);

data.site_url_address = "something";

ds.insert(0, data);

ds.sync();

grid.saveChanges();

});

It successfully updates the grid but when I refresh the datasource, nothing is sent to the server for update.

answered on 22 Aug 2012, 05:28 PM

If someone is interested here how this works:

$("#btnEdit").click(function(e){

var grid = $("#grid").data("kendoGrid");

var ds = grid.dataSource;

var gridSelection = grid.select();

gridSelection.each(function(){

var model = grid.dataItem(this);

var data = ds.get(model.site_url_id);

data.set("site_url_address", "value");

ds.sync();

ds.read();

});