Row detail grid — How to get handle to grid changed data in row detail grid

[Ramya BabuParticipant]

Hi ,

I am new to jqxgrid and also new to thin client programming. We have a use case to update the row detail data and also get the values in row detail data. How ever, with examples given in the demo, we cannot get the changed data in row detail through cell change event.

please find the below code where i have done some work arounds. Can you please suggest if there are better solutions through handle this in jqxgrid?

 

 

<

scripttype=“text/javascript”

>

 

var num = 0;

$(document).ready(

function() {

var changedRows = {“employees” : []};

var clientCollection;// prepare the data

var data = {“employees” : [ {“firstname” : “Ramya”,“lastname” : “Babu”,“productname” : “test”,“rowid” : “1”,“uirowid” : 0,“rowstatus” : “Saved”

}, {

“firstname” : “Andrew”,“lastname” : “Fuller”,“productname” : “test”,“uirowid” : 0,“rowid” : “2”,“rowstatus” : “Saved”

}, {

“firstname” : “Nancy”,“lastname” : “Davolio”,“productname” : “test”,“uirowid” : 0,“rowid” : “3”,“rowstatus” : “Saved”

 

}, {

“firstname” : “Shelley”,“lastname” : “Burke”,“productname” : “test”,“uirowid” : 0,“rowid” : “4”,“rowstatus” : “Saved”

}, {

“firstname” : “Regina”,“lastname” : “Murphy”,“productname” : “test”,“uirowid” : 0,“rowid” : “5”,“rowstatus” : “Saved”

}, {

“firstname” : “Yoshi”,“lastname” : “Nagase”,“productname” : “test”,“uirowid” : 0,“rowid” : “6”,“rowstatus” : “Saved”

}, {

“firstname” : “Antoni”,“lastname” : “Saavedra”,“productname” : “test”,“uirowid” :0,“rowid” : “7”,“rowstatus” : “Saved”

}, {

“firstname” : “Mayumi”,“lastname” : “Ohno”,“productname” : “test”,“uirowid” : 0,“rowid” : “8”,“rowstatus” : “Saved”

} ]

};

clientCollection = data;

// prepare the datavar source = {

datatype :

“json”,

datafields : [ {

name :

‘firstname’

}, {

name :

‘lastname’

}, {

name :

‘productname’

}, {

name :

‘rowid’

}, {

name :

‘rowstatus’

} ],

localdata : data

};

var initrowdetails = function(index, parentElement,

gridElement, datarecord) {

var inlinediv = null;var information = null;

inlinediv = $($(parentElement).children()[0]);

information = inlinediv.find(

‘.information’); var container = $(‘<div style=”margin: 5px;”></div>’)

container.appendTo($(information));

var leftcolumn = $(‘<div style=”float: left; width: 45%;”></div>’);

container.append(leftcolumn);

var firstname = $(‘<div style=”margin: 10px;”><b>First Name: </b><select id=”firstNameList” data-options=”onSelect” style=”width: 90px; height: 20px;”> <option>Nancy</option><option>Drew</option></select>’);

+

“</div>”;var lastname = “<div style=’margin: 10px;’><b>Last Name:</b> <style=’width: 200px; height: 22px;’><input type=’text’ style=’width: 195px; height: 15px’ /></div>”;var date = “<div style=’margin: 10px;’><b>Birth Day</b> <input class=’easyui-datebox’></input></div>”;

$(leftcolumn).append(firstname);

$(leftcolumn).append(lastname);

$(leftcolumn).append(date);

$(

“#firstNameList” ).change(function() {

alert(index);

alert(

this.value ); var rowdetails = $(“#jqxgrid”).jqxGrid(‘getrowdata’,index);var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, index);

$(

“#jqxgrid”).jqxGrid(‘ensurerowvisible’,index);var rowuniqueId = rowdetails[“rowid”]var uirowuniqueId = rowdetails[“uirowid”]

rowdetails[

“rowstatus”] = “updated”;

$.each(data.employees,

function(key1, item)

{

if (item[“rowstatus”] == “New”)

{

rowdetails[

“rowstatus”] = “New”;

item[column] = value;

$.each(changedRows.employees,

function(key2,item2)

{

if (item2[“uirowid”] == uirowuniqueId)

{

item2[column] = value;

}

});

}

elseif (item[“rowid”] == rowuniqueId)

{

rowdetails[

“rowstatus”] = “updated”;

item[

“rowstatus”] = “updated”;

 

var hasRowId = HasRowData(changedRows.employees,rowuniqueId);if (hasRowId)

{

$.each(changedRows.employees,

function(key2,item2)

{

if (item2[“rowid”] == rowuniqueId)

{

 

}

});

}

else

{

changedRows.employees.push(item);

}

}

});

$(

“#jqxgrid”).jqxGrid(‘updaterow’, id,rowdetails);

 

});

}

 

 

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

 

$(

“#jqxgrid”).jqxGrid({

width : 800,

source : dataAdapter,

pageable :

true,

autoheight :

true,

sortable :

true,

altrows :

true,

enabletooltips :

true,

editable :

true,

rowdetails :

true,

rowdetailstemplate : {

rowdetails :

“<div style=’margin: 10px;’><div class=’information’></div></div>”,

rowdetailsheight : 200

},

ready :

function() {

$(

“#jqxgrid”).jqxGrid(‘showrowdetails’, 0);

},

initrowdetails : initrowdetails,

 

columns : [ {

text :

‘First Name’,

datafield :

‘firstname’,

width : 250

}, {

text :

‘Last Name’,

datafield :

‘lastname’,

cellsalign :

‘right’,

align :

‘right’,

width : 120

}, {

text :

‘Product’,

datafield :

‘productname’,

align :

‘right’,

cellsalign :

‘right’,

cellsformat :

‘c2’,

width : 100

}, {

text :

‘Row Id’,

datafield :

‘rowid’,

align :

‘right’,

cellsalign :

‘right’,

cellsformat :

‘c2’,

width : 100

}, {

text :

‘Row Status’,

datafield :

‘rowstatus’,

align :

‘right’,

cellsalign :

‘right’,

cellsformat :

‘c2’,

width : 100

} ]

});

 

function HasRowData(changedRows, rowuniqueId) {var hasdata = false;

$.each(changedRows,

function(key1, item) {if (item[“rowid”] == rowuniqueId) {

hasdata =

true;

 

}

});

return hasdata;

}

$(

“#jqxgrid”)

.on(

‘cellvaluechanged’,function(event) {

alert(

‘cellvaluechanged’);var column = args.datafield;var rowindex = args.rowindex;var value = args.newvalue;var oldvalue = args.oldvalue;var rowdetails = $(“#jqxgrid”)

.jqxGrid(

‘getrowdata’,

rowindex);

var rowscount = $(“#jqxgrid”)

.jqxGrid(

‘getdatainformation’).rowscount;

 

var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, rowindex);

 

$(

“#jqxgrid”).jqxGrid(‘ensurerowvisible’,

rowindex);

var rowuniqueId = rowdetails[“rowid”]var uirowuniqueId = rowdetails[“uirowid”]

 

$

.each(

data.employees,

function(key1, item) {if (item[“rowstatus”] == “New”) {

item[column] = value;

$

.each(

changedRows.employees,

function(

key2,

item2) {

if (item2[“uirowid”] == uirowuniqueId) {

item2[column] = value;

}

});

}

elseif (item[“rowid”] == rowuniqueId) {

rowdetails[

“rowstatus”] = “updated”;

item[

“rowstatus”] = “updated”;

item[column] = value;

 

var hasRowId = HasRowData(

changedRows.employees,

rowuniqueId)

if (hasRowId) {

$

.each(

changedRows.employees,

function(

key2,

item2) {

if (item2[“rowid”] == rowuniqueId) {

item2[column] = value;

}

});

}

else {

changedRows.employees

.push(item);

}

var commit = $(“#jqxgrid”)

.jqxGrid(

‘updaterow’, id,

rowdetails);

 

}

});

});

 

$(

“#deleterowbutton”)

.on(

‘click’,function() {

 

var selectedrowindex = $(“#jqxgrid”)

.jqxGrid(

‘getselectedrowindex’);var rowdetails = $(“#jqxgrid”)

.jqxGrid(

‘getrowdata’,

selectedrowindex);

rowdetails[

“rowstatus”] = “Deleted”;var rowuniqueId = rowdetails[“rowid”]

$

.each(

data.employees,

function(key1, item) {if (item[“rowid”] == rowuniqueId) {

item[

“rowstatus”] = “deleted”;

changedRows.employees.push(item);

}

});

 

var rowscount = $(“#jqxgrid”)

.jqxGrid(

‘getdatainformation’).rowscount;if (selectedrowindex >= 0

&& selectedrowindex

< rowscount) {var id = $(“#jqxgrid”).jqxGrid(‘getrowid’,

selectedrowindex);

 

var commit = $(“#jqxgrid”)

.jqxGrid(

‘deleterow’,

id);

}

});

function createNewRow() {

num = num + 1;

data.employees.push({

rowstatus :

“New”,

uirowid : num

});

var row = {};

row[

“rowstatus”] = “New”;

row[

“uirowid”] = num;return row;

 

}

$(

“#addrowbutton”).on(‘click’, function() {var datarow = createNewRow();

$(

“#jqxgrid”).jqxGrid(‘addrow’, null, datarow);

changedRows.employees.push(datarow);

});

$(

“#changedRowbutton”)

.on(

‘click’,function() {// Display changed Rows

 

var sourceChangedRows = {

datatype :

“json”,

datafields : [ {

name :

‘firstname’

}, {

name :

‘lastname’

}, {

name :

‘productname’

}, {

name :

‘rowid’

}, {

name :

‘rowstatus’

} ],

localdata : changedRows

};

var dataAdapterChangedRows = new $.jqx.dataAdapter(

sourceChangedRows);

 

$(

“#jqxWidgetChangedRows”)

.jqxGrid(

{

width : 800,

source : dataAdapterChangedRows,

pageable :

true,

autoheight :

true,

sortable :

true,

altrows :

true,

rowdetails :

true,

rowdetailstemplate : {

rowdetails :

“<div style=’margin: 10px;’><div class=’information’></div></div>”,

rowdetailsheight : 200

},

ready :

function() {

$(

“#jqxgrid”).jqxGrid(‘showrowdetails’, 0);

},

initrowdetails : initrowdetails,

 

enabletooltips :

true,

editable :

false,

columns : [

{

text :

‘First Name’,

datafield :

‘firstname’,

width : 250

},

{

text :

‘Last Name’,

datafield :

‘lastname’,

cellsalign :

‘right’,

align :

‘right’,

width : 120

},

{

text :

‘Product’,

datafield :

‘productname’,

align :

‘right’,

cellsalign :

‘right’,

cellsformat :

‘c2’,

width : 100

},

{

text :

‘Row Id’,

datafield :

‘rowid’,

align :

‘right’,

cellsalign :

‘right’,

cellsformat :

‘c2’,

width : 100

},

{

text :

‘Row Status’,

datafield :

‘rowstatus’,

align :

‘right’,

cellsalign :

‘right’,

cellsformat :

‘c2’,

width : 100

} ]

});

 

});

 

});

</

script

>

</

 

 

head

>

<

 

 

bodyclass=‘default’

>

 

<p>Master rows are displayed below</p><divstyle=”margin-top: 10px;”><inputid=“deleterowbutton”type=“button”value=“Delete Selected Row”/></div><divstyle=”margin-top: 10px;”><inputid=“addrowbutton”type=“button”value=“Add Row”/></div>

 

　

<divid=‘jqxWidget’style=”font-size: 13px; font-family: Verdana;”><divid=“jqxgrid”></div></div><divstyle=”margin-top: 10px;”><inputid=“changedRowbutton”type=“button”value=“Changed Row”/></div><p>Changed rows are displayed below</p>

 

<divid=‘jqxWidgetChangedRows’style=”font-size: 13px; font-family: Verdana;”><divid=“jqxgrid”></div></div>

 

　

</

body

>

</

 

 

html

>

 

[Peter StoevKeymaster]

Hi Ramya Babu,

Could you repost your question and use the Code Formatting tool in the Toolbar for Formatting your code as we cannot read it in the way it is posted now.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Ramya BabuParticipant]

var num = 0;
$(document)
.ready(
function() {
var changedRows = {“employees” : []};
var clientCollection;
// prepare the data
var data = {
“employees” : [ {
“firstname” : “Ramya”,
“lastname” : “Babu”,
“productname” : “test”,
“rowid” : “1”,
“uirowid” : 0,
“rowstatus” : “Saved”
}, {
“firstname” : “Andrew”,
“lastname” : “Fuller”,
“productname” : “test”,
“uirowid” : 0,
“rowid” : “2”,
“rowstatus” : “Saved”
}, {
“firstname” : “Nancy”,
“lastname” : “Davolio”,
“productname” : “test”,
“uirowid” : 0,
“rowid” : “3”,
“rowstatus” : “Saved”

}, {
“firstname” : “Shelley”,
“lastname” : “Burke”,
“productname” : “test”,
“uirowid” : 0,
“rowid” : “4”,
“rowstatus” : “Saved”
}, {
“firstname” : “Regina”,
“lastname” : “Murphy”,
“productname” : “test”,
“uirowid” : 0,
“rowid” : “5”,
“rowstatus” : “Saved”
}, {
“firstname” : “Yoshi”,
“lastname” : “Nagase”,
“productname” : “test”,
“uirowid” : 0,
“rowid” : “6”,
“rowstatus” : “Saved”
}, {
“firstname” : “Antoni”,
“lastname” : “Saavedra”,
“productname” : “test”,
“uirowid” :0,
“rowid” : “7”,
“rowstatus” : “Saved”
}, {
“firstname” : “Mayumi”,
“lastname” : “Ohno”,
“productname” : “test”,
“uirowid” : 0,
“rowid” : “8”,
“rowstatus” : “Saved”
} ]
};
clientCollection = data;
// prepare the data
var source = {
datatype : “json”,
datafields : [ {
name : ‘firstname’
}, {
name : ‘lastname’
}, {
name : ‘productname’
}, {
name : ‘rowid’
}, {
name : ‘rowstatus’
} ],
localdata : data
};
var initrowdetails = function(index, parentElement,
gridElement, datarecord) {
var inlinediv = null;
var information = null;
inlinediv = $($(parentElement).children()[0]);
information = inlinediv.find(‘.information’);
var container = $(‘

‘)
container.appendTo($(information));
var leftcolumn = $(‘

‘);
container.append(leftcolumn);
var firstname = $(‘

First Name: NancyDrew’);
+ “

“;
var lastname = “

Last Name:

“;
var date = “

Birth Day

“;
$(leftcolumn).append(firstname);
$(leftcolumn).append(lastname);
$(leftcolumn).append(date);
$( “#firstNameList” ).change(function() {
alert(index);
alert( this.value );
var rowdetails = $(“#jqxgrid”).jqxGrid(‘getrowdata’,index);
var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, index);
$(“#jqxgrid”).jqxGrid(‘ensurerowvisible’,index);
var rowuniqueId = rowdetails[“rowid”]
var uirowuniqueId = rowdetails[“uirowid”]
rowdetails[“rowstatus”] = “updated”;
$.each(data.employees,function(key1, item)
{
if (item[“rowstatus”] == “New”)
{
rowdetails[“rowstatus”] = “New”;
item[column] = value;
$.each(changedRows.employees,function(key2,item2)
{
if (item2[“uirowid”] == uirowuniqueId)
{
item2[column] = value;
}
});
} else if (item[“rowid”] == rowuniqueId)
{
rowdetails[“rowstatus”] = “updated”;
item[“rowstatus”] = “updated”;

var hasRowId = HasRowData(changedRows.employees,rowuniqueId);
if (hasRowId)
{
$.each(changedRows.employees,function(key2,item2)
{
if (item2[“rowid”] == rowuniqueId)
{

}
});
} else
{
changedRows.employees.push(item);
}
}
});
$(“#jqxgrid”).jqxGrid(‘updaterow’, id,rowdetails);

});
}

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

$(“#jqxgrid”).jqxGrid({
width : 800,
source : dataAdapter,
pageable : true,
autoheight : true,
sortable : true,
altrows : true,
enabletooltips : true,
editable : true,
rowdetails : true,
rowdetailstemplate : {
rowdetails : “

“,
rowdetailsheight : 200
},
ready : function() {
$(“#jqxgrid”).jqxGrid(
‘showrowdetails’, 0);
},
initrowdetails : initrowdetails,

columns : [ {
text : ‘First Name’,
datafield : ‘firstname’,
width : 250
}, {
text : ‘Last Name’,
datafield : ‘lastname’,
cellsalign : ‘right’,
align : ‘right’,
width : 120
}, {
text : ‘Product’,
datafield : ‘productname’,
align : ‘right’,
cellsalign : ‘right’,
cellsformat : ‘c2’,
width : 100
}, {
text : ‘Row Id’,
datafield : ‘rowid’,
align : ‘right’,
cellsalign : ‘right’,
cellsformat : ‘c2’,
width : 100
}, {
text : ‘Row Status’,
datafield : ‘rowstatus’,
align : ‘right’,
cellsalign : ‘right’,
cellsformat : ‘c2’,
width : 100
} ]
});

function HasRowData(changedRows, rowuniqueId) {
var hasdata = false;
$.each(changedRows, function(key1, item) {
if (item[“rowid”] == rowuniqueId) {
hasdata = true;

}
});
return hasdata;
}
$(“#jqxgrid”)
.on(
‘cellvaluechanged’,
function(event) {
alert(‘cellvaluechanged’);
var column = args.datafield;
var rowindex = args.rowindex;
var value = args.newvalue;
var oldvalue = args.oldvalue;
var rowdetails = $(“#jqxgrid”)
.jqxGrid(‘getrowdata’,
rowindex);
var rowscount = $(“#jqxgrid”)
.jqxGrid(
‘getdatainformation’).rowscount;

var id = $(“#jqxgrid”).jqxGrid(
‘getrowid’, rowindex);

$(“#jqxgrid”).jqxGrid(
‘ensurerowvisible’,
rowindex);
var rowuniqueId = rowdetails[“rowid”]
var uirowuniqueId = rowdetails[“uirowid”]

$
.each(
data.employees,
function(key1, item) {
if (item[“rowstatus”] == “New”) {
item[column] = value;
$
.each(
changedRows.employees,
function(
key2,
item2) {
if (item2[“uirowid”] == uirowuniqueId) {
item2[column] = value;
}
});
} else if (item[“rowid”] == rowuniqueId) {
rowdetails[“rowstatus”] = “updated”;
item[“rowstatus”] = “updated”;
item[column] = value;

var hasRowId = HasRowData(
changedRows.employees,
rowuniqueId)
if (hasRowId) {
$
.each(
changedRows.employees,
function(
key2,
item2) {
if (item2[“rowid”] == rowuniqueId) {
item2[column] = value;
}
});
} else {
changedRows.employees
.push(item);
}
var commit = $(“#jqxgrid”)
.jqxGrid(‘updaterow’, id,
rowdetails);

}
});
});

$(“#deleterowbutton”)
.on(
‘click’,
function() {

var selectedrowindex = $(“#jqxgrid”)
.jqxGrid(
‘getselectedrowindex’);
var rowdetails = $(“#jqxgrid”)
.jqxGrid(‘getrowdata’,
selectedrowindex);
rowdetails[“rowstatus”] = “Deleted”;
var rowuniqueId = rowdetails[“rowid”]
$
.each(
data.employees,
function(key1, item) {
if (item[“rowid”] == rowuniqueId) {
item[“rowstatus”] = “deleted”;
changedRows.employees.push(item);
}
});

var rowscount = $(“#jqxgrid”)
.jqxGrid(
‘getdatainformation’).rowscount;
if (selectedrowindex >= 0
&& selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid(
'getrowid',
selectedrowindex);

var commit = $("#jqxgrid")
.jqxGrid('deleterow',
id);
}
});
function createNewRow() {
num = num + 1;
data.employees.push({
rowstatus : "New",
uirowid : num
});
var row = {};
row["rowstatus"] = "New";
row["uirowid"] = num;
return row;

}
$("#addrowbutton").on('click', function() {
var datarow = createNewRow();
$("#jqxgrid").jqxGrid('addrow', null, datarow);
changedRows.employees.push(datarow);
});
$("#changedRowbutton")
.on(
'click',
function() {
// Display changed Rows

var sourceChangedRows = {
datatype : "json",
datafields : [ {
name : 'firstname'
}, {
name : 'lastname'
}, {
name : 'productname'
}, {
name : 'rowid'
}, {
name : 'rowstatus'
} ],
localdata : changedRows
};
var dataAdapterChangedRows = new $.jqx.dataAdapter(
sourceChangedRows);

});

Master rows are displayed below

Changed rows are displayed below

[Author]

Posts