ej2 - JavaScript (ES5) & Blazor

[Pooja Saraswat]

Hello Team,

Just wondering, how can I use "ShowColumnOption" of   EJ1   https://help.syncfusion.com/js/gantt/columns#show-column-options in GanttChart EJ2

ShowColumnOption of EJ1 is an excellent option and I am looking to use it in my project.

It's not necessary that I have to use only with ej2 Gantt Chart, I am also okay if you help me to invoke ShowColumnOption to add column to any persistent class or Gridview

Thank you

Pooja

[Karthikeyan Raja]

Hi Pooja,   

  

Sorry for the delay.   

Currently Gantt have support for columnMenu. By using columnMenuItems API we can add custom items as per requirement and using columnMenuClick event we can perform the actions for the added item. Please find the code snippet below,   

var ganttChart = new ej.gantt.Gantt({   

//……   

   columnMenuItems:[{text:'InsertColumn', id:'insert'}],   

   columnMenuClick: function(args){   

      if(args.item.id === 'insert'){   

         var insertIndex = 2;   

         var colObj= { field: 'Duration', headerText: 'Duration', width: 140};   

         this.treeGrid.columns.splice(insertIndex,0,colObj);     

         this.treeGrid.refreshColumns();    

       }   

   },   

  

We have prepared sample with your requirement. Please find the sample from below link,   

Sample - https://stackblitz.com/edit/jbe2yg?file=index.js  

  

Please get back to us, if you need any further assistance on this 

Regards, 

Karthikeyan Raja 

[Pooja Saraswat]

Hi Karthikeyan,

Thanks for your response and hope you are doing well.

Below code was helpful but I was looking to invoke below window where user can create a custom field dynamically including drop-down.

 

looking for your response

Many thx, Pooja

[Karthikeyan Raja]

Hi Pooja,   

   

We have prepared a sample and rendered custom dialog for insert column on column menu click action using columnMenuClick event and also populated required fields in dropdown.  

Please find the code snippet below,   

var ganttChart = new ej.gantt.Gantt({   

//……   

   

    columnMenuItems:[{text:'InsertColumn Right', id:'insertRight'}, {text:'InsertColumn Left', id:'insertLeft'}],   

  columnMenuClick: function(args){   

     if(args.item.id === 'insertRight' || args.item.id === 'insertLeft'){   

        var columnindex = args.column.index;   

        insertIndex = args.item.id == 'insertRight' ? columnindex + 1 :columnindex ;   

        dialogObj.show();   

      }   

  },   

});   

var dialogObj = new ej.popups.Dialog({   

//……   

   buttons: [{   

     click: okClick,   

     buttonModel: { content: 'OK', isPrimary: true }   

  },   

  {   

     click: cancelClick,   

     buttonModel: { content: 'Cancel', cssClass: 'e-flat' }   

  }],   

   

});   

var listObj = new ej.dropdowns.DropDownList({   

//……   

   

});   

function okClick() {   

   var colObj= { field: listObj.value, headerText: headertext.value };   

   ganttChart.treeGrid.columns.splice(insertIndex,0,colObj);     

   ganttChart.treeGrid.refreshColumns();   

   dialogObj.hide();   

}   

function cancelClick() {   

   dialogObj.hide();   

}   

   

   

   

Please find the sample from below link,   

Sample - https://stackblitz.com/edit/jbe2yg?file=index.js  

Please get back to us if you require further assistance. 

 

Regards, 

Karthikeyan Raja