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. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. Multiple select dropdown

Multiple select dropdown

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'},
        }
    },

},

7 Replies
SD Saranya Dhayalan Syncfusion Team November 5, 2019 08:47 AM UTC

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. 
  
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 


RN Razvan Nicolae November 5, 2019 09:25 PM UTC

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

PP Pooja Priya Krishna Moorthy Syncfusion Team November 6, 2019 11:01 AM UTC

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. 
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. 
 
Is this your requirement? Else share us in detail what you want to display in the dropdown?  
 
Thanks, 
Pooja Priya K 


RN Razvan Nicolae November 6, 2019 09:02 PM UTC

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

PP Pooja Priya Krishna Moorthy Syncfusion Team November 7, 2019 02:11 PM UTC

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. 
 
Regards, 
Pooja Priya K. 


RN Razvan Nicolae November 8, 2019 02:13 PM UTC

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


PP Pooja Priya Krishna Moorthy Syncfusion Team November 11, 2019 09:23 AM UTC

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. 


Loader.
Up arrow icon