How to add a child row in a jqxTreeGrid

[alesParticipant]

Hi,
is there any way to add a child row in a jqxTreeGrid via button click? The addRow method adds a row always as the root row even if the “parent id” is supplied. You can see it here: http://jsfiddle.net/akahanek/ayLrywgx/3/.

Thank you
Ales

[alesParticipant]

Finally I have found this old post http://www.jqwidgets.com/community/topic/add-hierarchical-data/. The solution is the fifth parameter of the addRow method (the parent id), which is undocumented. You have been asked to add this parameter to your documentation in this post (almost a year ago), but you ignored it. Very bad. At least 1 hour lost at my side 🙁 Please, add this parameter to your documentation so that other developers can quickly figure out how to add a child row.

Thank you
Ales

[HristoParticipant]

Hello Ales,

Thank you for the interest and for this assistance.
Thank you for the understanding.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[alesParticipant]

Hi,
could you please update the documentation as asked above?
Thank you
Ales

[HristoParticipant]

Hello Ales,

It has already created a work item for this case.
Thanks again.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[OlgaParticipant]

Hello!

I used your component jqxtreeGrid. My task is add multiple rows in table with hierarhy. Hierarhy contains 12500 records.
I tried do so:
var args = event.args
, row = args.row
, rowKey = args.key
, sMasterRowData = ars.util.json.rowToString(context.masterrowdata);
var sRowData = ars.util.json.rowToString(row);
apex.server.process(“XX_AJAX_PROCESS”, {x01: ‘rowExpand’,
x02: context.reportcode, x03: sRowData,
x04: context.masterreportcode, x05: sMasterRowData
}
, {dataType: “json”,
async: false,
success: function (pData) {
if (pData === null)
return;
ars.jqx.util.showStatus(pData.respStatus);
for (var x = 0; x < pData.respBody.length; x++) {
if (pData.respBody[x][“row_expand_ajax”].toUpperCase() !== “X”) {
ars.util.log(“[” + pfx + “treeGrid.rowExpand child.name=”+pData.respBody[x][“name”]+”]”, pData.respBody[x][“_ID”]);
treeGrid.jqxTreeGrid(“addRow”, pData.respBody[x][“_ID”], pData.respBody[x], “last”, pData.respBody[x][“_PARENTID”]);
}
}
}
});
It works, but very slowly for root node that contains 12500 records. Yes, calling of treeGrid.jqxTreeGrid(“addRow”… working quickly for hierarhy with 800 records.
Then I tried so:
var args = event.args
, row = args.row
, rowKey = args.key
, sMasterRowData = ars.util.json.rowToString(context.masterrowdata);
var sRowData = ars.util.json.rowToString(row);
var childrenUidArrayAdd = new Array();
var childrenDataArrayAdd = new Array();
var parentUidArrayAdd = new Array();
apex.server.process(“XX_AJAX_PROCESS”, {x01: ‘rowExpand’,
x02: context.reportcode, x03: sRowData,
x04: context.masterreportcode, x05: sMasterRowData
}
, {dataType: “json”,
async: false,
success: function (pData) {
if (pData === null)
return;
ars.jqx.util.showStatus(pData.respStatus);
for (var x = 0; x < pData.respBody.length; x++) {
if (pData.respBody[x][“row_expand_ajax”].toUpperCase() !== “X”) {
ars.util.log(“[” + pfx + “treeGrid.rowExpand child.name=”+pData.respBody[x][“name”]+”]”, pData.respBody[x][“_ID”]);
childrenUidArrayAdd.push(pData.respBody[x][“_ID”]);
childrenDataArrayAdd.push(pData.respBody[x]);
parentUidArrayAdd.push(pData.respBody[x][“_PARENTID”]);
}
}
treeGrid.jqxTreeGrid(“addRow”, childrenUidArrayAdd, childrenDataArrayAdd, “last”, parentUidArrayAdd);
}
});

Calling treeGrid.jqxTreeGrid(“addRow”, childrenUidArrayAdd, childrenDataArrayAdd, “last”, parentUidArrayAdd)
dont add child nodes under their parents, but dont give errors in console (snapshot appliing).
If I calling treeGrid.jqxTreeGrid(“addRow”… without fifth parameter parentUidArrayAdd
(treeGrid.jqxTreeGrid(“addRow”, childrenUidArrayAdd, childrenDataArrayAdd, “last”), then it works, nodes added directly treeGrid, but not hierarhy.
But I need add hierarhy rows as array of children nodes added under array of parent records.

Please help me! Add capability in calling of treeGrid.jqxTreeGrid(“addRow” with array of parent UIDs in fifth parameter.

[HristoParticipant]

Hello Olga,

I would like to suggest you try one simple and effective approach.
If you know the new data then try to load it into the DataAdapter.
Just update the source.localData = newDataRecords;
After that just update the jqxTree with updateBoundData method.

The option that you mentioned – to add an array of records is also available.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[JwhitbreadParticipant]

Hi,

Is there any update on the adding of the child row of the TreeGrid?
Does the child row ID parameter not work?
Updating the bound data is something I’d rather avoid as the data is large and will take long to reload.
In your newDataRecords method how would I go about adding the new rows into the old data then loading the source again?

Thanks,
Jamie.

[svetoslav_borislavovParticipant]

Hi,

As you can see in the following example, you can use the fourth parameter. It is for the parent ID.
https://jsfiddle.net/3s98qtj4/2/

In the example, I am adding a child row of row with EmployeeId 6.

I hope this helps!

Best regards,
Svetoslav Borislavov

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

[JwhitbreadParticipant]

Hi Svetoslav,

Thank you for the response,
How would I apply this to a JqxTreeGrid that uses

hierarchy:
{
keyDataField: {name: ‘standard_id’},
parentDataField: {name: ‘parent_standard_id’}
},

In the example children are defined by them being within a multi dimensional array, where I’m defining the key data field and parent ID.
When adding a row I’ve noticed that it uses row_id rather than if I give it the parent ID specified when I made the table?

I ask this because I wish to know using the given method how I’d add a row along with its children if I’m using the key datafield method rather than the children method.

Hope that makes sense,
Thanks.
Jamie.

[svetoslav_borislavovParticipant]

Hi,

Please see this demo: https://jsfiddle.net/dk6qyth3/1/
to get familiar with the solution. It uses parentid, so it adds the row as a child of the row with the given number.

Best regards,
Svetoslav Borislavov

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

[JwhitbreadParticipant]

Hi Svetoslav,

This has worked great, I’m having one more issue now though,

In my table I’m using this hierarchy
hierarchy:
{
keyDataField: {name: ‘part_id’},
parentDataField: {name: ‘parent_part_id’}
},
id: ‘unique_id’,

and in my rows I have this:
[
{unique_id: 23, part_id: 5, parent_part_id: 6, quantity: 1}
{unique_id: 37, part_id: 5, parent_part_id: 8, quantity: 1}
];

When I edit quantity of one of these rows it edits both, same with selecting one it selects both. They have different parents and a unique ID to distinguish between them.
Is it possible to make the table recognise the unique_id as a unique but maintaining the hierarchy of the key and parent?

Thanks,
Jamie.

[svetoslav_borislavovParticipant]

Hi,

Can you confirm the problem in the following example: https://jsfiddle.net/ap7y4932/
I tried to reproduce it but unsuccessfully

Best regards,
Svetoslav Borislavov

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

[JwhitbreadParticipant]

Hi Svetoslav,

Here is the script with example data:
https://jsfiddle.net/gz9wejd2/1/

  const data = [{
      name: "Black Tea",
      id: 1,
      parentid: null,
      partid: 5,
      quantity: 4
    },
    {
      name: "Green Tea",
      id: 3,
      parentid: null,
      partid: 6,
      quantity: 4
    },
    {
      name: "Child Black Tea",
      id: 2,
      parentid: 5,
      partid: 2,
      quantity: 4
    },
    {
      name: "Child Black Tea",
      id: 4,
      parentid: 6,
      partid: 2,
      quantity: 4
    }
  ]

Basically I was wondering if its possible to have both child black tea’s being unique entities, in my requirements I need them to be unique because they are linked to different parents and was wondering if its possible to distinguish between the two using “id” rather than “partid” because clicking on one currently selects both.

[svetoslav_borislavovParticipant]

Hi,

Thank you for reporting this, I have opened an issue for that!
Meanwhile, if you have any additional question, do not hesitate to contact us!

Best regards,
Svetoslav Borislavov

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

[Author]

Posts