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. Image for the cookie policy date

Custom drop down list box

Hi Guys can you supply me an example of the following using the Gantt widget:

  • I need the task field to be a list box loaded using ajax (javascript) from the server.
  • I need a custom field (Job Number) also to be a list box loaded from server using ajax.

I am using code first Entity framework C# and MVC 5, these fields should use Json data from a controller to populate list boxes.

Thanks in advance

Edmund Herbert

1 Reply

JS Jonesherine Stephen Syncfusion Team July 13, 2016 04:11 PM UTC

Hi Edmund, 
Thanks for contacting Syncfusion support, 
Please find the response below 
By using load event we can render the custom columns in Gantt. 
And also we have bind the dropdown data to custom column by using ajax request. 
Please find the code snippet below 
.ClientSideEvents(eve => 
    function load(args) { 
        //To render the custom column for JobNumber 
        var col_collection = this.getColumns(); 
        var column1 = {}, column2 = {}, drop_data; 
        column1["editType"] = "dropdownedit"; 
        column1["field"] = "JobNumber"; 
        column1["headerText"] = "JobNumber"; 
        column1["mappingName"] = "JobNumber"; 
        column1["editParams"] = { fields: { text: "JobNumber", value: "JobNumber" } }; 
        //ajax to call the server method and to retrieve the data to client side 
            url: '@Url.Action("GetData", "Gantt")', 
            async: false, 
            type: "GET", 
            success: function (result) {                
                drop_data = result; 
            error: function () { 
                alert('A error'); 
        column1["dropdownData"] = drop_data; 
        col_collection.splice(1, 0, column1); 
         //To render the custom column for Task 
        column2["editType"] = "dropdownedit"; 
        column2["field"] = "Task"; 
        column2["width"] = "250px"; 
        column2["headerText"] = "Task"; 
        column2["mappingName"] = "Task"; 
        column2["dropdownData"] = drop_data; 
        column2["editParams"] = { fields: { text: "Task", value: "Task" } }; 
        col_collection.splice(1, 0, column2);       
Please find the below code snippet to render the data using Entity frame work  
public partial class GanttController : Controller 
        GanttDatabase2008Entities db = new GanttDatabase2008Entities(); 
        public ActionResult GanttFeatures() 
                    //To retrieve the data from Entity frame work 
            var gantt_data = db.GanttDatas.ToList(); 
            ViewBag.datasource1 = gantt_data; 
            return View(); 
        public ActionResult GetData() 
                     //To filter the custom columns from the Table 
            var TaskList = (from gantt in db.GanttDatas where gantt.JobNumber != null && gantt.Task !=null                                                      
                                select new values 
                                    JobNumber = gantt.JobNumber, 
                                    Task = gantt.Task 
            return Json(TaskList, JsonRequestBehavior.AllowGet);  
    public class values 
        public string JobNumber { get; set; } 
        public string Task { get; set; } 
We have also prepared a sample for your reference. Please find the sample in the following URL. 
Disclaimer: We have removed bin and obj folder in the given sample for some security reasons, we must include Syncfusion.EJ and Syncfusion.EJ.MVC dlls to render the Gantt control which is available in Essential studio installed location. 
Please let us know if you require further assistance on this. 
Jone Sherine .P.S. 

Live Chat Icon For mobile
Up arrow icon