Multiple select dropdown

[Razvan Nicolae]

Hello,

I tried to find an example with multiple select dropdown when editing a column but I couldn't find one, now I am using the code below, but I need to be able to select multiple data. Thank you!

{
    field: 'Tracker',
    headerText: 'Tracker',
    editType: 'dropdownedit', width: 150,
    edit: {
        params: {
            query: new ej.data.Query(),
            dataSource: ganttJSData.projectResources.taskTrackers,
            fields: {text: 'text', value: 'value'},
        }
    },

},

[Saranya Dhayalan]

Hi Razvan, 

 

Thank you for contacting Syncfusion support 

 

We can achieve your requirement by using edit template of the columns. By using this property, we can create custom editor for the columns. In the provided sample we have created multiselect dropdown for Tracker column. By using this property, we can select multiple items of dropdown data. We can also enable checkbox in the dropdown by setting the mode as CheckBox. Please find the below code example. 

 

 

  var ganttChart = new ej.gantt.Gantt({ 

      //... 

        columns: [ 

         //... 

            { 

                field: 'customColumn', headerText: 'Tracker', edit: { 

                    create: function () { 

                        elem = document.createElement('input'); 

                        return elem; 

                    }, 

                    read: function () { 

                        return multiSelectObj.value; 

                    }, 

                    destroy: function () { 

                        multiSelectObj.destroy(); 

                    }, 

                    write: function (args) { 

                        multiSelectObj = new ej.dropdowns.MultiSelect({ 

                            dataSource: tracker, 

                            fields: { text: 'Name' }, 

                            mode: 'CheckBox', 

                        }); 

                        multiSelectObj.appendTo(elem); 

                    } 

                } 

            }, 

        ], 

    }); 

 

For your convenience we have prepared a sample. Please find the below sample link. 

Sample - https://stackblitz.com/edit/sugbpg?file=index.js 

  

Could you please check the above sample and get back to us if you need any further assistance on this? 

  

 

Note: In forum you have mentioned component name as ejGantt this is EJ1 version (jQuery based) but provided code snippets are related to EJ2-Gantt (JavaScript based). 

Please confirm the Gantt version you are using and select the required platform while ask the query in forum. 

 

Regards, 

Saranya D 

[Razvan Nicolae]

Hello,

THANK YOU!!! This is great. Also if you click edit on the toolbar it doesn't show the dropdownCheckbox on the tracker in your example.

Another thing, how can I make it request with the Id not with the Name, but also after editing to still display the name

Thank you,

Razvan

[Pooja Priya Krishna Moorthy]

Hi Razvan, 

Please find the below response. 

S.No	Queries	Syncfusion Comments
1	Also if you click edit on the toolbar it doesn't show the dropdownCheckbox on the tracker in your example.	Currently we have support to render custom editor only for cell editing. We will consider this as a feature and we have logged a feature report for this. You can track its status from below feedback link.  Feedback – https://www.syncfusion.com/feedback/9980/provide-custom-editor-support-in-dialog-edit  We will implement this and include in our upcoming Volume 4, SP1 release which is expected to be rolled out in the month of January 2020.
2	how can I make it request with the Id not with the Name, but also after editing to still display the name	From your query we understand that, you want to display the Id in drop down and after selecting the Id, the respective names should be displayed in the cell. This can be achieved by using the fields property of MultiSelect control.  Please find the below code example.    var ganttChart = new ej.gantt.Gantt({      columns: [          //...      {      field: 'customColumn', headerText: 'Tracker', edit: {          //...        write: function (args) {          multiSelectObj = new ej.dropdowns.MultiSelect({               dataSource: tracker,               fields: { text: 'Id', value:'Name' },               mode: 'CheckBox',          });          multiSelectObj.appendTo(elem);        }       }     },    ],  });  Please find the below sample link.  Sample- https://stackblitz.com/edit/a7uux5?file=index.js    Is this your requirement? Else share us in detail what you want to display in the dropdown?

 

Thanks, 

Pooja Priya K 

[Razvan Nicolae]

Hello,

I want to display only the names in the dropdown, and when I edit it I want the request to send their id, I've done that, works but after I close the cellEditAction this is displayed:

and instead of showing the names it shows the id's.

Thank you,

Razvan

[Pooja Priya Krishna Moorthy]

Hi Razvan, 

To display the names in dropdown and in the cell, we can map the Name field in both text and value property of the fields complex property. On selecting the items select event gets triggered. In this event we can get the Id of the selected item from args.itemData. Please find the below code example. 

 

 

var ganttChart = new ej.gantt.Gantt({ 

   //... 

  columns: [ 

    { 

      field: 'customColumn', headerText: 'Tracker', edit: { 

       //... 

        write: function (args) { 

          multiSelectObj = new ej.dropdowns.MultiSelect({ 

            dataSource: tracker, 

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

            select: function(args){ 

              console.log(args.itemData.Id) 

            }, 

            mode: 'CheckBox' 

          }); 

          multiSelectObj.appendTo(elem); 

        }, 

      } 

    }, 

   //... 

  ], 

}); 

ganttChart.appendTo('#Editing'); 

 

Please find the below sample link. 

Sample  - https://stackblitz.com/edit/a445pt?file=index.js 

 

Regards, 

Pooja Priya K. 

[Razvan Nicolae]

Hello, now it displays it correctly, but I still have on problem the request sends the Name, not the Id. I know I can make a workRound and when doing the request to set there the ids, but isn't there a more straight method?

Thank you,

Razvan

[Pooja Priya Krishna Moorthy]

Hi Razvan, 

Can you please tell us in detail what do you mean by request to send their id. Do you mean while selecting the Names, the Id should display in the selected area as shown in the screenshot? 

 

By default, the value that is mapped to the fields.text property will be displayed in drop down, and also will be displayed in the cell while selecting. The value that is mapped to the fields.value property will be displayed after saving action. 

Regards, 

Pooja K.