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

Custom drop down list box

Thread ID:

Created:

Updated:

Platform:

Replies:

124975 Jul 12,2016 05:07 AM UTC Jul 13,2016 04:11 PM UTC ASP.NET MVC 1
loading
Tags: Gantt
Edmund Herbert
Asked On July 12, 2016 05:07 AM UTC

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 [Syncfusion]
Replied On 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 
[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. 
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. 


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

;