Please find attached working example using addClass and removeClass 'pq-cell-dirty'
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PQtest</title>
<!--script src="jquery-ui-1.9.0.custom/js/jquery-1.8.2.js"></script>
<script src="jquery-ui-1.9.0.custom/js/jquery-ui-1.9.0.custom.js"></script-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="Content/css/pqgrid.dev.css">
<script src="Content/js/pqgrid.dev.js"></script>
<script>
$(document).ready(function() {
/////// Put this in a file named "template.json" in the same directiry ////////////
// [
// { "ID": 11, "Name": "Test 1", "Attributes": [{"ID": "txt11" }, {"ID": "txt12" } ,{"ID": "txt13" }] },
// { "ID": 22, "Name": "Test 2", "Attributes": [{"ID": "txt21" }, {"ID": "txt22" } ,{"ID": "txt33" }] },
// { "ID": 33, "Name": "Test 3", "Attributes": [{"ID": "txt31" }, {"ID": "txt32" } ,{"ID": "txt33" }] }
// ]
var localTemplates = new Array;
var newItemRowID = 0;
var colTemplateModel = [
{title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable: false},
{title: "DbID", width: 30, dataType: "integer", dataIndx: "ID", editable: false, hidden: true},
{title: "Name", minWidth: 150,width:600, dataType: "string", resizable: true, dataIndx: "Name", editable: true}
];
var $grid = $("#templateDataGrid").pqGrid({
width: 700,
height: 400,
numberCell:{show:false},
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "ID",
url: "template.json",
getData: function(response) {
//console.log(response);
//debugger;
return {data: response};
}
},
colModel: colTemplateModel,
flexHeight: true,
wrap: false,
//flexWidth: true,
selectionModel: {
type: ''
},
scrollModel: {
//autoFit: true
},
hoverMode: 'cell',
editModel: {
saveKey: $.ui.keyCode.ENTER
},
title: "Templates",
track: true,
toolbar: {
items: [
{
type: 'button', icon: 'ui-icon-minus', label: 'Apply', listeners: [
{
"click": function(evt, ui) {
var $grid = $(this).closest('.pq-grid');
// AcceptTemplateChanges($grid);
}
}
]
}
]
},
detailModel: {
cache: true,
collapseIcon: "ui-icon-plus",
expandIcon: "ui-icon-minus",
init: function(ui) {
//debugger;
var rowDataMain = ui.rowData,
templateID = rowDataMain["ID"];
//localTemplates.push(rowDataMain);
//console.log(ui);
//Attributes
var colAttribModel = [
{title: "Attribute name", width: 150, dataType: "string", dataIndx: "ID"},
{title: "Default data", width: 200, dataType: "string", dataIndx: "Data"},
{title: "", editable: false, width: 63, sortable: false, render: function(ui) {
return "<button type='button' class='delete_attrib'>Delete</button>";
}}
];
var dataAttribModel = {
data: rowDataMain["Attributes"],
location: "local",
recIndx: "ID"
};
var $attribGrid = {
width: 500, height: 200,
track: true,
dataModel: dataAttribModel,
colModel: colAttribModel,
flexHeight: true,
title: "Attributes",
scrollModel: {
autoFit: true,
lastColumn: "auto"
},
wrap: false,
showTop: true,
showBottom: false,
collapsible: false,
showTitle: false,
oddRowsHighlight: true,
hoverMode: 'cell',
editModel: {
saveKey: $.ui.keyCode.ENTER
},
track: true, //to turn on the track changes.
cellSave: function(event, ui) {
//console.log(event);
//console.log(rowDataMain);
//debugger;
var $grid = $(this),
$masterGrid = $grid.parent().closest(".pq-grid"),
masterIndexNr = $masterGrid.pqGrid("getRowIndx", {rowData:rowDataMain}).rowIndx;
if($grid.pqGrid('isDirty')){
//Used for updating data grid with latest data and med it marked for change
//var detailIndx = $(this).closest('.pq-grid').parent().parent().attr("pq-row-indx");
//var masterIndx = $('#templateDataGrid').find("tr.pq-detail-master[pq-row-indx=" + detailIndx + "]");
//var masterIndexNr = $(masterIndx).attr('pq-row-indx');
//$masterGrid.pqGrid("updateRow", {rowIndx: masterIndexNr, row: {'Name': rowDataMain.Name + ' '}});
$masterGrid.pqGrid("addClass", {rowIndx: masterIndexNr, dataIndx: 'Name', cls: 'pq-cell-dirty' });
}
else{
$masterGrid.pqGrid("removeClass", {rowIndx: masterIndexNr, dataIndx: 'Name', cls: 'pq-cell-dirty' });
}
//$('#templateDataGrid').pqGrid("updateRow", {rowIndx: parseInt(masterIndexNr), row: {'Name': rowDataMain.Name}});
//console.log(uiMain);
//console.log(ui);
},
toolbar: {
items: [
{
type: 'button', icon: 'ui-icon-plus', label: 'Add attribute', listeners: [
{
"click": function(evt, ui) {
var $grid = $(this).closest('.pq-grid');
//append empty row at the end.
var rowDataEmpty = {}; //empty row
var rowIndx = $grid.pqGrid("addRow", {rowData: rowDataEmpty});
$grid.pqGrid("goToPage", {rowIndx: rowIndx});
$grid.pqGrid("editFirstCellInRow", {rowIndx: rowIndx});
}
}
]
}
]
},
refresh: function() {
//debugger;
var $grid = $(this);
if (!$grid) {
return;
}
//delete button
$grid.find("button.delete_attrib").button({icons: {primary: 'ui-icon-close'}})
.unbind("click")
.bind("click", function(evt) {
var $grid = $(this).closest('.pq-grid');
if (isEditing($grid)) {
return false;
}
var $tr = $(this).closest("tr"),
rowIndx = $grid.pqGrid("getRowIndx", {$tr: $tr}).rowIndx;
DeleteDetailRow(rowIndx, $grid, localTemplates, templateID);
});
//rows which were in edit mode before refresh, put them in edit mode again.
var rows = $grid.pqGrid("getRowsByClass", {cls: 'pq-row-edit'});
if (rows.length > 0) {
var rowIndx = rows[0].rowIndx;
//editRow(rowIndx, $grid);
}
}
};
var $grid = $("<div></div>").pqGrid($attribGrid);
return $grid;
}
}
});
});
</script>
</head>
<body class="Test">
<div id="templateDataGrid" class="templateManagerGrid" >
</div>
</body>
</html>
