Nested Grid Refresh after inline editing

[Shashi KumarParticipant]

Hi,

I have to edit and add data into the nested grid using inline editing. I am able to add and edit and the changes are updated in to the database but once after that the data in the nested grid does not refresh. Please let me know how can we refresh data in the nested grid after manipulation.

below is my code that i am using

var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
// debugger;
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m][“ProjectInitialAllocationPlanID”]);
if (result)
ordersbyid.push(orders[m]);
}

// array which keeps the indexes of the edited rows.

var allocationDetailsSource = {
datafields: [
{ name: ‘ProjectInitialAllocationPlanDetailID’ },
{ name: ‘ProjectInitialAllocationPlanID’ },
{ name: ‘WorkOrderNumber’ },
{ name: ‘HRMSWeekStartDate’, type: ‘date’ },
{ name: ‘HRMSWeekEndDate’, type: ‘date’ },
{ name: ‘TotalWeeklyHoursAllocated’, },
{ name: ‘WeekGUID’ },
{ name: ‘RowGuid’ }
],
id: ‘ProjectInitialAllocationPlanID’,
localdata: ordersbyid,

addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
rowdata.HRMSWeekStartDate = convert(rowdata.HRMSWeekStartDate);
rowdata.HRMSWeekEndDate = convert(rowdata.HRMSWeekEndDate);

debugger;
$.ajax({
cache: false,
dataType: ‘json’,
url: ‘/ServiceInitialAllocationPlan/AddInitialAllocationDetails’,
data: rowdata,
type: “POST”,

success: function (data, status, xhr) {
id = record.uid.toString();
grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
// debugger;
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m][“ProjectInitialAllocationPlanID”]);
if (result)
ordersbyid.push(orders[m]);
}
(grid).jqxGrid({ source: allocationDetailsSource });
(grid).jqxGrid({ source: allocationDetailsSource });
commit(true);

},
error: function (jqXHR, textStatus, errorThrown) {
alert(“Error”);

}
});
},
deleterow: function (row, commit) {
// synchronize with the server – send delete command
var adapter = new $.jqx.dataAdapter(source);
rowdata.EmployeeID = rowid;
$.ajax({
cache: false,
dataType: ‘json’,
url: ‘/ServiceInitialAllocationPlan/Delete/’ + row,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// update command is executed.
id = record.uid.toString();
grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
// debugger;

var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m][“ProjectInitialAllocationPlanID”]);
if (result)
ordersbyid.push(orders[m]);
}
(grid).jqxGrid({ source: allocationDetailsSource });
(grid).jqxGrid({ source: allocationDetailsSource });

commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {

}
});

},
updaterow: function (rowid, rowdata, commit) {
rowdata.HRMSWeekStartDate = convert(rowdata.HRMSWeekStartDate);
rowdata.HRMSWeekEndDate = convert(rowdata.HRMSWeekEndDate);
debugger;
$.ajax({
cache: false,
dataType: ‘json’,
url: ‘/ServiceInitialAllocationPlan/UpdateInitialAllocationDetails’,
async: true,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {

id = record.uid.toString();
grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
// debugger;
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m][“ProjectInitialAllocationPlanID”]);
if (result)
ordersbyid.push(orders[m]);
}
//$(“#jqxgrid”).jqxGrid({ source: source });
(grid).jqxGrid({ source: nestedGridAdapter });
(grid).jqxGrid({ source: allocationDetailsSource });
commit(true);

// (grid).jqxGrid(‘updatebounddata’);
// (grid).jqxGrid({ source: ordersSource });
////commit(true);
//// (grid).jqxGrid({ source: allocationDetailsSource });
//debugger;
//id = record.uid.toString();
//grid = $($(parentElement).children()[0]);
//nestedGrids[index] = grid;
//filtergroup = new $.jqx.filter();
//filter_or_operator = 1;
//filtervalue = id;
//filtercondition = ‘equal’;
//filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
//// fill the orders depending on the id.
//// debugger;
//ordersbyid = [];
//for (var m = 0; m < orders.length; m++) {
// var result = filter.evaluate(orders[m].ProjectInitialAllocationPlanID);
// if (result)
// ordersbyid.push(orders[m]);
//}
//commit(true);
//var ordersDataAdapter1 = new $.jqx.dataAdapter(ordersbyid, { autoBind: true });
//(grid).jqxGrid({ source: ordersDataAdapter1 });

//(grid).jqxGrid({ source: nestedGridAdapter });

// $(“#jqxgrid”).jqxGrid({ source: source });
},

error: function (jqXHR, textStatus, errorThrown) {

// (grid).jqxGrid({ source: nestedGridAdapter });

}
});
}
}
var nestedGridAdapter = new $.jqx.dataAdapter(allocationDetailsSource, { autoBind: true });

if (grid != null) {
grid.jqxGrid({
source: nestedGridAdapter, height: 210, width: 800,
pageable: true,
pagesize: 5,
// autoheight: true,
showstatusbar: true,
renderstatusbar: function (statusbar) {
// appends buttons to the status bar.
var container = $(“<div style=’overflow: hidden; position: relative; margin: 5px;’></div>”);
var addButton = $(“<div style=’float: right; margin-left: 5px;’><span style=’margin-left: 4px; height:10px;’>Add</span></div>”);
container.append(addButton);
statusbar.append(container);
addButton.jqxButton({ width: 60, height: 30 });

// add new row.
addButton.click(function (event) {
var datarow = generaterow();
var commit = (grid).jqxGrid(‘addrow’, null, datarow, ‘first’);
// var commit = (grid).jqxGrid(‘addrow’, null, datarow);
//var commit = (grid).jqxGrid(‘addrow’, null, {});
// var id = $(grid).jqxGrid(‘getdatainformation’).rowscount;
// $(grid).jqxGrid(‘addrow’, 2, []);
// $(“#jqxgrid”).jqxGrid(‘addrow’, null, [])
//alert(id);
// $(grid).jqxGrid(‘addrow’, null, []);
});
},

editable: true,
// selectionmode: ‘singlecell’,
// editmode: ‘selectedcell’,
selectionmode: ‘singlerow’,
editmode: ‘selectedrow’,
columns: [

{ text: ‘SOW / WorkOrder’, datafield: ‘WorkOrderNumber’, align: ‘center’, cellsalign: ‘right’ },
{
text: ‘Start Week’, datafield: ‘HRMSWeekStartDate’, columntype: ‘datetimeinput’, type: ‘date’, align: ‘center’, cellsalign: ‘center’, cellsformat: ‘d’,
initeditor: function (row, cellvalue, editor) {
// editor.jqxDateTimeInput({ firstDayOfWeek: 1, showWeekNumbers: true, todayString: ‘Today’, showFooter: true, formatString: ‘MM/dd/yyyy’ });
editor.jqxDateTimeInput({ firstDayOfWeek: 1, formatString: ‘MM/dd/yyyy’, showWeekNumbers: true, todayString: ‘Today’, showFooter: true });
editor.jqxDateTimeInput().on(‘valueChanged’, function (event) {
//var jsDate = event.args.date;
//var curr = new Date;
//var firstday = new Date(jsDate.setDate(curr.getDate() – jsDate.getDay()));
//var lastday = new Date(jsDate.setDate(curr.getDate() – jsDate.getDay() + 6));

//var curr = new Date; // get current date
//var first = curr.getDate() – curr.getDay(); // First day is the day of the month – the day of the week
//var last = first + 6;
//alert(jsDate + ” ” + curr);
//alert(jsDate);

// alert(lastday);

});
var firstDayOfWeek = editor.jqxDateTimeInput(‘firstDayOfWeek’);

}
},

{
text: ‘End Week’, datafield: ‘HRMSWeekEndDate’, columntype: ‘datetimeinput’, type: ‘date’, align: ‘center’, cellsalign: ‘center’, cellsformat: ‘d’,
initeditor: function (row, cellvalue, editor) {
// editor.jqxDateTimeInput({ firstDayOfWeek: 1, showWeekNumbers: true, todayString: ‘Today’, showFooter: true, formatString: ‘MM/dd/yyyy’ });
editor.jqxDateTimeInput({ firstDayOfWeek: 1, formatString: ‘MM/dd/yyyy’, showWeekNumbers: true, todayString: ‘Today’, showFooter: true });
editor.jqxDateTimeInput(‘setDate’)
var firstDayOfWeek = editor.jqxDateTimeInput(‘firstDayOfWeek’);

}
},
// { text: ‘Start Week’, datafield: ‘HRMSWeekStartDate’, width: 150, type: ‘date’, cellsformat: ‘d’, },
// { text: ‘End Week’, datafield: ‘HRMSWeekEndDate’, width: 150, type: ‘date’, cellsformat: ‘d’, },

//{
// text: ‘End Week’, datafield: ‘HRMSWeekEndDate’, columntype: ‘datetimeinput’, type: ‘date’, width: 150, align: ‘center’, cellsalign: ‘center’, cellsformat: ‘d’,
// initeditor: function (row, cellvalue, editor) {
// editor.jqxDateTimeInput({ firstDayOfWeek: 1, formatString: ‘MM/dd/yyyy’, showWeekNumbers: true, todayString: ‘Today’, showFooter: true });
// //editor.jqxDateTimeInput(‘setDate’, new Date(2014, 0, 1))
// editor.jqxDateTimeInput(‘setDate’)
// var firstDayOfWeek = editor.jqxDateTimeInput(‘firstDayOfWeek’);
// }
//},
{
text: ‘Hours/Week’, datafield: ‘TotalWeeklyHoursAllocated’, align: ‘center’, cellsalign: ‘center’,
validation: function (cell, value) {
if (value == “”) {
return { result: false, message: “Hours/Week is required” };

}

else if (value <= 45 && value > 0)
return true;

else {
return { result: false, message: “Hours/Week Should be between 0 to 45″ };
}
return true;
}
},
//{
// text: ‘Replicate’, width: 100, columntype: ‘number’, align: ‘center’, cellsalign: ‘center’, cellsrenderer: function () {
// return ‘<div style=”width: 100%”></div> ‘;
// }
//},

{
text: ‘Delete’, datafield: ‘Delete’, columntype: ‘number’, align: ‘center’, cellsalign: ‘center’, editable: false, cellsrenderer: function () {
return ‘<div style=”width: 100%”></div> ‘;
}
},
{ text: ‘ProjectInitialAllocationPlanDetailID’, datafield: ‘ProjectInitialAllocationPlanDetailID’, hidden: true },
{ text: ‘ProjectInitialAllocationPlanID’, datafield: ‘ProjectInitialAllocationPlanID’, hidden: true },
{ text: ‘RowGuid’, datafield: ‘RowGuid’, hidden: true },
{ text: ‘WeekGUID’, datafield: ‘WeekGUID’, hidden: true },
]
});

(grid).bind(‘cellclick’, function (event) {

var rowindex = event.args.rowindex;
var columnindex = event.args.columnindex;
editrow = rowindex;
var dataRecord = (grid).jqxGrid(‘getrowdata’, editrow);

if (columnindex == 14) {
editrow = rowindex;
// open the popup window when the user clicks a button.
var dataRecord = (grid).jqxGrid(‘getrowdata’, editrow);
editrow = rowindex;
var offset = (grid).offset();
};

if (columnindex == 4) {
// open the popup window when the user clicks a button.
editrow = rowindex;
var offset = (grid).offset();
$(“#deletePopupDetails”).jqxWindow({ position: { x: 400, y: 200 } });
// get the clicked row’s data and initialize the input fields.
var dataRecord = (grid).jqxGrid(‘getrowdata’, editrow);
$(“#deletePopupDetails”).jqxWindow(‘open’);
};
});

// delete row.
$(“#delDetails”).click(function () {
if (editrow >= 0) {
var dataRecord = (grid).jqxGrid(‘getrowdata’, editrow);
var row = {
ProjectInitialAllocationPlanDetailID: dataRecord.ProjectInitialAllocationPlanDetailID,
ProjectInitialAllocationPlanID: dataRecord.ProjectInitialAllocationPlanID,
WorkOrderNumber: dataRecord.WorkOrderNumber,
HRMSWeekStartDate: new Date(),
HRMSWeekEndDate: new Date(),
TotalWeeklyHoursAllocated: dataRecord.TotalWeeklyHoursAllocated,
WeekGUID: dataRecord.WeekGUID,
RowGuid: dataRecord.RowGuid,
IsDeleted: true
};
var rowID = (grid).jqxGrid(‘getrowid’, editrow);
(grid).jqxGrid(‘updaterow’, rowID, row);
$(“#deletePopupDetails”).jqxWindow(‘hide’);
}
});

var generaterow = function (i) {
var row = {};

row[“ProjectInitialAllocationPlanDetailID”] = null;
row[“ProjectInitialAllocationPlanID”] = record.ProjectInitialAllocationPlanID;
row[“WorkOrderNumber”] = null;
row[“HRMSWeekStartDate”] = new Date();
row[“HRMSWeekEndDate”] = new Date();
row[“TotalWeeklyHoursAllocated”] = 45;
row[“WeekGUID”] = null;
row[“RowGuid”] = null;
return row;
}

// events
var rowvalues = “”;

function convert(str) {
var date = new Date(str),
mnth = (“0” + (date.getMonth() + 1)).slice(-2),
day = (“0” + date.getDate()).slice(-2);
return [date.getFullYear(), mnth, day].join(“-“);
}
}
}

[Peter StoevKeymaster]

Hi Shashi Kumar,

You can save the nested grid’s ID within the initrowdetails callback where you initialize the nested Grid. For saving, use a new variable defined outside the function. Then, by selecting the ID using jQuery and calling the jqxGrid’s constructor function, you can set the nested Grid’s source property to new dataAdapter instance to update its data. Ex: $(myID).jqxGrid({source: myNestedGridAdapter});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Shashi KumarParticipant]

Hi,

Can you please provide me the sample code, I did not clearly understood what you have mentioned. Please provide me the sample code where based on the code i have provided.

[Peter StoevKeymaster]

Hi Shashi Kumar,

You have to create a variable or Array outside initrowdetails, ex: var myNestedGrids = new Array(); Inside the initrowdetails, save your nested Grid ids within that variable. Ex:myNestedGrids.push(id). When you want to update a nested grid source, do that $(“#” + myNestedGrids[0]).jqxGrid({source: newAdapter});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Shashi KumarParticipant]

Hi, i have done the same way as you have mentioned , but the nested grid updated only for the first time and if i try to edit for the second time i will not happen and the updaterow even is not firing , it will fire for the first time only. please let me know how to fix this , please provide me a sample working code for the same.

[Peter StoevKeymaster]

Hi Shashi Kumar,

If you want to update nested Grid data, you have to select it by its ID and set the source property to new dataAdapter instance. If that dataAdapter has “updaterow” it will be called when a row in the nested grid is updated.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Shashi KumarParticipant]

I am setting the source property to new dataAdapter and it gets updated, but the problem is that it will not update for the second time and only happens only once. Please provide me sample working code. The updaterow gets fired only for the first time. from second time it will not get fired. Please help me with any sample code.

[Author]

Posts