Edit Dialog with dropdown

[Ricardo]

Hi,

I have a grid with a edit button to a dialog template. 

On that dialog template i have some dropdown fields getting data from database. When the template appears i want to see the result from database and the possibility to choose another data (dropdown list). How can i do that?

In that moment i have the data (Mode, loca, eloca) but when i turn the field into Dropdown i lose the current data.

I want to show the data from DB and the possibility to choose another value from the dropdownlist.  

Attached my view and controller code.

Thanks,

BRegards,

Attachment: project_c664bf7c.zip

[Vignesh Natarajan]

Hi Ricardo, 

 

Thanks for using Syncfusion product. 

 

Query: In that moment i have the data (Mode, loca, eloca) but when i turn the field into Dropdown i lose the current data.I want to show the data from DB and the possibility to choose another value from the dropdownlist 

 

Form the given code example we found that you are converting the input elements from the Dialog template to the Dropdownlist by rendering it with different dataSource and field values. While rendering to dropdownlist you have given different values for text and value fields of the dropdownlist. In the dropdown, since you have given the value field as ID which is different from the Column field, the values are mismatched and the current data is not displayed. 

 

To avoid the mentioned issue we suggest you to give the same value for text and value fields of the dropdownlist.  

 

Please refer the below code example. 

 

 

@(Html.EJ().Grid<object>("StackedHeaderGrid") 

                .Datasource(datasource => datasource.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/Home/Update") 

                           .InsertURL("/Home/Insert").RemoveURL("/Home/Delete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 

                .ClientSideEvents(eve => { eve.ActionComplete("complete"); }) 

                .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"); }) 

 

                       -------- 

 

                .Columns(col => 

                { 

                    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 

                    col.Field("EmployeeID").HeaderText("EmployeeID").Width(80).Add(); 

                    col.Field("CustomerID").HeaderText("CustomerID").TextAlign(TextAlign.Right).Width(80).Add(); 

                    col.Field("ShipCity").HeaderText("Ship City").Width(110).Add(); 

                    col.Field("ShipCountry").HeaderText("Ship Country").Width(110).Add(); 

                })) 

 

<script id="template" type="text/template"> 

    <table cellspacing="10"> 

        <tr> 

            <td>Order ID</td> 

            <td> 

                <input id="OrderID" name="OrderID" disabled="disabled" value="{{:OrderID}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> 

            </td> 

            <td>Customer ID</td> 

            <td> 

                <input id="CustomerID" name="CustomerID" value="{{:CustomerID}}" class="e-field e-ejinputtext" style="width: 116px; height: 28px" /> 

            </td> 

        </tr> 

        <tr> 

            <td>Employee ID</td> 

            <td> 

                <input type="text" id="EmployeeID" name="EmployeeID" value="{{:EmployeeID}}" /> 

            </td> 

            <td>Ship City</td> 

            <td> 

                <input type="text" id="ShipCity" name="ShipCity" value="{{:ShipCity}}" /> 

            </td> 

        </tr> 

    </table> 

</script> 

<script> 

    function complete(args) { 

 

        var dataManagerEmp = ej.DataManager({ 

            url: "/Home/Employee", 

            adaptor: new ej.UrlAdaptor() 

        }); 

 

        var dataManagerCust = ej.DataManager({ 

            url: "/Home/Customer", 

            adaptor: new ej.UrlAdaptor() 

        }); 

 

        var dataManagerCity = ej.DataManager({ 

            url: "/Home/City", 

            adaptor: new ej.UrlAdaptor() 

        }); 

 

 

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

 

            $("#EmployeeID").ejDropDownList({ 

                dataSource: dataManagerEmp, 

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

            }); 

            $("#CustomerID").ejDropDownList({ 

                dataSource: dataManagerCust, 

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

            }); 

            $("#ShipCity").ejDropDownList({ 

                dataSource: dataManagerCity, 

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

            }); 

 

        } 

    } 

</script> 

 

For your convenience we have attached the sample which can be downloaded from below link 

 

Sample: http://www.syncfusion.com/downloads/support/forum/141841/ze/Grid_with_Dialogtemplate-961751404  

 

If above solution does not resolve your query, please get back to us with more details regarding your requirment. 

 

Regards, 

Vignesh Natarajan.