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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Showing Custom data in the gantt

Thread ID:

Created:

Updated:

Platform:

Replies:

128462 Jan 24,2017 12:56 PM UTC Jan 25,2017 03:36 PM UTC ASP.NET Web Forms 1
loading
Tags: Gantt
Bryan Conlon
Asked On January 24, 2017 12:56 PM UTC

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 [Syncfusion]
Replied On January 25, 2017 03:36 PM UTC

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. 
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 


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.

Warning Icon 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.Close Icon

;