dropdown custom field for Gantt control

[Sam Nguyen]

Hello,

Can you help me how to create a custom field (dropdown) for Gantt control? I able to display the dropdown in edit mode, but couldn't populate remote data (json format)

Please help,

Thanks

[Mahalakshmi Karthikeyan]

Hi Sam,

Thanks for contacting Syncfusion support.

It is possible to load the custom drop down column with remote data in Gantt Control using “Load” client side event. Please refer the below code example for details.

<form id="form1" //…>

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

//…

Load="load">

</ej:Gantt> 

  <script type="text/javascript">          

            var projectResources = [

                { resourceId: 1, resourceName: "Project Manager" },

                { resourceId: 2, resourceName: "Software Analyst" },

                { resourceId: 3, resourceName: "Developer" },

                { resourceId: 4, resourceName: "Testing Engineer" }

            ];

            var resourceData = ej.DataManager(projectResources).dataSource.json;

           

            //To load resource from remote server

            //ej.DataManager({url:"http://(service url)"}); // drop down data in JSON format.

           

            function load(args) {

                var columns = this.getColumns();

                var columnData = {

                    field: "DropDown",

                    headerText: "DropDown",

                    mappingName: "DropDown",

                    editType: "dropdownedit",

                    dropdownData: resourceData,

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

                }

                columns.splice(2, 0, columnData);

            }

   </script>              

    </form>

Here we have referred the local ej.DataManager data as drop down data for custom column. Instead of the local data we can also pass the remote data in the ej.DataManager URL for oData as the drop down value. And which must be in JSON format. We have also prepared a sample based on this and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/118644/ze/GanttDropDown-1565092718

Regards,

Mahalakshmi K.

[Sam Nguyen]

Hello,

I tried your sample, but it uses static data...

Here is what I got: (sorry I couldn't find how to format code using this editor)

[WebMethod]

        [ScriptMethod(ResponseFormat=ResponseFormat.Json)]

        public static object dropdown()

        {

            // instantiate a serializer

            JavaScriptSerializer TheSerializer = new JavaScriptSerializer();

            List<myDropDown> resourceDetails = new List<myDropDown>();

            resourceDetails.Add(new myDropDown() { ddvalue = "1", ddtext = "Project Manager" });

            resourceDetails.Add(new myDropDown() { ddvalue = "2", ddtext = "Software Analyst" });

            resourceDetails.Add(new myDropDown() { ddvalue = "3", ddtext = "Developer" });

            resourceDetails.Add(new myDropDown() { ddvalue = "4", ddtext = "Testing Engineer" });

            var theJson = TheSerializer.Serialize(resourceDetails);

            return resourceDetails;

        }

Aspx page

   var dataManager = ej.DataManager({

                url: "http://localhost:64167/GanttSample.aspx/dropdown"                

            });

            console.log(dataManager.dataSource.json);

it returns empty Array[0]

I also tried with webservice (.asmx)

[Mahalakshmi Karthikeyan]

Hi Sam,

Sorry about the inconvenience caused.

It is possible to create a custom column with the resource data returned from the server using “load” client side event. Please refer the below code example for details.

[ASPX]

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

//…

Load="load">

<script type="text/javascript">

            function load(args) {

                $.ajax({

                    type: "POST",

                    url: "GanttSample.aspx/dropdown",

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    success: function (value) {

                        var obj = $("#Gantt").data("ejGantt");

                        var columns = obj.getColumns();

                        columns[2].dropdownData = value.d;                      

                    },

                });

                var obj = $("#Gantt").data("ejGantt");

                var columns = obj.getColumns();

                var columnData = {

                    field: "DropDown",

                    headerText: "DropDown",

                    mappingName: "DropDown",

                    editType: "dropdownedit",

                    dropdownData: null,

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

                }

                columns.splice(2, 0, columnData);

            }

          

   </script>       

[ASPX.cs]

public class myDropDown {

            public string ddvalue { get; set; }

            public string ddtext {get; set;}

        }

        [WebMethod]

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        public static IEnumerable<object> dropdown()

        {

            // instantiate a serializer

            JavaScriptSerializer TheSerializer = new JavaScriptSerializer();

            List<myDropDown> resourceDetails = new List<myDropDown>();

            resourceDetails.Add(new myDropDown() { ddvalue = "1", ddtext = "Project Manager" });

            resourceDetails.Add(new myDropDown() { ddvalue = "2", ddtext = "Software Analyst" });

            resourceDetails.Add(new myDropDown() { ddvalue = "3", ddtext = "Developer" });

            resourceDetails.Add(new myDropDown() { ddvalue = "4", ddtext = "Testing Engineer" });

            var resourceList = resourceDetails.ToList();

            var theJson = TheSerializer.Serialize(resourceDetails);

            return resourceList;

        }

In the view page we have created a new column in the load event and in the AJAX success method we have we have returned the resource data from server and passed it the newly derived column. We have also prepared a sample based on this, and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/120311/ze/WebMethod1281180747

Regards,

Mahalakshmi K.

[Sam Nguyen]

Thanks for your quick response.  Your solution work great! I got custom dropdown populate and save the value to sql database.

Now I am facing another problem which is the built-in Resource dropdown.  I can populate the Resource dropdown, but I couldn't save the values

The model that Gantt using:

public class TaskData

    {

      // ...

        public List<int> ResourceId { get; set; }        

        public List<ResourceObject> Resources { get; set; }

// ...

    }

public class ResourceObject

    {

        public int ResourceId { get; set; }

        public string ResourceName { get; set; }

    }

This is the update method, the "Task.ResourceId" always return array of 0 zeros

public void Update(TaskData Task)

        {

  

// ...

            con.Open();

            using (SqlCommand sqlCommand = new SqlCommand(cmdString, con))

            {

                sqlCommand.Parameters.AddWithValue("@TaskName", Task.TaskName);

                sqlCommand.Parameters.AddWithValue("@Duration", Task.Duration);

                sqlCommand.Parameters.AddWithValue("@StartDate", Task.StartDate);

                sqlCommand.Parameters.AddWithValue("@TaskId", Task.TaskId);

                sqlCommand.Parameters.AddWithValue("@EndDate", Task.EndDate);

                sqlCommand.Parameters.AddWithValue("@Progress", Task.Progress);

                sqlCommand.Parameters.AddWithValue("@DropDown", Task.DropDown);

                sqlCommand.Parameters.AddWithValue("@ResourceId", Task.ResourceId.Count == 0 ? "0" : string.Join(",",  Task.ResourceId.Select(r=> r)));

                if (Task.ParentId == null)

                {

                    sqlCommand.Parameters.AddWithValue("@ParentId", Task.ParentId).Value = "0";

                }

                else

                {

                    sqlCommand.Parameters.AddWithValue("@ParentId", Task.ParentId);

                }

                if (Task.Predecessor == null)

                {

                    sqlCommand.Parameters.AddWithValue("@Predecessor", Task.Predecessor).Value = "";

                }

                else

                {

                    sqlCommand.Parameters.AddWithValue("@Predecessor", Task.Predecessor);

                }

                sqlCommand.ExecuteNonQuery();

            }

           con.Close();

        }

after saving, the value for ResourceId (nvarchar50) column in db is 0,0 suppose to be 1,2

Thanks for your help

[Bharath Marimuthu]

Hi Sam,
Apologize for the delay.
We have prepared a Gantt sample for saving the changes done to the built-in resource column  in Gantt to the SQL database , we have made a conversion of the resource object to string datatype before saving it to the database. Please find the sample in the below link,
Sample : http://www.syncfusion.com/downloads/support/forum/120311/ze/GanttSample-1355668667
Please let us know if you need more information regarding this.
Thanks,
Bharath.

[Sam Nguyen]

Thanks for your sample file.  I think I found a bug that when you select a Task and use Edit button from Toolbar the resources would not pass to the code behind.  Inline edit works okay.

How do you do same thing for custom field dropdown? I cannot get custom dropdown to display text instead value and selected when in edit mode

Thank you

[Mahalakshmi Karthikeyan]

Hi Sam,

Sorry about the inconvenience caused.

Please find the response below,

Query 1:  I think I found a bug that when you select a Task and use Edit button from Toolbar the resources would not pass to the code behind.  Inline edit works okay.

Solution: We were able to reproduce the issue in dialog editing where the resource value return as object instead of integer. We have also logged an issue report regarding this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

But at present this requirement can be achieved using the below workaround. Please refer the below code example for details.

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

//…

ActionComplete="ActionComplete">

</ej:Gantt> 

<script type="text/javascript">

      // To update the database through dialog editing or tool bar editing

      function ActionComplete(args) {               

           if (args.requestType === 'outdent' || args.requestType === 'recordUpdate')                    

                    {

                    var arr = [];

                    var GanttObj = $("#Gantt").data("ejGantt");

                    var resource = args.data.item[GanttObj.model.resourceInfoMapping];

                    for (var i = 0; i < resource.length; i++) {

                        if (typeof resource[i] != "number") {

                            arr[i] = resource[i].ddvalue;

                        }

                    }

                    args.data.item[GanttObj.model.resourceInfoMapping] = arr;

                    PageMethods.UpdateIt(args.data.item);

                }

            }

Here we have reconstruct the object array into integer array of resource collection in the case of dialog editing.

Query 2: How do you do same thing for custom field dropdown? I cannot get custom dropdown to display text instead value and selected when in edit mode

Solution: Currently we can populate the drop down with the resource data in the custom field but if we want to show the resource names in the Gantt chart UI we must load the resource data from code behind.

Can you please share us your requirement about using the custom field for resource data? It will be helpful for us to serve you better.

We have also prepared a sample based on this and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/120311/ze/GanttSample-186110312

Regards,

Mahalakshmi K.

[Sam Nguyen]

Hello,

I took your sample project, and implemented Team dropdown in the Gantt chart.   I want display team's name on the column instead team's ID and save team's ID to the database.

In my sample attached, you can see the Team dropdown would not populate the team (if using TeamId as value in editParams)

Thank you for your supporting

Attachment: GanttSample_625921b0.zip

[Mahalakshmi Karthikeyan]

Hi Sam,

Sorry about the inconvenience caused.

We were also able to reproduce the issue while using id content for value field in the edit params for drop down column. But we can give work around for your requirement. Please refer the below code example for details.

function load(args) {

       //…

       var columns = obj.getColumns();

       var columnTeam = {

                    field: "TeamName",

                    headerText: "Team",

                    mappingName: "TeamName",

                    editType: "dropdownedit",

                    dropdownData: null,

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

                    showCheckbox: false }

        }

        columns.splice(3, 0, columnTeam);

}

function ActionComplete(args) {

//…

      if (args.requestType === 'outdent' || args.requestType === 'recordUpdate') {

          var arr = [];

          var GanttObj = $("#Gantt").data("ejGantt");

          var resource = args.data.item[GanttObj.model.resourceInfoMapping];

          for (var i = 0; i < resource.length; i++) {

               if (typeof resource[i] != "number" && typeof resource[i] != "string")

                    arr[i] = resource[i].ddvalue;

               else

                    arr[i] = resource[i];

           }

           var columns = GanttObj.getColumns();

           var dropDownData = columns[3].dropdownData;

           var field = args.data.item.TeamName;                   

           $.each(dropDownData, function (index) {

                if ($.trim(dropDownData[index].TeamName) == field)

                      args.data.item.TeamId = dropDownData[index].TeamId;

           });

           args.data.item[GanttObj.model.resourceInfoMapping] = arr;

           PageMethods.UpdateIt(args.data.item);

      }

}

Here we have given the work around for converting the team id depends on the team names returned from the code in action Complete. The sample includes both in built resource column and the custom drop down column for the team names.

We have also prepared the sample based on this and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/120311/ze/GanttSample-2057225768

We have also logged an issue report regarding this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,

Mahalakshmi K.