Inserting rows to grid does not set the dirty flag to true

5 posts, 0 answers
  1. Igor
    Igor avatar
    8 posts
    Member since:
    Aug 2012

    Posted 13 Sep 2012 Link to this post

    Hello, 

    I have an autocomplete field which on selection adds a new row to my grid. The row appears on the grid, but when I click a button which has the sync() method, the grid does not send any data. I explored the datasource, and it has all its new records set to dirty=false as if the grid has been synced before. 

    Here is how I add new row(s) to the grid:
    var ds = $("#selected_locations").data("kendoGrid").dataSource;
    var mod = ds.insert(0, {
       id: dataItem.id,
       Location: dataItem.Name,
       Reach: 10000
    });
    I have also tried using the method add, but I got the same results.

    Here is the grid declaration:
    $("#selected_locations").kendoGrid({
                        dataSource: {
                            schema: {
                                model: {
                                    id: "id",
                                    fields: {
                                        Location: {
                                            type: "string",
                                            editable: false
                                        },
                                        Reach: {
                                            type: "number",
                                            editable: false
                                        }
                                    }
                                }
                            },
                            type: "json",
                            transport: {
                                read: {
                                    url:"createCampaignData.php",
                                    dataType: "json",
                                    type: "GET",
                                    contentType: "application/json; charset=utf-8",
                                    data: {
                                        funct: "getGeoLocGrid",
                                        model: "geoLocation",
                                        form: <?php if(isset($id)) echo $id; else echo '0'; ?>
                                    }
                                },
                                destroy: {
                                    type: "POST",
                                    data: {
                                        operation: "delete"
                                    }
                                },
                                create: {
                                    type: "POST",
                                    data: {operation: "create"},
                                    cache: false
                                }
                            },
                            autoSync: false,
                            batch: true
                             
                        },
                        columns: [
                            {
                                field:"Location"
                            },
                            {
                                field: "Reach",
                                format: "{0:n0}"
                            },
                            {
                                title: "Action",
                                command: "destroy"
                            }],
                        editable: true,
                        scrollable: true,
                        sortable: false,
                        filterable: false,
                        pageable: false
                    });


    I also tried to set the flag dirty manually but this causes some other problems, the datasource is disconnected from the grid. 

    var newData = ds.data();
    newData[0].dirty = true;
    ds.data(newData);

    This returns an error:
    1. Uncaught TypeError: Cannot read property 'data' of undefined
      1. p.extend.setup
      2. p.extend.update
      3. o.extend._promise
      4. f.extend.Deferred
      5. o.extend._promise
      6. o.extend._send
      7. o.extend.sync
      8. (anonymous function)
      9. f.event.dispatch
      10. f.event.add.h.handle.i

  2. Jim
    Jim avatar
    9 posts
    Member since:
    Jan 2010

    Posted 14 Nov 2012 Link to this post

    Did you ever come to a resolution for this problem?

    I am running into a similar issue.  In my case, I have a separate set of form fields that are data-bound to a blank model. On Save,  I run the following code:
    dataSource.add(model.toJSON());
    The add works, as I can see the new data appear in my Grid that is data-bound to dataSource, but the create method of the dataSource is never fired.

    The dataSource is defined as follows:
    dataSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: oConst.URLs.FormFieldLoad
                , type: 'POST'
                , dataType: 'json'
            },
            create: {
                url: oConst.URLs.FormFieldSave + oConst.Actions.Create
                , type: 'POST'
                , dataType: "json"
            },
            update: {
                url: oConst.URLs.FormFieldSave + oConst.Actions.Update
                , type: 'POST'
                , dataType: "json"
            },
            destroy: {
                url: oConst.URLs.FormFieldSave + oConst.Actions.Destroy
                , type: 'POST'
                , dataType: "json"
            }
        }
        , change: function (e) {
            console.info(e);
        }
        , sort: { field: 'FfOrder', dir: 'asc' }
        , schema: { model: { id: "FfId"}}
    })

    All the other methods of the dataSource work as expected.  I can edit any record, and the respective method (update or destroy) is called and sent back to the server. The read is also working as I have a fully populated Grid on page load.

    I'm sure that I am just missing something simple.  Can anyone please tell me what I am doing wrong?

    I'm running:
    jquery-1.8.1.min.js 
    Kendo v2012.2.1029

    Thanks,
    James Carpenter
  3. Kendo UI is VS 2017 Ready
  4. Igor
    Igor avatar
    8 posts
    Member since:
    Aug 2012

    Posted 14 Nov 2012 Link to this post

    I've solved my problem by adding a new property (_isNew: true) which is checked upon sending the request, and also server side. Hope this helps your issue.
  5. Salim
    Salim avatar
    29 posts
    Member since:
    Jun 2016

    Posted 13 Oct Link to this post

    Hi,

    Any update regarding this issue?

  6. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 18 Oct Link to this post

    Hello Salim,

    I'm not sure I understood to which issue you are referring as this is a four years old thread. The behavior described by the original author is most probably caused due to inserting record which already has ID field populated. This will not mark the item as new as in order DataSource to consider given record as such, its ID field should have the default value - docs.

    Regards,
    Rosen
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready