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

No sync with datasource

4 Answers 364 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Timur
Top achievements
Rank 1
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

Sort by
0
Devon
Top achievements
Rank 1
answered on 14 Aug 2012, 11:56 AM
I'm having the same problem.

When I call dataSource.sync(), nothing happens. There's no interaction with the server at all.

Does anyone have any idea why this is happening?
0
Igor
Top achievements
Rank 1
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.
0
Igor
Top achievements
Rank 1
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();
        });
    });
0
Abhishek
Top achievements
Rank 1
answered on 23 Aug 2012, 11:31 AM

1- Try to disable the cache in Kendo grid's datasource read property.

'cache: false'

read: {
    dataType: "json",
    url: <<"url">>,
    cache: false
}

and then,

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

It worked for me :)
Tags
Grid
Asked by
Timur
Top achievements
Rank 1
Answers by
Devon
Top achievements
Rank 1
Igor
Top achievements
Rank 1
Abhishek
Top achievements
Rank 1
Share this question
or