Default selected item in drop down list in Grid

[Oka Sugandi]

Hi everyone, I have an ejGrid, with a number of columns of ejDropDownList (implemented via editTemplate).
1. I need some ways to make sure a new row (add), automatically choose an option in dropdownlist, so the value cannot be empty.
2. I have a row which already has values in there, when I start to edit the row, all the cell in the row (which is a dropdown), always show blank option, how to show the value already set before in the drop down?

Thank you for the help.
Best Regards.

[Farveen Sulthana Thameeztheen Basha]

Hi  Sugandi, 

Thanks for contacting syncfusion support. 

Query#1 :- I need some ways to make sure a new row (add), automatically choose an option in dropdownlist, so the value cannot be empty. 

We have created sample according to your requirement, please refer to the sample 

Sample Link:- https://jsplayground.syncfusion.com/gqusnfye 

In this sample, on the write event of the “editTemplate” property, we have  bound the dataSource for ejDropDownList in the form of text and value pairs. And we have get the value by using “selectItemsByIndices” property of ejDropDownList and assigned to it when the rowdata is empty. Thus we can get the dropdownlist with options when add the new row to the grid. 

Please refer to the API link:- 

https://help.syncfusion.com/api/js/ejdropdownlist#methods:selectitembyindices 

Please refer to the code example:- 

$(function () { 

        $("#Grid").ejGrid({ 

            // the datasource "window.gridData" is referred from jsondata.min.js 

            dataSource: window.gridData, 

            allowPaging: true, 

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, }, 

            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 

            columns: [ 

                     { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, 

                     { 

                         field: "CustomerID", headerText: 'Customer ID', 

                         editTemplate: { 

                             create: function () { return "<input>"; }, 

                             read: function (args) { 

                                 var data = args.ejDropDownList("getSelectedValue"); 

                                 if (!data) 

                                     return {}; 

                                 return data; 

                             }, 

                             write: function (args) { 

                                var val = ej.isNullOrUndefined(args.rowdata["CustomerID"]) ? "" : args.rowdata["CustomerID"]; 

                                 args.element.ejDropDownList({ 

                                     dataSource: window.gridData, 

                                     fields: { text: "CustomerID", value: "CustomerID" }, 

                                     width: "100%", 

                                     value: val 

                                 }); 

                                 var inst = args.element.ejDropDownList("instance"); 

                                 if (ej.isNullOrUndefined(args.rowdata["CustomerID"])) 

                                     inst.selectItemsByIndices("0"); 

                             } 

                         }, 

                         width: 90 

                     }, 

            ] 

        }); 

        

    }); 

2. I have a row which already has values in there, when I start to edit the row, all the cell in the row (which is a dropdown), always show blank option, how to show the value already set before in the drop down? 

For this query, we suggested you to ensure whether you have bound dataSource to the ejDropDownlist in the form of “text”and “value” pairs. Otherwise could you please share us the following details to find the cause of the issue. 

1. Share us the Grid code example.  

2. Screenshot/Video regarding that issue.  

3. Replication procedure of the issue. 

4. If possible, replicate the issue in the above sample and send us back. 

5.  Product version details. 

The provided details will helps us to analyze and provide you solution as early as possible.  

Regards, 

Farveen sulthana T 

[Oka Sugandi]

Thank you Basha, now I am grasping how editTemplate works.

I have further problem.
In your example, both text and value (of dropdown) are mapped to the same "CustomerId", so when getSelectedValue called within Read(), it returns the text. Now I need to implement that the text and value are different. Let say I have datasource like this: text = "ABC", value = 1; text = "DEF", value = 2; text = "ABC" (same as first), value = 3. If I still use getSelectedValue within Read(), then the cell will display as 1/2/3 (not ABC/DEF). If I changed it into getSelectedText, then the cell will display ABC/DEF (yea!), but... when I called args.rowdata["CustomerID"] within Write(), I got that text (I need the value not the text to proceed later).

So in short, I need to return the text in Read() so the cell will display the meaningful Text, but I need the args.rowdata["CustomerID"] save the value (I will use it later). I cannot proceed if the args.rowdata["CustomerID"] save the text not the value, because in my data source, its okay to have the same text but different value.

Thank you very much.

[Prasanna Kumar Viswanathan]

Hi Sugandi, 

Thanks for the Update. 

According to your requirement we suspect that you need ForeignKey column in grid. In this we can able to bind the datasource(var data = [{ text : "ABC", value : 1 }, { text : "DEF", value : 2 }, { text : "ABC", value : 3}];) for the foreign key column. In ForeignKey field that we have to mention the field(value) and in the ForeignKey value we have to mention the text(text).  

In ForeignKey column, when the grid is not in edit mode it displays the text value. When the cell is in editMode, the text values will be shown in dropdown. After editing the record, when we saving to the database the value can be saved and text will be shown in grid. 

Find the code example and sample:  

<script type="text/javascript"> 

 

        var data = [{ text : "ABC", value : 1 }, { text : "DEF", value : 2 }, { text : "ABC", value : 3}]; 

 

        $(function () { 

            $("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: [{ OrderID : 10248, CustomerID : 1 }, { OrderID : 10249, CustomerID : 2 }, { OrderID : 10250, CustomerID : 3 }], 

                --------------------------------- 

               columns: [ 

                         { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, 

                         { 

                             field: "CustomerID", headerText: 'Customer ID', foreignKeyField: "value", foreignKeyValue :"text", dataSource : data, width : 75, 

                             editTemplate: { 

                                 create: function () { return "<input>"; }, 

                                 read: function (args) { 

                                     var data = args.ejDropDownList("getSelectedValue"); 

                                     return data; 

                                 }, 

                                 write: function (args) { 

                                     var val = ej.isNullOrUndefined(args.rowdata["CustomerID"]) ? "" : args.rowdata["CustomerID"]; 

 

                                     args.element.ejDropDownList({ 

                                         dataSource: args.column[1].dataSource, 

                                         fields: { text: "text", value: "value" }, 

                                         width: "100%", 

                                         value: val 

                                     }); 

                                     ------------------ 

                                } 

                             }, 

                             width: 90 

                         }, 

                ] 

            }); 

        }); 

    </script> 

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

Regards, 

Prasanna Kumar N.S.V 

 

[Oka Sugandi]

Wow, your solution is working well!
Thank you for the support!

[Prasanna Kumar Viswanathan]

Hi Sugandi, 

We are happy to hear that the provided solution has been working fine at your end. 

Please let us know if you need any further assistance. 

Regards, 

Prasanna Kumar N.S.V 

[Oka Sugandi]

Hi all, the solution works perfect, but I have further problem.

1. If the drop down is not multiSelectMode, the solution is ok, but if the drop down is multiSelectMode, the "args.ejDropDownList("getSelectedValue")" returns a string with comma separated value, which -in my opinion- cannot be
 translated to the foreign key database... So the grid not showing the value (empty).. I have tried to modify the getSelectedValue to array of int, array of string, etc but still not succeeded.

2. Or... Is there some way to modify the string shown in the grid? My scenario is: I will parse CSV above myself, then search to the foreign key database, then I will show it to the grid. I see there is member called "format" and "template" but both of them not accepting a javascript function.

Thank you for the help.

[Vignesh Natarajan]

Hi Sugandi, 

We have analyzed your query and we have achieved your requirement through actionBegin and queryCellInfo event of the grid. 

Refer the below code snippet 

$(function () { 

            $("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: [{ OrderID : 10248, CustomerID : 1 }, { OrderID : 10249, CustomerID : 2 }, { OrderID : 10250, CustomerID : 3 }], 

                allowPaging: true, 

                actionBegin: "begin", 

                queryCellInfo:"queryCellInfo", 

 

                        . 

                        . 

                        . 

function begin(args) { // to split the values before saving in the dataSource 

            if (args.requestType == "save") { 

                var dropObj = $('#GridCustomerID').ejDropDownList("instance");  

                var selectedData = $('#GridCustomerID').ejDropDownList("getSelectedValue");  

                var dataAsArray = selectedData.split(',');  

                var val = [];  

                var employeeIds = [];  

                for (var i = 0; i < dataAsArray.length; i++) {  

                    val = ej.DataManager(dropObj.model.dataSource).executeLocal(new ej.Query().where("value", "equal", dataAsArray[i]));  

                    employeeIds.push(val[0]["value"]);  

                }  

                args.data.CustomerID = employeeIds.toString(); 

            }  

            

        } 

        function queryCellInfo(args) { // while rendering the grid customerid column, need to concatenate the values if the values are in multiple.  

 

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

                if (args.data.CustomerID.length > 1) { 

                    var employeeIds = args.data.CustomerID.split(','); 

                    var roles = []; 

 

                    for (var i = 0 ; i < employeeIds.length ; i++) { 

                        var datas = ej.DataManager(args.column.dataSource).executeLocal(new ej.Query().where("value", "equal", employeeIds[i])); 

                        roles.push(datas[0]["text"]) 

                    } 

                    $(args.cell).text(roles.toString()); 

                } 

            } 

 

        } 

    </script> 

Refer the below screenshot for the output 

 

 

For your convenience we have prepared a sample which can be downloaded from below link 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Html_Encode_Feature-5898497821545570515.zip  

Refer our online documentation for your reference 

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

Regards, 

Vignesh Natarajan 

[Oka Sugandi]

It works as expected!
Thank you for the help.

[Vignesh Natarajan]

Hi Sugandi, 

 

Thanks for the update. 

 

We are happy to hear that the provided solution has been working fine at your end.  

 

 

 

Please let us know if you need any further assistance.  

 

 

Regards,  

Vignesh Natarajan