Filter resources fields Dialog gantt chart Vue

[Camilo Moreno]

Hi, 

I can set this option by default on filter?

I can also hide the units from resources

Thanks

[Logeswari Gopalakrishnan]

Hi Camilo, 

 

Thanks for contacting Syncfusion Support. 

  

Query 1: I can set this option by default on filter? 

  

We have achieved this by changing the order of operator in actionBegin event of treegrid. Please find the below code snippet. 

  

<ejs-gantt ref='gantt' id="GanttContainer"   

            ..//// 

 

            :actionComplete= "actionComplete" 

        > 

</ejs-gantt> 

../// 

 

methods: { 

            actionComplete: function(args) { 

                if (args.requestType === "openEditDialog" || args.requestType === "openAddDialog") { 

                   var tabObj = document.getElementById('GanttContainer_Tab').ej2_instances[0]; 

                   tabObj.selected = function(args){ 

                     if (args.selectedIndex === 2) { 

                      treeGrid.actionComplete = args => { 

              if ( 

                args.requestType === "filterafteropen" && 

                args.columnName === "resourceName" 

              ) { 

                var dropDown = document.getElementById( 

                  treeGrid.columns[2].uid + "-floptr" 

                ).ej2_instances[0]; 

                dropDown.index = 2; 

              } 

            };                     } 

                   } 

                } 

              } 

    }, 

  

  

Query 2: I can also hide the units from resources 

  

We have achieved this by using hideColumns method in actionComplete event. Please find the below code snippet. 

  

<ejs-gantt ref='gantt' id="GanttContainer"   

            ..//// 

 

            :actionComplete= "actionComplete" 

        > 

</ejs-gantt> 

../// 

 

methods: { 

            actionComplete: function(args) { 

                if (args.requestType === "openEditDialog" || args.requestType === "openAddDialog") { 

                   var tabObj = document.getElementById('GanttContainer_Tab').ej2_instances[0]; 

                   tabObj.selected = function(args){ 

                     if (args.selectedIndex === 2) { 

var treeGrid = document.getElementById('GanttContainerResourcesTabContainer').ej2_instances[0]; 

                      treeGrid.hideColumns(['Unit']); 

                     } 

                   } 

                } 

              } 

    }, 

  

  

Please find the below sample link. 

  

Sample link: https://codesandbox.io/s/4815-1p3i2?file=/src/App.vue 

  

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

  

Regards, 

Logeswari G 

[Camilo Moreno]

Hi Camilo, 

 

Thanks for contacting Syncfusion Support. 

  

Query 1: I can set this option by default on filter? 

  

We have achieved this by changing the order of operator in actionBegin event of treegrid. Please find the below code snippet. 

  

<ejs-gantt ref='gantt' id="GanttContainer"   

            ..//// 

 

            :actionComplete= "actionComplete" 

        > 

</ejs-gantt> 

../// 

 

methods: { 

            actionComplete: function(args) { 

                if (args.requestType === "openEditDialog" || args.requestType === "openAddDialog") { 

                   var tabObj = document.getElementById('GanttContainer_Tab').ej2_instances[0]; 

                   tabObj.selected = function(args){ 

                     if (args.selectedIndex === 2) { 

                      treeGrid.actionComplete = args => { 

              if ( 

                args.requestType === "filterafteropen" && 

                args.columnName === "resourceName" 

              ) { 

                var dropDown = document.getElementById( 

                  treeGrid.columns[2].uid + "-floptr" 

                ).ej2_instances[0]; 

                dropDown.index = 2; 

              } 

            };                     } 

                   } 

                } 

              } 

    }, 

  

  

Query 2: I can also hide the units from resources 

  

We have achieved this by using hideColumns method in actionComplete event. Please find the below code snippet. 

  

<ejs-gantt ref='gantt' id="GanttContainer"   

            ..//// 

 

            :actionComplete= "actionComplete" 

        > 

</ejs-gantt> 

../// 

 

methods: { 

            actionComplete: function(args) { 

                if (args.requestType === "openEditDialog" || args.requestType === "openAddDialog") { 

                   var tabObj = document.getElementById('GanttContainer_Tab').ej2_instances[0]; 

                   tabObj.selected = function(args){ 

                     if (args.selectedIndex === 2) { 

var treeGrid = document.getElementById('GanttContainerResourcesTabContainer').ej2_instances[0]; 

                      treeGrid.hideColumns(['Unit']); 

                     } 

                   } 

                } 

              } 

    }, 

  

  

Please find the below sample link. 

  

Sample link: https://codesandbox.io/s/4815-1p3i2?file=/src/App.vue 

  

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

  

Regards, 

Logeswari G 

Thanks, it's perfect 

[Pooja Priya Krishna Moorthy]

Hi Camilo, 

Most welcome.  

Please get back to us if you would require further assistance on this. 

Regards, 

Pooja K.