[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