Editing Columns with Dropdown

[Lukas Knapp]

Hello!

I want to be able to edit some columns in my Gantt Chart with a Dropdown.
However, I seem to be unable to find any documentation on how to do that.
I've found a forum post on how to do that with the Grid Control, but that doesn't seem to work for the Gantt Column,
the Dropdown just stays empty if I follow the syntax in the forum post.

If I try different syntax, the Dropdown fills with all the different values that are present in the Gantt Tasks for that specific column.

Here's a condensed Version of one of the things I tried:

<e-gantt-column field="@nameof(TermineModel.Name)"

headerTemplate="#nameTemplate"

width="100"

editType="dropdownEdit"

edit="@(new { @params = new {

                                                  dataSource = new List<object>() { new { value = "test", text = "test" },new { value = "test2", text = "test2" } },

                                                  fields = new { text = "text", value = "value" }

                                                       } })">

</e-gantt-column>

Please Advise.

Thank you

[Lukas Knapp]

Update:

Found out that the method I was using is actually working.... Sort of.
Thing is, the Dropdown only works in the Edit Modal, not when trying to inline-edit in the columns.
I do want inline-editing though, so help is still appreciated.

[Pooja Priya Krishna Moorthy]

Hi Lukas, 

 

We can load the custom data in dropdown by using the edit.params property. While setting the data source using edit params, it is necessary to initialize the query property also. 

Please find the below code example. 

 

 

@{ 

 

    var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { 

        DataSource = new List<object>() { new { value = "test", text = "test" }, new { value = "test2", text = "test2" } }, 

        Query = "new ej.data.Query()", 

        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Text = "text", Value = "value" }, 

    }; 

} 

<ejs-gantt id='Gantt' dataSource="ViewBag.DataSource" > 

    //... 

   <e-gantt-columns> 

        //... 

        <e-gantt-column field="Custom" editType="dropdownedit" 

                        edit="new {@params = DropDownList }"> 

        </e-gantt-column> 

    </e-gantt-columns> 

</ejs-gantt> 

 

Sample – https://www.syncfusion.com/downloads/support/directtrac/general/ze/GanttSample2081661161 

Please get back to us if you require further assistance on this. 

Note: For security purpose, we have removed bin and obj folder in the shared sample. 

Regards, 

Pooja Priya K. 

[Lukas Knapp]

Hi!

After Setting the Query and explicitly creating instances of DropDownList and DropDownListFieldSettings instead of using anonymous types, it worked.

Thanks for the help!

Kind Regards

Lukas

[Pooja Priya Krishna Moorthy]

Hi Lukas, 

We are happy that your issue has been resolved. Please get back to us if you require further assistance on this. 

As always we will be happy to assist you. 

Regards, 

Pooja K. 

[Jesús Mostajo]

In relation with this thread, I would like add some question. I have this dropdownlist:

var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList()
    {
        DataSource = new List<object>() { new { value = "0", text = "Pendiente" }, new { value = "25", text = "Iniciado" }, new { value = "50", text = "Activo" }, new { value = "100", text = "Completado" }, new { value = "0", text = "Cancelado" } },
        Query = "new ej.data.Query()",
        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Text = "text", Value = "value" },
    };

and

<e-gantt-column field="progress" editType="dropdownedit" edit="new {@params = DropDownList }"></e-gantt-column>

In dialog mode, I change the dropdownlist and collect the value correctly on handler, but when the dialog shows the dropdownlist doesn't show the text equivalent to the value. For example value 50 generates this html:

<div class="e-float-input e-control-wrapper e-input-group e-ddl e-lib e-keyboard" tabindex="0" aria-disabled="false" aria-owns="projectGanttprogress_options" role="listbox" aria-haspopup="true" aria-expanded="false" aria-activedescendant="null" aria-labelledby="label_projectGanttprogress" aria-describedby="projectGanttprogress" style="width: 100%;">
<select aria-hidden="true" tabindex="-1" class="e-ddl-hidden" name="progress" id="projectGanttprogress_hidden">
<option selected="" value="50">null</option>
</select>
...



Any Idea?

[Monisha Sivanthilingam]

Hi Jesús,

We suspect that you are saying that after selecting a value for the Progress field using the dropdown list, then the selected value is not shown in the edit dialog. Please correct us if we are wrong in our understanding of your issue. We can resolve that issue by applying the valueAccessor to the Progress field. The below code snippets demonstrate the solution.

Index.cshtml

 

<e-gantt-column field="Progress" editType="dropdownedit" edit="new {@params = DropDownList }" valueAccessor="progressFormat"></e-gantt-column>

 

 

@{

    var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList()

    {

        DataSource = new List<object>() {

          new { value = "0", text = "Pendiente" },

          new { value = "25", text = "Iniciado" },

          new { value = "50", text = "Activo" },

          new { value = "100", text = "Completado" },

          new { value = "0", text = "Cancelado" }

        },

        Query = "new ej.data.Query()",

        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Text = "text", Value = "value" },

    };

    Object progressFormat = "progressFormat";

}

 

 

<script>

    function progressFormat(field, data, column) {

        return data[field];

    }

</script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/F1499861947734527

Please get back to us with further details if this is not the issue you reported.

Regards,

Monisha.

[Jesús Mostajo]

Thanks for your quickly response but the issue remains the same. 

You can testing with your example, when you load at first time, open any gantt task and you can view that dorpdownlist doesn't show text corresponding with its value.

Regards

Jesús Mostajo

[Monisha Sivanthilingam]

Hi Jesús,

We were able to replicate the issue you reported. We can resolve it by setting the value property for the dropdown list. We have achieved it by using the cell edit template. The below code snippets demonstrate the solution.

Index.cshtml

 

<e-gantt-column field="Progress" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"></e-gantt-column>

 

<script>

  var elem;

   var dropdownlistObj;

   var progressData = [{ value: "0", text:"Pendiente" },{ value:"25", text: "Iniciado" }, { value:"50", text:"Activo" }, { value: "100", text: "Completado" }, { value: "0", text: "Cancelado" }];

   function create(args) {

      elem = document.createElement('input');

      return elem;

   }

   function write(args) {

      dropdownlistObj = new ej.dropdowns.DropDownList({

         dataSource: progressData,

         fields: { text: 'text', value: 'value' },

         value: args.rowData[args.column.field],

         floatLabelType: 'Auto',

      });

      dropdownlistObj.appendTo(elem);

   }

   function destroy() {

      dropdownlistObj.destroy();

   }

   function read(args) {

      return dropdownlistObj.value;

   }

</script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/149986-847357406

Online Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/gantt/managing-tasks#cell-edit-template

Regards,

Monisha.

[Jesús Mostajo]

Hi Monisha,

Thanks for your response. This is applicable in cell editing mode but we also need it to work in Dialog editing. 

Is it possible?

Sorry for inconvenience

[Monisha Sivanthilingam]

Hi Jesús,

We have logged a bug report for the issue you have reported. You can track its status from the below feedback link.

Feedback: https://www.syncfusion.com/feedback/36354/unable-to-use-dropdown-edit-in-progress-column

The fix will be provided in the patch release scheduled for August 3, 2022.

We appreciate your patience until then.

Regards,

Monisha.

[Jesús Mostajo]

Thanks...

[Monisha Sivanthilingam]

Hi Jesús,

You are welcome.

We will intimate you once the issue is fixed.

Regards,

Monisha.

[Jesús Mostajo]

Hi Monisha,

I have updated to Syncfusion.EJ2AspNet.Core 20.2.0.43 and now it works well.

Thanks !!

[Monisha Sivanthilingam]

Hi Jesús,

You are welcome.

Please contact us if you require any further assistance.

Regards,

Monisha.