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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Display in dropdownedit

Thread ID:

Created:

Updated:

Platform:

Replies:

141217 Nov 30,2018 01:25 AM UTC Nov 30,2018 11:52 AM UTC ASP.NET MVC - EJ 2 1
loading
Tags: Grid
Kenneth Tang
Asked On November 30, 2018 01:25 AM UTC

Dear all

We have create the following grid with dropdownedit

@{

    var DeptList = new Syncfusion.EJ2.DropDowns.DropDownList()

    {

        DataSource = ViewBag.DeptList,

        Query = "new ej.data.Query()",

        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "DE_CODE", Text = "DE_DESC" },

        AllowFiltering = false,

        ActionComplete = "actionComplete"

    };

    var PosiList = new Syncfusion.EJ2.DropDowns.DropDownList()

    {

        DataSource = ViewBag.PosiList,

        Query = "new ej.data.Query()",

        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "PO_CODE", Text = "PO_DESC" },

        AllowFiltering = false,

        ActionComplete = "actionComplete"

    };

}


 @Html.EJS().Grid("InlineEditing").DataSource(ds => ds.Url(@Url.Action("UserDatasource", "Master")).InsertUrl("/Master/UserInsert").RemoveUrl("/Master/UserDelete").UpdateUrl("/Master/UserUpdate").Adaptor("UrlAdaptor")).AllowSorting().Columns(col =>

{

    col.Field("ID").HeaderText("ID").Width("100").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

    col.Field("name").HeaderText("Name").Width("200").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();

    col.Field("passportNumber").HeaderText("passportNumber").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();

    col.Field("DE_CODE").HeaderText("Department").Width("300").EditType("dropdownedit").Edit(new { @params = DeptList }).Add();

    col.Field("PO_CODE").HeaderText("Position").Width("300").EditType("dropdownedit").Edit(new { @params = PosiList }).Add();

}).AllowFiltering().FilterSettings(filter =>

{

    filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel);

}).EditSettings(edit =>

{

    edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal).ShowDeleteConfirmDialog(true);

}).AllowPaging().Toolbar(new List<string>() { "Search" }).Toolbar(new List<string>() {

            "Add", "Edit", "Delete", "Update", "Cancel"

        }).Render()

<script>

       function actionComplete() {

            return false;

        }

    </script>


How could we show the dropdownlist description rather that display the code after retrieve the data?

Please advance, thx.


KennethT


Attachment: screen1_61c8156b.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 30, 2018 11:52 AM UTC

Hi Kenneth, 

Thanks for contacting Syncfusion support. 

As per your given detail we suspect that you want to show the text instead values for dropdownlist in grid edit form. We have shown the description instead of code by using the valueAccessor property of columns in Grid.  

In the below code example we have shown the description instead of showing code for “EmployeeID” column. 

[Index.cshtml] 

@{ 
    ViewBag.Title = "Grid UrlAdaptor"; 
    var DeptList = new Syncfusion.EJ2.DropDowns.DropDownList() 
    { 
        DataSource = ViewBag.dropdowndata, 
        Query = "new ej.data.Query()", 
        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "value", Text = "text" }, 
        AllowFiltering = false 
    }; 
} 
<div> 
    <B>Master Grid</B> 
@Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").UpdateUrl("/Home/Update").RemoveUrl("/Home/Delete").InsertUrl("/Home/Insert").Adaptor("UrlAdaptor"); }).AllowPaging(true).Width("auto").Columns(col => 
{ 
    col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Add(); 
    col.Field("EmployeeID").HeaderText("EmployeeID").ValueAccessor("DisplayDescription").EditType("dropdownedit").Edit(new { @params = DeptList }).Add(); 
     
     --- 
 
}).EditSettings(edit => { edit.AllowAdding(false).AllowEditing(true).AllowAdding(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string> { "Add","Edit","Delete","Update","Cancel"}).Render() 
</div> 
 
<script> 
    function DisplayDescription(field, data, column) { 
         
        var coldata = column.edit.params.dataSource; 
        for (var i = 0; i < coldata.length; i++) { 
            if (data.EmployeeID == coldata[i]['value']) 
                return coldata[i]['text']; 
        } 
    } 
    
</script> 


Refer the screen shot. 

 

We have prepared a sample and it can be downloadable in the below location. 



Regards, 
Thavasianand S. 


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