treeGrid getRows

[kevinmParticipant]

I’m trying to get the data back from a tree grid (I don’t want to update database on each row update), and I am trying to use the getRows method. The array that comes back cannot be serialized due to circular references, namely the parent object in any node with a depth more than one. While useful in getting the parent when dealing with the tree, this makes it impossible to deal with the exported data. Any suggestions?

Thanks,
Kevin

[Peter StoevKeymaster]

Hi Kevin,

It cannot be serialized with built-in functions. If you wish to serialize it, you will need to traverse the getRows method result and serialize only the fields you’re interested in.

Best Regards,
Peter Stoev

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

[Mircea GiurgiuParticipant]

Hi,
I have a problem when I want to add a row into greed and then I want insert it into database

The code :
$(document).ready(function () {

var source =
{
dataType: “json”,
dataFields: [

{ name: “idMenu”, type: “number” },
{ name: “itemDesc”, type: “string” },
{ name: “parentID”, type: “string” },
{ name: “position”, type: “number” },
{ name: “level”, type: “array” },
{ name: “href”, type: “string” }

],
url: ‘data/menuTree_data.php’,
addRow: function (rowID, rowData, position, parentID, commit) {
// alert(rowData.item[‘itemDesc’])

// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
newRowID = rowID;
newParentID=parentID;

newRowData=rowData;
newPosition=position;

},
updateRow: function (rowID, rowData, commit) {

/* url=”data/menu_up.php?action=update&id=”+rowData.idMenu+
“&itemDesc=”+rowData.itemDesc+
“&position=”+rowData.position+
“&href=”+rowData.href

$.ajax({url:url,type: “GET”,cache: false ,success:function(result){
$(“#mess”).html(result) }}); */
//alert(newRowID)

// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);

},
deleteRow: function (rowID, commit) {

$.ajax({url:”data/menu_up.php?action=delete&id=”+rowID

});
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
},
cache: false,
hierarchy:
{
root: “level”,
keyDataField: { name: ‘idMenu’ },
parentDataField: { name: ‘parentID’ }
},

id: “idMenu”
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
}
});
$(“#treeGrid”).jqxTreeGrid(
{
width: 550,
source: dataAdapter,
altrows: true,
autoRowHeight: false,
showToolbar: true,
theme: ‘energyblue’,
toolbarHeight: 35,
ready: function () {
// Expand rows with ID = 1, 2 and 7
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 1);
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 2);
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 3);
},
editable: true,
renderToolbar: function(toolBar)
{
var toTheme = function (className) {
if (theme == “”) return className;
return className + ” ” + className + “-” + theme;
}
// appends buttons to the status bar.
var container = $(“<div style=’overflow: hidden; position: relative; height: 100%; width: 100%;’></div>”);
var buttonTemplate = “<div style=’float: left; padding: 3px; margin: 2px;’><div style=’margin: 4px; width: 16px; height: 16px;’></div></div>”;
var addButton = $(buttonTemplate);
var editButton = $(buttonTemplate);
var deleteButton = $(buttonTemplate);
var cancelButton = $(buttonTemplate);
var updateButton = $(buttonTemplate);
container.append(addButton);
container.append(editButton);
container.append(deleteButton);
container.append(cancelButton);
container.append(updateButton);
toolBar.append(container);
addButton.jqxButton({cursor: “pointer”, enableDefault: false, disabled: true, height: 25, width: 25 });
addButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-plus’));
addButton.jqxTooltip({ position: ‘bottom’, content: “Add”});
editButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
editButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-edit’));
editButton.jqxTooltip({ position: ‘bottom’, content: “Edit”});
deleteButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
deleteButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-delete’));
deleteButton.jqxTooltip({ position: ‘bottom’, content: “Delete”});
updateButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
updateButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-save’));
updateButton.jqxTooltip({ position: ‘bottom’, content: “Save Changes”});
cancelButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
cancelButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-cancel’));
cancelButton.jqxTooltip({ position: ‘bottom’, content: “Cancel”});
var updateButtons = function (action) {
switch (action) {
case “Select”:
addButton.jqxButton({ disabled: false });
deleteButton.jqxButton({ disabled: false });
editButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
case “Unselect”:
addButton.jqxButton({ disabled: true });
deleteButton.jqxButton({ disabled: true });
editButton.jqxButton({ disabled: true });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
case “Edit”:
addButton.jqxButton({ disabled: true });
deleteButton.jqxButton({ disabled: true });
editButton.jqxButton({ disabled: true });
cancelButton.jqxButton({ disabled: false });
updateButton.jqxButton({ disabled: false });
break;
case “End Edit”:
addButton.jqxButton({ disabled: false });
deleteButton.jqxButton({ disabled: false });
editButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
}
}
var rowKey = null;
$(“#treeGrid”).on(‘rowSelect’, function (event) {
var args = event.args;
rowKey = args.key;

// alert(“Row with bound index: ” + event.args.rowindex + ” has been selected”);
updateButtons(‘Select’);
});
$(“#treeGrid”).on(‘rowUnselect’, function (event) {
updateButtons(‘Unselect’);
});
$(“#treeGrid”).on(‘rowEndEdit’, function (event) {
updateButtons(‘End Edit’);
});
$(“#treeGrid”).on(‘rowBeginEdit’, function (event) {
updateButtons(‘Edit’);
});
addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, rowKey);
// add new empty row.
$(“#treeGrid”).jqxTreeGrid(‘addRow’, null, {itemDesc:”,position:”,href:”}, ‘first’, rowKey);
// select the first row and clear the selection.
$(“#treeGrid”).jqxTreeGrid(‘clearSelection’);
$(“#treeGrid”).jqxTreeGrid(‘selectRow’, newRowID);
// edit the new row.
$(“#treeGrid”).jqxTreeGrid(‘beginRowEdit’, newRowID);

updateButtons(‘add’);
}
});
cancelButton.click(function (event) {
if (!cancelButton.jqxButton(‘disabled’)) {
// cancel changes.
$(“#treeGrid”).jqxTreeGrid(‘endRowEdit’, rowKey, true);
}
});
updateButton.click(function (event) {
if (!updateButton.jqxButton(‘disabled’)) {
// save changes.
var args=event.args
//var index=args.index
// var row = args.row;
// alert(newRowID)
var row = $(“#treeGrid”).jqxTreeGrid(‘getRow’,newRowID);
// alert(JSON.stringify(row))
// alert(row.itemDesc)
if(typeof newRowID!=”undefined”) {

url=”data/menu_up.php?action=insert&id=”+newRowData.idMenu+
“&itemDesc=”+row.itemDesc+
“&position=”+row.position+
“&href=”+row.href+
“&parentID=”+newParentID

$.ajax({url:url,type: “GET”,cache: false ,success:function(result){
$(“#mess”).html(result) }});
}
alert(url)
$(“#treeGrid”).jqxTreeGrid(‘endRowEdit’, rowKey, false);
}
});
editButton.click(function () {
if (!editButton.jqxButton(‘disabled’)) {
$(“#treeGrid”).jqxTreeGrid(‘beginRowEdit’, rowKey);
updateButtons(‘Edit’);
}
});
deleteButton.click(function () {
if (!deleteButton.jqxButton(‘disabled’)) {
var selection = $(“#treeGrid”).jqxTreeGrid(‘getSelection’);
if (selection.length > 1) {
var keys = new Array();
for (var i = 0; i < selection.length; i++) {
keys.push($(“#treeGrid”).jqxTreeGrid(‘getKey’, selection[i]));
}
$(“#treeGrid”).jqxTreeGrid(‘deleteRow’, keys);
}
else {
$(“#treeGrid”).jqxTreeGrid(‘deleteRow’, rowKey);
}
updateButtons(‘delete’);
}
});
},
columns: [
{ text: ‘ID/level’, editable: false, dataField: ‘idMenu’, width: 80 },

{ text: ‘Description’, dataField: ‘itemDesc’, width: 220},
{ text: ‘Position’, dataField: ‘position’,width: 80, cellsAlign: ‘right’, align: ‘right’ },

{ text: ‘href’, dataField: ‘href’ }
]
});
});

Into updateButton.click(function
See url:
row.itemDesc, row.href, row.position are blank if even I filled withe values.
How to recover data from new line?
Thanks
Mircea

[Peter StoevKeymaster]

Hi Mircea,

updateRow function is called when a row is updated. It provides 3 arguments – updated row’s ID, Data and a callback function called “commit”. In that function, you should write your Custom Code for synchronization with your Server. In general, you can use jQuery Ajax for that purpose. We would not be able to help with the synchronization as that is specific to your application’s scenario and backend.

Best Regards,
Peter Stoev

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

[Mircea GiurgiuParticipant]

Ok,
I was not clear:

My pb is when insert new row:
When I want to save I get blank value for items
How I can recover the filled value ?
I used the code:

var row = $(“#treeGrid”).jqxTreeGrid(‘getRow’,newRowID);
url=”data/menu_up.php?action=insert&id=”+newRowData.idMenu+
“&itemDesc=”+row.itemDesc+
“&position=”+row.position+
“&href=”+row.href+
“&parentID=”+newParentID
$.ajax({url:url,type: “GET”,cache: false ,success:function(result){
$(“#mess”).html(result) }});
}

Thanks
Mircea

[Peter StoevKeymaster]

Hi Mircea,

If you insert row, the addRow callback function is called and it also has rowData argument which contains your row’s values.

Best Regards,
Peter Stoev

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

[Author]

Posts