Refresh the master detail grid

[SJParticipant]

Hi,
How can we refesh the data from master detail grid? for regular grid , we can use “updatebounddata”, but this method is not working. Even I tried “refreshData”, still not working.

below is the code:

Thanks in advance.

var url = “getAll?pageType=team”;
var source =
{
dataType : “json”,
url : url,
id: ‘userID’,
datafields: [
{ name: ‘userID’ },
{ name: ‘roles’ },
{ name: ‘status’ },
{ name: ‘notes’ }
]

};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#teamGrid”).jqxGrid(
{
width: 850,
height: 250,
source: dataAdapter,

columns: [
{ text: ‘User Id’, datafield: ‘userID’, width: 250 },
{ text: ‘Roles’, datafield: ‘roles’, width: 150 },
{ text: ‘Status’, datafield: ‘status’, width: 180 },
{ text: ‘Notes’, datafield: ‘notes’, width: 120 }
]
});
var selectedUserID=null;

// ***************teamPerm Grid or child grid
// prepare the data
var teamPerUrl=”getAll?pageType=teamPerm”;
var dataFields = [
{ name: ‘userID’ , map : ‘teamPermissionPK>userID’ ,type: ‘string’},
{ name: ‘access’ , map : ‘teamPermissionPK>access’,type: ‘string’},
{ name: ‘permission’, datafield: ‘permission’,type: ‘string’}
];
var source =
{
datafields: dataFields ,
dataType : “json”,
url : teamPerUrl

};

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();

var detailsInitialized = false;
$(“#teamGrid”).on(‘rowselect’, function (event) {
var userID = event.args.row.userID;
var records = new Array();
var length = dataAdapter.records.length;

selectedUserID=userID;

for (var i = 0; i < length; i++) {
var record = dataAdapter.records[i];
if (record.userID == userID) {
records[records.length] = record;
}
}

var dataFields = [
{ name: ‘userID’ , datafield : ‘userID’ ,type: ‘string’},
{ name: ‘access’ , datafield : ‘access’,type: ‘string’},
{ name: ‘permission’, datafield: ‘permission’,type: ‘string’}
];

var dataSource = {
datafields: dataFields,
localdata: records,
updateRow : function(rowID, rowData, commit) {
var data = $.param(rowData);
$.ajax({
dataType : ‘json’,
url : ‘updateTeamPerm.do’,
data : data,
success : function(data, status, xhr) {
//$(“#teamPermGrid”).jqxGrid(‘refreshdata’);
commit(true);
},
error : function(jqXHR, textStatus, errorThrown) {
}
});

},
deleteRow : function(access,commit) {
var data = “UserId=” + selectedUserID +”&access=”+access;
$.ajax({
dataType : ‘json’,
url : ‘removeTeamPerm.do’,
data : data,
success : function(data, status, xhr) {
commit(true);
$(“#teamPermGrid”).jqxGrid(‘updatebounddata’);
}
});

}
}
var adapter = new $.jqx.dataAdapter(dataSource);
// update data source.
$(“#teamPermGrid”).jqxGrid({ source: adapter });

});

[DimitarParticipant]

Hello

Before calling updatebounddata you would also have to reload the data adapter with the updated data through its dataBind method, i.e.:

adapter.dataBind();
$("#teamPermGrid").jqxGrid('updatebounddata');

Best Regards,
Dimitar

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

[SJParticipant]

Thank you for quick reply but still not working. Even I have added the following lines :

dataAdapter.dataBind();
$(“#teamPermGrid”).jqxGrid(‘updatebounddata’);

Do I need to call the following lines in update/Delete/Insert scenario

for (var i = 0; i < length; i++) {
var record = dataAdapter.records[i];
if (record.userID == userID) {
records[records.length] = record;
}
}
and set the datasource ( var adapter = new $.jqx.dataAdapter(dataSource);).

Not sure.
Please help.

Thank You

[DimitarParticipant]

Hi SJ,

I think there has been a misunderstanding. Do you wish to update the data of the master or the details grid? These are bound to different data adapter instances (dataAdapter and adapter) and the approach would be different.

Best Regards,
Dimitar

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

[SJParticipant]

Hi Dimitar,

I have been trying to refresh the details grid after update/delete/add.

Thank You,
SJ

[DimitarParticipant]

Hi SJ,

Then you would have to call adapter.dataBind() instead of dataAdapter.dataBind() and $("#teamPermGrid").jqxGrid('updatebounddata') after that.

Best Regards,
Dimitar

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

[SJParticipant]

Hi Dimitar,

I have added the adapter.dataBind(); and $(“#teamPermGrid”).jqxGrid(‘updatebounddata’); both in updaterow and deleterow methods.. still not refreshing the child data grid after delete/update.

Thank you for helping me here.

// ***************teamPerm Grid
// prepare the data
var teamPerUrl=”getAll?pageType=teamPerm”;
var dataFields = [
{ name: ‘userID’ , map : ‘teamPermissionPK>userID’ ,type: ‘string’},
{ name: ‘access’ , map : ‘teamPermissionPK>access’,type: ‘string’},
{ name: ‘permission’, datafield: ‘permission’,type: ‘string’}
];
var source =
{
datafields: dataFields ,
dataType : “json”,
url : teamPerUrl

};

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();

var detailsInitialized = false;
$(“#teamGrid”).on(‘rowselect’, function (event) {
var userID = event.args.row.userID;
var records = new Array();
var length = dataAdapter.records.length;

selectedUserID=userID;

for (var i = 0; i < length; i++) {
var record = dataAdapter.records[i];
if (record.userID == userID) {
records[records.length] = record;
}
}

var dataFields = [
{ name: ‘userID’ , datafield : ‘userID’ ,type: ‘string’},
{ name: ‘access’ , datafield : ‘access’,type: ‘string’},
{ name: ‘permission’, datafield: ‘permission’,type: ‘string’}
];

var dataSource = {
datafields: dataFields,
localdata: records,
updaterow : function(rowID, rowData, commit) {
var data = $.param(rowData);
$.ajax({
dataType : ‘json’,
url : ‘updateTeamPerm.do’,
data : data,
success : function(data, status, xhr) {
adapter.dataBind();
$(“#teamPermGrid”).jqxGrid(‘updatebounddata’);
commit(true);
},
error : function(jqXHR, textStatus, errorThrown) {
}
});

},
deleterow : function(access,commit) {
var data = “UserId=” + selectedUserID +”&access=”+access;
$.ajax({
dataType : ‘json’,
url : ‘removeTeamPerm.do’,
data : data,
success : function(data, status, xhr) {
adapter.dataBind();
$(“#teamPermGrid”).jqxGrid(‘updatebounddata’);
commit(true);
}
});

}
}
var adapter = new $.jqx.dataAdapter(dataSource);
// update data source.
$(“#teamPermGrid”).jqxGrid({ source: adapter });
});

[DimitarParticipant]

Hi SJ,

Could you, please, share your project with us at support@jqwidgets.com so that we may test it and find out what is wrong? Also provide us with a step-by-step guide to reproducing the issue.

Best Regards,
Dimitar

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

[Author]

Posts