1. Home
  2. Forum
  3. ASP.NET MVC
  4. Adding/Customizing Custom columns in Gantt && Custom contextmenu not working

Adding/Customizing Custom columns in Gantt && Custom contextmenu not working

Hello, PFA attached view file.

I'm trying to add column to gantt as mentioned here : https://help.syncfusion.com/aspnetmvc/gantt/columns?cs-save-lang=1&cs-lang=razor

1) I'm getting column rendered,but data is not getting processed for that column. Tried to debug the code and found that, on line

var cellValue = this.data.item && this.data.item["Priority"];

'this' gives me 'window',not gantt object. Due to this, this.data.item gives error as,Cannot read property 'item' of undefined. What i'm trying to do is,i want to change the cell color or background image of the cell based on the value of particular column.

2) Another problem is with custom contextmenu. The code is as follows:

function contextMenuOpen(args) {

        args.contextMenuItems.push(

            {

                headerText: "ExpandAll",

                iconPath: "url(../images/loading.gif)",

                evenHandler: function () {
                    
                    //event handler for custom menu items

                }

            });
    }

I'm getting menu and the image,the problem is when i click it,it gives error in ej.web.all.min.js that Cannot read property 'toString' of undefined. Error is on this line

(f=e.filter(function(n){if(n.menuId.toString()===t)return!0})

3) How to rename columns? e.g. Baseline start date should be renamed to 'Actual start date'. 

Awaiting your prompr response in this regards.

Attachment: gantt_e4aa67f2.rar

1 Reply
JS Jonesherine Stephen Syncfusion Team October 18, 2016 09:18 AM UTC

Hi Manish, 
Please find the response below: 
Query1: I'm getting column rendered, but data is not getting processed for that column 
Solution: By using “load” client side event we can add the custom column in Gantt. And we can also customize the column using “columnTemplate”. We have prepared the work around and rendered the custom column and also we have rendered the image in the cell by using column template.  
We can also customize the cells by using “queryCellInfo” client side event. 
Please find the code example below: 
<body> 
    @(Html.EJ().Gantt("Gantt"). 
       .ClientSideEvents(eve => 
       { 
           // 
           eve.QueryCellInfo("queryCellinfo"); 
       }) 
           ) 
    @(Html.EJ().ScriptManager()) 
    <script type="text/x-jsrender" id="columnTemplate"> 
        {{if #data.item.CustomField}}        
        <div style="display:inline-block;position:relative;left:10px;top:1px">             
            <img src="/Themes/gantt/{{:#data.item.CustomField}}.png" height="40px" /> 
        </div> 
        <div style='display:inline-block;width:100%;position:relative;left:10px;top:-15px'>{{:#data.item.CustomField}}</div> 
        {{/if}} 
    </script> 
    <script type="text/javascript"> 
        function load(args) {    
         //To render the custom column in Gantt    
            var column = this.getColumns(), 
            customcolumn1 = {}; 
            customcolumn1["field"] = "CustomField";           
            customcolumn1["headerText"] = "Resource"; 
            customcolumn1["isTemplateColumn"] = true; 
            customcolumn1["templateID"] = "columnTemplate";            
            column.splice(2, 0, customcolumn1); 
            column[1].headerText = "Customized Text"; 
        }        
        function queryCellinfo(args) { 
         //To customize the cell value in Gantt 
            if (args.column.field == "CustomField" && args.data.index ==3)                         {                
                $(args.cellElement).css({ "backgroundColor": "green" }); 
            }             
        } 
    </script> 
 
Query2: Another problem is with custom context menu. 
Solution: 
We need to map the “menuId” parameter to render the customContextMenu. “menuId” should not contain any space character. 
Please find the code example below 
<body> 
    @(Html.EJ().Gantt("Gantt"). 
       EnableContextMenu(true).        
       RowHeight(44). 
       ClientSideEvents(eve => 
       {           
           eve.ContextMenuOpen("contextMenuOpen"); 
       }). 
       Datasource(ViewBag.dataSource) 
    ) 
    @(Html.EJ().ScriptManager()) 
    <script type="text/javascript"> 
        function contextMenuOpen(args) {            
            args.contextMenuItems.push( 
            { 
                headerText: "Custom menu", 
               menuId: "customMenu", 
                eventHandler: function (args) { 
                    //event handler for custom menu items 
                    alert("Custom menu"); 
                },               
            }); 
        }         
    </script> 
 
Query3:  How to rename columns? E.g. Baseline start date should be renamed to 'Actual start date'.  
Solution: We can rename the column by using “headerText” parameter in load event. Or we can also rename the column name by using “Rename Column” option is column chooser. 
Please find the code example below: 
    @(Html.EJ().Gantt("Gantt"). 
       ShowColumnChooser(true). 
       ShowColumnOptions(true).        
       ClientSideEvents(eve => 
       {           
           eve.Load("load"); 
                  }). 
    ) 
    @(Html.EJ().ScriptManager()) 
    <script type="text/javascript">         
        function load(args) { 
            var column = this.getColumns(), 
           //To customize the column header text     
          column[1].headerText = "Customized Text"; 
        } 
    </script> 
We have also prepared the sample for your reference. Please find the sample from below location 
Please find our demo samples for your reference 
Regards, 
Jone sherine P S

Loader.
Up arrow icon