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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Multiple select dropdown

Thread ID:

Created:

Updated:

Platform:

Replies:

148795 Nov 4,2019 09:30 PM UTC Nov 11,2019 09:23 AM UTC jQuery 7
loading
Tags: ejGantt
Razvan Nicolae
Asked On November 4, 2019 09:30 PM UTC

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


Razvan Nicolae
Replied On 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

Pooja Priya Krishna Moorthy [Syncfusion]
Replied On 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 


Razvan Nicolae
Replied On 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

Pooja Priya Krishna Moorthy [Syncfusion]
Replied On 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. 


Razvan Nicolae
Replied On 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


Pooja Priya Krishna Moorthy [Syncfusion]
Replied On 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. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon