Show ejDropdownList with multiple values or remote data source properly

[Oka Sugandi]

Dear syncfusion support,
I have a problem, I have an ejGrid, one of the column is ejDropdownList with foreign-key-value. I am able to use it properly if the dropdown is local-datasource and single-select (not multi-select). If the dropdown is multi-select, the display of the grid (the one before editing) is empty - because ejGrid cannot find the key (which is something like comma separated value) inside the foreign key dictionary. The problem same as if the datasource is remote server. The display won't come up, because ejGrid cannot find it.
Thank you for your kind assistance.

[Kuralarasan Muthusamy]

Hi Oka, 

Thanks for contacting Syncfusion support.  

We have analyzed your query and we couldn’t achieve your requirement by using foreign key value. Because we can select only one value in dropdown list by using foreign key value. But you want to select multiple values in dropdown list. So we suggest you to queryCellInfo event of the grid and editTemplate  to achievement. We also prepared the sample with your requirement. 

Please refer the following code example: 

<script type="text/javascript"> 

    $(function () { 

    $("#Grid").ejGrid({ 

 

        ...... 

 

        columns: [ 

            { 

                field: "RoleID", headerText: "RoleID", width: 80, dataSource: data1, 

 

                editTemplate: { 

 

                    ..... 

 

                }, 

            }, 

        ], 

        queryCellInfo: "queryCellInfo", 

    }); 

    }); 

 

    function queryCellInfo(args) { 

        if (args.column.field == "RoleID") { 

            var field = args.column.field, merge = false; preds = []; 

            var txt = args.data.RoleID.split(","); 

 

            //create a query 

            var predicate = new ej.Predicate(field, "equal", ej.parseInt(txt[0])); 

            for (var tx = 1; tx < txt.length; tx++) { 

                preds.push(new ej.Predicate(field, "equal", txt[tx])); 

                merge = true; 

            } 

            if (merge) { 

                preds.unshift(predicate); 

                predicate = ej.Predicate.or(preds); 

            } 

            //filter the dataSource 

            var datas = ej.DataManager(args.column.dataSource).executeLocal(new ej.Query().where(predicate)); 

            var str = ""; 

            for (var s = 0; s < datas.length; s++) { 

                str = s == 0 ? str.concat(datas[s].Role) : str.concat("," + datas[s].Role) 

            } 

            $(args.cell).text(str); 

        } 

    } 

 

</script> 

 

Please refer the following link to sample: 

https://jsplayground.syncfusion.com/scfi0xiy 

Please refer the following link to know about queryCellInfo: 

https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo 

Please refer the following link to know about editTemplate: 

https://help.syncfusion.com/js/grid/editing#cell-edit-template 

If you need further assistance please get back to us, 

Regards, 

Kuralarasan M.