1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How to bind and select the default values to multi select drop down list.

How to bind and select the default values to multi select drop down list.

I have a multi-select drop-down list inside the grid view. It's loading fine. I have roles ids in the form of an array. I need to show the values in the dropdown list.


I need to display the roles when selecting the row from grid.

Code:
 var roles = [
        {
            "RoleId": 1,
            "RoleName": "General User"
        },
        {
            "RoleId": 2,
            "RoleName": "Talent Lead"
        },
        {
            "RoleId": 3,
            "RoleName": "Technical Mentor"
        },
        {
            "RoleId": 4,
            "RoleName": "Market Lead"
        },
        {
            "RoleId": 5,
            "RoleName": "System Admin"
        }
    ];

        var elem;
        var multiselect;

    function create() {
        
            elem = document.createElement('input');
            return elem;
        }
    function read() {
                   return multiselect.value.join(',');
        }
    function write(args) {
       
            multiselect = new ej.dropdowns.MultiSelect({
                dataSource:roles,
                placeholder: "Role(s)",
                fields: { text: "RoleName", value: "RoleId" }
                
            });
            multiselect.appendTo(elem);
        }

Question:
1. How to load the roles in the pop-up.




3 Replies 1 reply marked as answer
TS Thiyagu Subramani Syncfusion Team November 13, 2020 01:18 AM UTC

Hi Sarvana, 

Thanks for contacting Syncfusion support. 

Query: How to load the roles in the pop-up. 
 
We have checked your query and you want to render multiselect component as edit template in the Dialog edit mode of the EJ2 Grid component. Based on that we have prepared sample. In that prepared sample we have used the edit mode as Dialog and rendered the MultiSelect component as edit template. 

We have also used the text and Id values as datsource to display based on your requirement. For your convenience we have attached the sample. So please refer the sample for your reference.  

Code Example: 
Index.cshtml 

@Html.EJS().Grid("SelectionAPI").DataSource((IEnumerable<object>)ViewBag.datasource).AllowSelection().Columns(col => 
{ 
  col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
  col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 
  col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
  col.Field("CountryCode").HeaderText("Code").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("300").Add(); 
 
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
<script> 
 
    var elem; 
    var multiselect; 
    var arr = []; 
    var datas = [{ country: "Germany", ID: 1 }, 
                 { country: "England", ID: 5 }, 
                 { country: "Canada", ID: 7 }, 
                 { country: "Brazil", ID: 8}]; 
 
    function create() { 
        elem = document.createElement('input'); 
        return elem; 
    } 
    function destroy() { 
        multiselect.destroy(); 
    } 
    function read() { 
        return multiselect.value.join(','); 
    } 
    function write(args) { 
        arr = args.rowData["CountryCode"].split(","); 
        multiselect = new ej.dropdowns.MultiSelect({ 
            dataSource: datas, 
            fields: { text: 'country', value: 'ID' }, 
            value: Array.isArray(args.rowData.CountryCode) ? args.rowData.CountryCode : arr 
        }); 
        multiselect.appendTo(elem); 
    } 
 
</script> 




Regards, 
Thiyagu S 


Marked as answer
SA Sarvana November 13, 2020 12:42 PM UTC

Hello,

I have already tried with the mentioned code samples, I didn't get through it.

PK Prasanna Kumar Viswanathan Syncfusion Team November 16, 2020 09:12 AM UTC

Hi Sarvana, 
 
Based on your update that the provided code example is not working fine at your end. In our code example we have split the value from the arguments and assigned to the value API of the multiSelect dropdown, but in your code example we did not find any code related to the assigned value. 
 
Please find the code example:  
 
  function destroy() {  
        multiselect.destroy();  
    }  
    function read() {  
        return multiselect.value.join(',');  
    }  
    function write(args) {  
        arr = args.rowData["CountryCode"].split(",");  
        multiselect = new ej.dropdowns.MultiSelect({  
            dataSource: datas,  
            fields: { text: 'country', value: 'ID' },  
            value: Array.isArray(args.rowData.CountryCode) ? args.rowData.CountryCode : arr  
        });  
        multiselect.appendTo(elem);  
    } 
 
 
Please use the above code example and if you still face the same issue, please share the following details 
 
1. Share the complete Grid rendering code. 
 
2. Have you faced any script error at your end? If yes, share the screenshot and stackrace of an issue. 
 
3. Share the video demonstration of an issue. 
 
4. Syncfusion Package Version. 
 
5. If possible please replicate the issue in the attached sample. 
 
Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon