1. Home
  2. Forum
  3. Vue
  4. Customising the Gannt 'Task Information' modal

Customising the Gannt 'Task Information' modal

Hello, 

I would like to do two things in the Gantt control's modal popup:
  1. Change the label 'Offset' to something else.
  2. Change the searching in the name column from 'starts with' to 'contains'
  3. Format the items to hide/exclude the Id section in the dropdown options.


3 Replies 1 reply marked as answer
PP Pooja Priya Krishna Moorthy Syncfusion Team March 31, 2021 12:57 PM UTC

Hi Samantha, 
Please find the below response. 
S.No 
Query 
Syncfusion Comments 
 
1 
 
 
Change the label 'Offset' to something else. 
 
 
We can achieve your requirement by work-around solution using actionComplete event with requestType openEditDialog. Using this event we can change the header text, and refresh the columns using refreshColumnsmethod of grid control as like below code example. 
 
actionComplete: function (args) { 
   var obj = document.getElementById("Gantt").ej2_instances[0]; 
   if (args.requestType === "openEditDialog") { 
      var tabObj = document.getElementById("Gantt_Tab").ej2_instances[0]; 
      tabObj.selected = function (args) { 
           if (args.selectedIndex === 1) { 
             var gridobj = document.getElementById( 
                                obj.controlId + "DependencyTabContainer").ej2_instances[0]; 
             gridobj.columns[3].headerText = "Test"; 
             gridobj.refreshColumns(); 
        } 
   } 
} 
 
 
 
2 
 
 
Change the searching in the name column from 'starts with' to 'contains' 
 
 
We render combo box in name column of dependency tab. By changing the filterType we can achieve your requirement. 
actionComplete: function (args) { 
   var obj = document.getElementById("Gantt").ej2_instances[0]; 
   if (args.requestType === "openEditDialog") { 
        var tabObj = document.getElementById("Gantt_Tab").ej2_instances[0]; 
         tabObj.selected = function (args) { 
             if (args.selectedIndex === 1) { 
                //... 
                 gridobj.actionComplete = function (args) { 
                   if (args.requestType === "add") { 
                        var comboBox = document.getElementById( 
                              obj.controlId + "DependencyTabContainername").ej2_instances[0]; 
                        comboBox.allowFiltering = true; 
                        comboBox.filterType = "Contains"; 
                   } 
                }; 
             } 
          }; 
    } 
}, 
 
 
 
3 
 
 
Format the items to hide/exclude the Id section in the dropdown options. 
 
 
We achieved this by work-around solution, using actionComplete event. 
 
 
actionComplete: function (args) { 
   var obj = document.getElementById("Gantt").ej2_instances[0]; 
   if (args.requestType === "openEditDialog") { 
     var tabObj = document.getElementById("Gantt_Tab").ej2_instances[0]; 
     tabObj.selected = function (args) { 
         if (args.selectedIndex === 1) { 
             //... 
             gridobj.actionComplete = function (args) { 
                if (args.requestType === "add") { 
                  var data = document.getElementById( 
                   obj.controlId + DependencyTabContainername").ej2_instances[0].dataSource.dataSource.json; 
                   for (var i = 0; i < data.length; i++) { 
                        var id = data[i].id + "-"; 
                        data[i].text = data[i].text.replace(id, ""); 
                  } 
                } 
                if (args.requestType === "save") { 
                     for (var j = 0; j < gridobj.dataSource.length; j++) { 
                        var gridname = gridobj.dataSource[j].name; 
                        var gridid = gridobj.dataSource[j].id + "-"; 
                        gridobj.dataSource[0].name = gridid + gridname; 
                     } 
                 } 
              }; 
          } 
        }; 
     } 
}, 
 
 
 
Regards, 
Pooja K. 


Marked as answer
SE Sean March 31, 2021 04:05 PM UTC

Thank you Pooja, the workarounds are good for us. 

PP Pooja Priya Krishna Moorthy Syncfusion Team April 1, 2021 04:01 AM UTC

Hi Samantha, 
Most welcome. 
Please get back to us if you have any other queries. 
As always we will be happy to assist you. 
 
Regards, 
Pooja K. 


Loader.
Up arrow icon