Display in dropdownedit

[Kenneth Tang]

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]

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/141217/ze/gridmvclocalization-2104394065.zip 

Regards, 

Thavasianand S.