We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

126581 Oct 17,2016 06:08 AM Oct 18,2016 05:18 AM ASP.NET MVC 1
loading
Tags: Gantt
Manish dhariwal
Asked On October 17, 2016 06:08 AM

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

Jonesherine Stephen [Syncfusion]
Replied On October 18, 2016 05:18 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;