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

Kendo Grid- Retain Insert/Update/Delete operations values in Page refresh with JSON Post Back

1 Answer 401 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sreeni
Top achievements
Rank 1
Sreeni asked on 18 Nov 2013, 03:09 PM
Hi,

I have Kendo UI Grid with Server side paging and Grid Editing.

I have few issues, Of course they are different scenarios, Finally what i want to achieve is I want to do different operations like Insert/Update/destory on grid with paging and on click of save Button they should be saved into database. Below are the issues

1. I have page size 2, For ex: I have 3 records, As my page size is 2 , It is obvious that it will be displayed in 2 grid pages. In first page i will update a record, then i will go to 2nd page and add a record. And if i come back to 1st page again, i don't see my changes what i did because it is rendering from database and binding it again.

Is there anyway that we can retain these update values , instead of that grid is being overrides by database values?
 For example I have 6 records with page size 2. So in 1st page i can see 2 records .

2. Suppose if i delete 2 records, the 2nd page records are not moving to 1st page, suppose if i insert 1 record i am able to see 3 records but pagination is for 2 records, i should see only 2 records always. Any help will be appreciated.

3. I have one more issue, I am tracking the changed values and i have only Read action, I don't have Create/Update/Delete actions, I am saving the changes on button click which is out side the Grid. To track the changes I have written the pager change event and I am taking these values in Save button click. Again I would like to have retain these changes on page click, for that I am writing the code Grd Databinding event.

Here I am able to retain the Updated values but I am getting the issues in retaining the inserted and deleted records. If I keep alert in databinding event and after that if i do insert operation, the alert is coming as infinite times. for example the scenario is I will insert the new record and that will get insert fine but if I go to 2nd page and will come back to 1st page i should retain the inserted value, i.e not working, once I click on 2nd page it's keep on processing. 

var created = [];
    var updated = [];
    var destroyed = [];
 
     $(document).ready(function () {
       var grid = $("#skillGrid").data("kendoGrid");
 
        grid.pager.bind('change', function() {
 
            var dataSource = $("#skillGrid").data("kendoGrid").dataSource;
 
        var that = dataSource,
                idx,
                length,
                data = that._flatData(that._data);
        destroyed = that._destroyed;
 
        for (idx = 0, length = data.length; idx < length; idx++) {
 
            if (data[idx].isNew()) {
                for (var i = 0; i < created.length; i++) {
                    if (created[i].SkillName == data[idx].SkillName) {
                        created.splice(i, 1);
                    }
                }
                created.push(data[idx]);
                data[idx].set('Status', 'New');
            } else if (data[idx].dirty) {
                for (var j = 0; j < updated.length; j++) {
                    if (updated[j].SkillName == data[idx].SkillName) {
                        updated.splice(j, 1);
                    }
                }
                updated.push(data[idx]);
                data[idx].set('Status', 'Dirty');
            }
        }
        });
    });
 
function skillGridDataBinding(e) {
 
        var dataSource = $("#skillGrid").data("kendoGrid").dataSource;
        var data = dataSource.data();
 
        for (var i = 0; i < created.length; i++) {
                    dataSource.add({ SkillName: created[i].SkillName, SkillNameNew: created[i].SkillNameNew, Proficiency: created[i].Proficiency, YearsOfExp: created[i].YearsOfExp, LastUsedYear: created[i].LastUsedYear, Status: "New" });
 
            }
        for (var idx = 0; idx < data.length; idx++) {
 
            for (var j = 0; j < updated.length; j++) {
                if (updated[j].SkillName == data[idx].SkillName) {
                    data[idx].set('SkillName', updated[j].SkillName);
                    data[idx].set('SkillNameNew', updated[j].SkillNameNew);
                    data[idx].set('Proficiency', updated[j].Proficiency);
                    data[idx].set('YearsOfExp', updated[j].YearsOfExp);
                    data[idx].set('LastUsedYear', updated[j].LastUsedYear);
                    data[idx].set('Status', 'Dirty');
                }
            }
            for (var k = 0; k < destroyed.length; k++) {
                if (destroyed[k].SkillName == data[idx].SkillName) {
                    dataSource.remove(data[idx]);
                }
 
            }
        }
    }
 
 
$($(".page-button-save").click(function () {
 
        var allRows = created.concat(updated).concat(destroyed);
        var allRowsJson = JSON.stringify(allRows);
        $("#@Html.IdFor(m => m.Skills)").val(allRowsJson);
 
 
    }));
Your help is much appreciated..!

Thank you,
Sreeni

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 20 Nov 2013, 12:38 PM
Hello Sreeni,

To the issues:

  1. Since you are using server paging the local changes wont be saved. You need to make all operations such as filtering, grouping, sorting, paging to be performed client side (without doing any request to the server) then the Grid will start to behave as you would expect.
  2. Again this is because the operations are configured to use the server. If you change them to be on the client it will work as you would expect, here is a demo.
  3. I am not sure I understand the exact question, the case seems to be the same as the one covered in the first question.

We do not provide any API method that brings you the pending changes that we can suggest you to use.

Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Sreeni
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or