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.
Your help is much appreciated..!
Thank you,
Sreeni
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);
}));
Thank you,
Sreeni