Dropdown List inside grid

[Bernard Jurlina]

Hello!

I need to set the dropdownlist datasource insinde the grid based on the two "outside" combobox.

Everything is working for the first time and I can save the data in the grid. The problem is when I want to edit the saved data. Then I get only one item in the dropdownlist to choose from although the datasource is set with the more than one item.

The problem is shown in the attached video.

This is the grid defintion:

And this is the js function:

Thanks!

Bernard.

Attachment: Debug1_6ee137e0.zip

[Ajith Govarthan]

Hi Bernard, 

 

Thanks for contacting Syncfusion support. 

 

Query: I need to set the dropdownlist datasource insinde the grid based on the two "outside" combobox. Everything is working for the first time and I can save the data in the grid. The problem is when I want to edit the saved data. Then I get only one item in the dropdownlist to choose from although the datasource is set with the more than one item 

 

Based on your query you are facing issues when setting the dataSource dynamically for the dropdown list. So, we have prepared sample in that we have rendered a ComboBox outside the Grid component.  

 

Using the selected value in the ComboBox, we have bound dataSource for the dropdown component in the actionComplete event while performing the add or edit operation, which works fine at our end without any mentioned issues. For your convenience we have attached the sample, please refer them for your reference. 

 

Code Example: 

Index.cshtml 

 

<div class="control-wrapper"> 

    <div id="default" style='padding-top:75px;'> 

        <ejs-combobox id="dataLen" dataSource="@ViewBag.data" width="150" placeholder="Select a game" popupHeight="220px"> 

        </ejs-combobox> 

    </div> 

</div> 

<ejs-grid id="Grid" allowPaging="true" actionComplete="actionComplete"  toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })"> 

       

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal" ></e-grid-editSettings> 

     

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Empolyee Name" foreignKeyValue="FirstName" dataSource="ViewBag.foreign" width="150"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

<script> 

    function actionComplete(args) { 

        if (args.requestType === "add" || args.requestType === "beginEdit") { 

 

            var editDropDown = document.getElementById("GridEmployeeID").ej2_instances[0]; 

            var externalDropdown = document.getElementById("dataLen").ej2_instances[0]; 

 

             

                var ajax = new ej.base.Ajax({ 

                    type: "POST", 

                    url: "/Home/getForeignData", 

                    contentType: "application/json", 

                    dataType: 'json', 

                }); 

            ajax.send().then(function (data) { 

                var length = parseInt(externalDropdown.value); 

                editDropDown.dataSource = data.slice(0, length); 

                }).catch(function (xhr) { 

                    console.log(xhr); 

                    

                }); 

 

        } 

    } 

</script> 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dynamic_drop_data-513002455.zip 

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G.