Setup MultiSelect Grouping Dropdown Control inside Grid

[Dan]

Hi team,

Is it possible to add multiselect grouping dropdown inside grid like this example?

https://ej2.syncfusion.com/aspnetmvc/MultiSelect/GroupingWithCheckBox#/material

Thanks

[Ajith Govarthan]

Hi Dan, 

Thanks for contacting Syncfusion support. 

Query: Is it possible to add multiselect grouping dropdown inside grid like this example? 

Based on your requirement we suspect that you want to render the multiselect dropdown as column template in  our EJ2 grid component. Based on that we have prepared sample and in that we have used the column template feature and appended the multiselect component in the ship city column using the queryCellInfo event. For your convenience we have attached the sample so please refer the sample for your reference. 

If you want to render the MultiSelect as edit template then we have shared the documentation for edit template also so please refer them for your reference. 

Code example: 

Index.cshtml 

<script> 

    var vegetableData = [ 

        { id: 'vegetable1', vegetable: 'Cabbage', category: 'Leafy and Salad' }, 

        { id: 'vegetable2', vegetable: 'Spinach', category: 'Leafy and Salad' }, 

        { id: 'vegetable3', vegetable: 'Wheat grass', category: 'Leafy and Salad' }, 

        { id: 'vegetable4', vegetable: 'Yarrow', category: 'Leafy and Salad' }, 

        { id: 'vegetable5', vegetable: 'Pumpkin', category: 'Leafy and Salad' }, 

        { id: 'vegetable6', vegetable: 'Chickpea', category: 'Beans' }, 

        { id: 'vegetable7', vegetable: 'Green bean', category: 'Beans' }, 

        { id: 'vegetable8', vegetable: 'Horse gram', category: 'Beans' }, 

        { id: 'vegetable9', vegetable: 'Garlic', category: 'Bulb and Stem' }, 

        { id: 'vegetable10', vegetable: 'Nopal', category: 'Bulb and Stem' }, 

        { id: 'vegetable11', vegetable: 'Onion', category: 'Bulb and Stem' } 

    ]; 

    function querycellInfo(args) { 

        if (args.column.headerText === "Ship City") { 

            var listObj = new ej.dropdowns.MultiSelect({ 

                dataSource: vegetableData, 

                allowFiltering: true, 

                enableGroupCheckBox: true, 

                mode: 'CheckBox', 

                fields: { text: 'vegetable', value: 'id', groupBy: 'category' }, 

                enableSelectionOrder: false, 

                // set placeholder to MultiSelect input element 

                placeholder: "Select games", 

                filterBarPlaceholder: "Search vegetables", 

                showSelectAll: true, 

            }); 

            listObj.appendTo(args.cell.querySelector('#select')); 

        } 

    } 

</script> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/multiselct_drp_down472516295.zip 

Documentation link:  

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#column-template 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/#cell-edit-template 

https://ej2.syncfusion.com/documentation/api/grid/#querycellinfo 

If the above solution doesn’t meet your requirement then please share the below details. 

1. Share the complete grid code example.
2. Share the screenshot of your requirement.
3. Share the Syncfusion package version.

Regards, 

Ajith G. 

[Dan]

Thanks that was I needed.

[Prasanna Kumar Viswanathan]

Hi Dan, 

 

Thanks for the update. 

 

We are happy to hear that your issue has been solved. 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Prasanna Kumar N.S.V