We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Edit Dialog with dropdown

Thread ID:

Created:

Updated:

Platform:

Replies:

141841 Jan 7,2019 02:41 PM UTC Jan 8,2019 10:59 AM UTC ASP.NET MVC 1
loading
Tags: Grid
Ricardo
Asked On January 7, 2019 02:41 PM UTC

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 [Syncfusion]
Replied On January 8, 2019 10:59 AM UTC

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 
 
 
If above solution does not resolve your query, please get back to us with more details regarding your requirment. 
 
Regards, 
Vignesh Natarajan. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon