Custom drop down list box

[Edmund Herbert]

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

[Jonesherine Stephen]

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 

[View] 

@(Html.EJ().Gantt("ganttsample2") 

// 

.ClientSideEvents(eve => 

                 eve.Load("load")) 

) 

<script> 

    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 

        

 $.ajax({ 

            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);       

    } 

</script> 

Please find the below code snippet to render the data using Entity frame work  

[Controller] 

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 

                                }).ToList(); 

            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. 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/mvcappsync766613118 

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. 

Regards, 

Jone Sherine .P.S.