Showing Custom data in the gantt

[Bryan Conlon]

Hi

I have not used the gantt control yet but I have 2 questions before I invest more time in using it.

1. Can the cantt treeview grid display custom columns (including drop downs). I see mappings for some items (TaskIdMapping etc..) How do you add custom ones or does it generate them from the object supplied?

2. Can you add your own icon buttons to the existing toolbar?

Thanks 

[Jonesherine Stephen]

Hi Bryan, 

Thanks for contacting Syncfusion support 

Please find the response below: 

Query1: 1. Can the Gantt tree view grid display custom columns (including drop downs). I see mappings for some items (TaskIdMapping etc...) How do you add custom ones or does it generate them from the object supplied? 

Solution: Yes, we can render the custom column with dropdown edit in Gantt. We have prepared the work around rendered the Gantt with custom column using “load” client side event and also we can bind the drop down data by using “dropdownData” property. Please find the code example below: 

[aspx]     

 <ej:Gantt ID="Ganttcontainer" runat="server" Load="load"> 

        </ej:Gantt> 

        <script> 

            var dropDownDatasource = [ 

          { id: 1, text: "Value1", value: "Value1" }, 

          { id: 2, text: "Value2", value: "Value2" }, 

          { id: 4, text: "Value3", value: "Value3" }, 

          { id: 5, text: "Value4", value: "Value4" }, 

          { id: 6, text: "Value5", value: "Value5" }, 

          { id: 7, text: "Value6", value: "Value6" }, 

          { id: 8, text: "Value7", value: "Value7" } 

            ];             

            function load(args) { 

                //To load the custom columns in Gantt 

                var column = this.getColumns(), 

                    progressfield = {}, 

                customField = { 

                    field: "customColumn1", 

                    mappingName: "customColumn1", 

                    headerText: "Custom Column", 

                    dropdownData: dropDownDatasource, 

                    editType: "dropdownedit", 

                    editParams: { fields: { text: "text", value: "value" } }, 

                }; 

                column.splice(2, 0, customField); 

            } 

        </script>   

[aspx.cs]  

 

data.Add(new SelfData() 

                { 

                    Id = 1, 

                    Name = "Parent Task 1", 

                    StartDate = "02/23/2014", 

                    Duration = 5, 

                    PercentDone = 40, 

                    customColumn1="Value1", 

                    ParentId = null 

                });  

 

Query2:  Can you add your own icon buttons to the existing toolbar? 

Solution: In “create” client side event we can add the custom toolbar item in Gantt. 

We have prepared the work around and rendered the custom toolbar item and we can also bind the action to that item. Please find the code example below: 

<ej:Gantt ID="Ganttcontainer" runat="server"             

            Create="create">             

        </ej:Gantt> 

        <script>             

            function create(args) { 

                var toolbar = $("#Ganttcontainer_toolbarItems"); 

                //Toolbar item to be added    

                var toolbarItem = "<li><button title=" + "reload" + " class=" + "e-tooltxt " + " id=" + "Ganttcontainer_customicon" + " style=width:37px;height:20px;" + "><span id=customicon" + "></span>Reload</button></li>"; 

                //appending the new item to the existing toolbar    

                $($(toolbar).children()).append(toolbarItem); 

                $("#Ganttcontainer_customicon").click(function () { 

                    alert("We can bind custom action to Toolbar here") 

                }) 

            }                     

</script>     

We have prepared the sample based on this. Please find the sample from below location. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Customcolumn-Gantt-135511484 

Disclaimer: We have removed bin and obj folder in the given sample for some security reasons, we must include Syncfusion.EJ and Syncfusion.EJ.Web dlls to render the Gantt control which is available in Essential Studio installed location.  

Regards, 

Jone sherine P S