TreeGrid Indent and Outdent Toolbar Options?

[Dee]

Hello!

The gantt control supports Indent and Outdent.

In the samples, the toolbar even has icons to perform each.

The gantt control seems to be similar to (or based on) the treeGrid control.

Does the TreeGrid control support Indent and Outdent, as well?

If not, can it be enhanced to include Indent and Outdent?

Thanks.

[Jayakumar Duraisamy]

Hi Derrick, 

Please find the response below. 

Query 1: Does the TreeGrid control support Indent and Outdent, as well? 

Answer: In TreeGrid, we don’t have indent/outdent support but we can change the record position by row drag & drop support. To enable this feature, enable API “allowDragAndDrop” as true and it can be achieved by drag and drop the record on mouse/touch interaction. 

Please refer following code snippet, 

$("#TreeGridContainer").ejTreeGrid({ 

            allowDragAndDrop: true, 

            dragTooltip: { 

                showTooltip: true, // To enable drag tooltip                       

            }, 

}); 

 

Otherwise, we are working on public method support to update the record position dynamically. By using this method, we can achieve indent/outdent in work-around. This method will be included in our upcoming volume 1 2018 main release, which is expected to roll out at the end of Feb 2018. 

Query 2: If not, can it be enhanced to include Indent and Outdent? 

Answer: As we scheduled many high priority tasks for our upcoming releases. Hence, can you please explain briefly about the importance of Indent/Outdent support in your project. It will help us to consider this support in any of our upcoming release. 

Regards, 

Jayakumar D 

[Dee]

Hi Jayakumar,

Thanks for responding.

DragAndDrop is already enabled.

Certainly this supports changing the order of rows.

DragAndDrop does not support creating a hierarchy of rows, which is what Indent and Outdent provide.

The ability to create tasks, and their subtasks, and then to be able collapse and expand groups of tasks is what is sought.

Thanks,

Dee

[Jayakumar Duraisamy]

Hi Derrick, 

In TreeGrid  using row drag and drop support, we can change the record position in three different indexes like “Above, Below, Child” to the target record. The target position is indicated by three dynamic arrow icons which is displayed on the tree/expander column. By the way, we can update the hierarchy of rows as like Indent/Outdent performs. 

Also, we have informed in the previous update about public method support to change the record position dynamically. It will be available in our upcoming volume 1, 2018 main release. 

Please refer following row drag and drop sample & documentation, 

Docs: https://help.syncfusion.com/js/treegrid/rows#row-drag-and-drop  

Sample: https://js.syncfusion.com/demos/web/#!/bootstrap/treegrid/rows/rowdraganddrop  

Regards, 

Jayakumar D 

Please let us know if you need further assistance on this. 

[Dee]

Hi Jayakumar,

Thanks for the kind support. And thanks for the samples. They are always helpful.

Yes, drag-and-drop does work fine in the treeGrid.

And the treeGrid is very nice.

What treeGrid lacks are toolbar options that present icons that allow you to indent and outdent, as far as I understand.

If it had that, I would gladly use it, instead of the gantt control.

Currently, we have toolbar options such as these:

     ejTreeGrid

           toolbarSettings: {

                   showToolbar: true,

                   toolbarItems: [

                       ej.TreeGrid.ToolbarItems.Add,

                       ej.TreeGrid.ToolbarItems.Edit,

                       ej.TreeGrid.ToolbarItems.Delete,

                       ej.TreeGrid.ToolbarItems.Update,

                       ej.TreeGrid.ToolbarItems.Cancel,

                       ej.TreeGrid.ToolbarItems.ExpandAll,

                       ej.TreeGrid.ToolbarItems.CollapseAll,

                   ej.TreeGrid.ToolbarItems.PdfExport,

                       ej.TreeGrid.ToolbarItems.ExcelExport

                   ],

               },

What I would like to have is similar options for indent and outdent:

e.g.

                       ej.TreeGrid.ToolbarItems.Indent

                       ej.TreeGrid.ToolbarItems.Outdent

So, that is missing right now for ejTreeGrid, right? - Toolbar options for indent and outdent

Will that be available in the next version in Feb?

ejGantt's toolbar options include indent and outdent:

ejGantt

                toolbarSettings: {

                    showToolbar: true,

                    toolbarItems: [

                        ej.Gantt.ToolbarItems.Add,

                        ej.Gantt.ToolbarItems.Edit,

                        ej.Gantt.ToolbarItems.Delete,

                        ej.Gantt.ToolbarItems.Update,

                        ej.Gantt.ToolbarItems.Cancel,

                        ej.Gantt.ToolbarItems.Outdent,

                        ej.Gantt.ToolbarItems.Indent,

                        ej.Gantt.ToolbarItems.ExpandAll,

                        ej.Gantt.ToolbarItems.CollapseAll

                    ]

                },

Thanks a lot in advance, Jayakumar!

Cheers,

Derrick

[Dee]

Hello Jayakumar!

ejTreeGrid

You are correct.

Drag-and-drop does allow a person to use the mouse to drag rows such that they indent or outdent.

Thanks for the heads-up.

Toolbar icons for Indent and Outdent are what are missing. 

Thanks,

Derrick

[Jayakumar Duraisamy]

Hi Derrick, 

Thank you for your update. 

As we said in the earlier update, we have already scheduled many high priority features for our upcoming releases. Hence, we will consider this support in any of our upcoming releases, but currently we couldn’t provide definite time line for this feature support. 

Regards, 

Jayakumar D 

[Dee]

Jayakumar,

Thanks.

[Jayakumar Duraisamy]

Hi Derrick, 

Thanks for the update. 

Regards, 

Jayakumar D