Can SubRow achieve the function of decomposing sub entries?

Suite and Optimus Suite 8
#1

Hello
I found the SubRow parameter in the latest version 9.3.0 on the official website and want to use it to implement the function of decomposing sub entries in TreeGrid by placing an input box in it.
But there is no method with added children in the method, so can’t this method be used to implement the function?
If there are already two sub entries under item A and you want to add another sub to A, can you modify the data source and then use SubRow to render and process it?
Is there a better recommendation method to achieve the function of decomposing sub items?
Looking forward to your reply
Thank you

#2

Hello @ttq,

I’m not sure that I understood your requirement correctly, so please correct me if I missunderstood you.

As I understand your request is - can subRow be used in grid to add/manage child nodes, with keeping expand/collapse functionality.

If so - using subrow is not the best approach for this use case.
As in Grid: tree - children is part of real hierarchy in dataset, that can be easily accessed through the dataCollection methods.
When purpose of subRow is to display extra details under a row(including other suite components).

So the desired requirement is quite more easy implementable in the Grid:tree.

Here is an example:
https://snippet.dhtmlx.com/b1ad6eig

If I missed your point - please feel free to describe it with more details.

Kind regards,

#3

Hello
Firstly, thank you very much for your prompt response
Your answer is somewhat similar to what I had in mind
I just want to click on add child in the selection line, but what I want is to add a cross column input box, where the user presses enter to save the data, and ESC cancels adding child data.
So I wanted to use subRow to render my input box before, but based on your response, it seems that it is not suitable. I will refer to your method to continue optimizing.
Thank you again for your proposal!

Meanwhile, there is another question I would like to consult with.
At present, treeGrid can be used in the Pro version, but the tree structure columns can only be in the first column and no configurable parameters have been found.
Excuse me, if I want to customize which column to be a tree column, how should I handle it? Is there any parameter configuration, or is there any support plan for this feature in the near future?
If it cannot be satisfied in a short period of time, can I only use grid to render the tree structure myself?
Looking forward to your help
Thank you

#4

Hello @ttq,

Regarding this part:

Excuse me, if I want to customize which column to be a tree column, how should I handle it? Is there any parameter configuration, or is there any support plan for this feature in the near future?

There is no built-in config, that allows you to change in which column the toggle icon should be displayed.
If there is a specific column, where you want to display this icon - it better to place it as the first column.

Another option, is to hide the default toggle icon, and display custom toggle icon inside another column, for example “custom toggle column”:
https://snippet.dhtmlx.com/il3l094g

It also may be helpful if you provide some screenshot or mockup of the required result, so I will try to research if it is possible to achieve it, or provide to the dev team, as feature suggestion.

Regarding this part:

If it cannot be satisfied in a short period of time, can I only use grid to render the tree structure myself?

It’s not the best approach, as plain grid isn’t designed to handle the real tree structure.

Kind regards,

#5

Hello
I’m glad to receive your timely response
Through your answer, it is indeed a way of implementation
I also used grid to implement the tree like function I mentioned a long time ago
But as you said, it is indeed not a good way
However, it seems that this method is currently the only way to achieve it

My functional requirements screenshot is as follows
The ‘department’ column in the tree structure is located in the second column, or I can freely set the ‘members count’ column as a tree column.
In the screenshot, setting tree: true in the column indicates which column is a tree column, so it is possible to configure multiple tree columns.

image
image945×619 113 KB

Do you have a better way to meet this demand?
If the development team is unable to implement it in a short period of time, please let me know and I will use grid again to meet the requirement
Looking forward to your answer.

Kind regards,

Thanks

#6

Hello @ttq,

Thank you for the clarification, and provided screenshot. This feature already stays in our dev tracker, unfortunately there is no ETA.

Could you please also clarify the main reason what is the specific reason why you want to display the toggle icon in the second column, and remain the num column strictly first ( it will help our devs to better understand requirements for this feature)?

Technically your requirement can be done by:

  1. Hiding default toggle icon, and removing paddings for the first column through CSS:
.dhx_grid-expand-cell-icon {
    display: none !important;
}
.dhx_grid-cell[data-dhx-col-id="col_1"]{
    padding: 0 !important;
}
  1. Displaying custom toggle icon and adding dynamic paddings for the second column through JS:
        {
            id: "col_2",
            header: [{ text: "Tree (custom icon in 2nd col)" }],
            htmlEnable: true,
            width: 260,
            template: (value, row) => {
                const canOpen = !!row.$items;
                const level = row.$level || 0;
                const leftPad = level * 16;
                const icon = canOpen ? (row.$opened ? "▾" : "▸") : "";
                return (
                    "<div class='tree-second-col' style='padding-left:" + leftPad + "px'>" +
                        "<span class='tree-second-col__toggle'>" + icon + "</span>" +
                        "<span>" + (value || "") + "</span>" +
                    "</div>"
                );
            }
        },
  1. Handling clicks for the second column icon:
grid.events.on("cellClick", (row, col, e) => {
    if (col.id !== "col_2" || !row.$items) {
        return;
    }
    const target = e.target;
    if (!target || !target.closest(".tree-second-col__toggle")) {
        return;
    }
    row.$opened ? grid.collapse(row.id) : grid.expand(row.id);
});

Here is an example:
https://snippet.dhtmlx.com/il3l094g

I also updated demo in my previous answer to the ones above, as it seems better(if anybody will look for the same).

Kind regards,