DevExtreme dxGrid lookup column form display id instead of DisplayExpr

Question

I am using DevExtreme dxGrid to display and edit data for users, and I have a lookup column to chose the user department. The data display in grid correctly but after I press the edit button and the popup form show up the lookup field display the id value of the department, not the value specified in DisplayExpr, but when I click the dropdown the values displayed correctly.

I have searched a lot on the DevExpress site and tried everything they said about type mismatch between the data source and JS and nothing works.

The cshtml code:

 @(Html.DevExtreme().DataGrid().ID("gridContainer")
            .DataSource(d => d.WebApi().Controller("UsersApi").Key("Id").LoadAction("GetUsers").UpdateAction("Put"))
            .AllowColumnReordering(true)
            .AllowColumnResizing(true)
            .ColumnAutoWidth(true)
            .ColumnChooser(c => c.Enabled(true))
            .GroupPanel(groupPanel => groupPanel.Visible(true))
            .OnToolbarPreparing("OnToolbarPreparing")
            .OnEditorPreparing("OnEditorPreparing")
            .Editing(e =>
            {
                e.AllowUpdating(true);
                e.Mode(GridEditMode.Popup);
            })
            .Columns(c =>
            {
                c.Add().DataField("IsActive").Caption("Active").Width("100");
                c.Add().DataField("UserName").Caption("Username").Width("120").AllowEditing(false);
                c.Add().DataField("FullName").Caption("Full Name").Width("200");
                c.Add().DataField("Email").Width("250");
                c.Add().DataField("CreatedUtc")
                    .Caption("Created")
                    .DataType(GridColumnDataType.Date)
                    .CellTemplate(new JS("created_CellTemplate"))
                    .Visible(false)
                    .ShowInColumnChooser(true)
                    .AllowEditing(false)
                    .Width("80");
                c.Add().DataField("CreatedBy").Caption("Created By").Visible(false).ShowInColumnChooser(true).AllowEditing(false).Width("120");

                c.Add().DataField("LastAccessStr")
                    .Caption("Latest Access")
                    .CellTemplate(new JS("latestAccess_CellTemplate"))
                    .CalculateSortValue("LastAccessUtc")
                    .SortOrder(SortOrder.Desc)
                    .AllowEditing(false)
                    .Width("120");

                c.Add().DataField("LastLoginStr")
                    .Caption("Latest Login")
                    .CellTemplate(new JS("latestLogin_CellTemplate"))
                    .CalculateSortValue("LastLoginUtc")
                    .AllowEditing(false).Visible(false).ShowInColumnChooser(true)
                    .Width("120");
                c.Add().DataField("LastLoginIP").Caption("Latest Login IP").AllowEditing(false).Width("150");
                c.Add().DataField("PhoneNumber").Caption("Phone").Width("150").Visible(false).ShowInColumnChooser(true);
                c.Add().DataField("Role").Width("200");
                c.Add().DataField("DepartmentId").Caption("Department").Width(200).Lookup(
                    lookup => lookup
                    .DataSource(d => d.WebApi()
                    .Controller("DepartmentsApi")
                    .LoadAction("GetDepartment")
                    .Key("Id"))
                    .DisplayExpr("Name")
                    .ValueExpr("Id")

               );
            })
            .Summary(c =>
            {
                c.TotalItems(cc => cc.Add().Column("UserName").SummaryType(SummaryType.Count));
            })
            .Paging(paging => paging.PageSize(25))
            .Pager(pager =>
            {
                pager.ShowPageSizeSelector(true);
                pager.AllowedPageSizes(new List<int> { 10, 25, 50 });
                pager.ShowInfo(true);
            })
            .FilterRow(filterRow => filterRow
                .Visible(false)
                .ApplyFilter(GridApplyFilterMode.Auto)
            )
            .SearchPanel(searchPanel => searchPanel
            .Visible(true)
            .Width(240)
            .Placeholder("Search...")
        )

        .RowAlternationEnabled(true)
        .OnCellPrepared("cell_prepared")
)


<script>
    function created_CellTemplate(cellElement, cellInfo) {

        var tipid = cellInfo.data.Id;
        var sitetextid = cellInfo.data.Id + "s";

        $("<div id=" + tipid + "></div><div id=" + sitetextid + "><div>").text(cellInfo.data.ElapsedTime).appendTo(cellElement);

        $("#" + tipid).dxTooltip({
            target: "#" + sitetextid,
            showEvent: "dxhoverstart",
            hideEvent: "dxhoverend",
            position: "top",
            contentTemplate: function (contentElement) {

                var utcDate = new Date(cellInfo.data.CreatedUtc);
                contentElement.html("<b>" + convertUtcToLocal(utcDate) + "</b>");
            }
        });
    }

    function last_CellTemplate(cellElement, cellValue, cellDisplayValue, tipId, cellTextId) {
        if (cellDisplayValue === 'N/A') {
            $("<div id=" + tipId + "></div>").text(cellDisplayValue).appendTo(cellElement);
        } else {
            $("<div id=" + tipId + "></div><div id=" + cellTextId + "><div>").text(cellDisplayValue).appendTo(cellElement);
            $("#" + tipId).dxTooltip({
                target: "#" + cellTextId,
                showEvent: "dxhoverstart",
                hideEvent: "dxhoverend",
                position: "top",
                contentTemplate: function (contentElement) {
                    var utcDate = new Date(cellValue);
                    contentElement.html("<b>" + convertUtcToLocal(utcDate) + "</b>");
                }
            });
        }

    }

    function latestAccess_CellTemplate(cellElement, cellInfo) {
        var tipid = 'la_' + cellInfo.data.Id;
        var sitetextid = 'la_' + cellInfo.data.Id + "s";

        last_CellTemplate(cellElement, cellInfo.data.LastAccessUtc, cellInfo.data.LastAccessStr, tipid, sitetextid);
    }
    function latestLogin_CellTemplate(cellElement, cellInfo) {
        var tipid = 'll_' + cellInfo.data.Id;
        var sitetextid = 'll_' + cellInfo.data.Id + "s";

        last_CellTemplate(cellElement, cellInfo.data.LastLoginUtc, cellInfo.data.LastLoginStr, tipid, sitetextid);
    }

    function OnToolbarPreparing(e) {
        var dataGrid = e.component;
        var toolbarItems = e.toolbarOptions.items;

        toolbarItems.push({
            widget: 'dxButton',
            options: { icon: 'refresh', onClick: function () { dataGrid.refresh(); } },
            location: 'after'
        });

        toolbarItems.push({
            widget: 'dxButton',
            options: {
                icon: 'filter',
                hint: 'Show Filters',
                onClick: function (data) {
                    dataGrid.option('filterRow.visible', !dataGrid.option('filterRow.visible'));
                }
            },
            location: 'after'
        });

        toolbarItems.push({
            widget: 'dxButton',
            options: {
                icon: 'add',
                hint: 'New User',
                onClick: function (data) {
                    window.location.href = '/Admin/AddUser';
                }
            },
            location: 'after'
        });
    }

    function OnEditorPreparing(e) {
        if (e.dataField === 'Role') {
            e.cancel = true;
            var selectBox = $('<div id="role-editor"></div>').dxSelectBox({
                dataSource: "/Admin/GetAllRoles",
                value: e.value,
                onValueChanged: function (ev) {
                    e.setValue(ev.value);
                }
            });
            e.editorElement.html(selectBox);
        }
    }

    function cell_prepared(e) {
        if (e.rowType === "data" && e.column.command === "edit") {
            var isEditing = e.row.isEditing,
                $links = e.cellElement.find(".dx-link");

            $links.text("");

            if (isEditing) {
                $links.filter(".dx-link-save").addClass("dx-icon-save");
                $links.filter(".dx-link-cancel").addClass("dx-icon-revert");
            } else {
                $links.filter(".dx-link-edit").addClass("dx-icon-edit");
                $links.filter(".dx-link-delete").addClass("dx-icon-trash");
            }
        }
    }

</script>

The problem in the departmentId column.

The UsersApiController.cs code:

 public class UsersApiController : Controller
{
    private readonly UserManager<ApplicationUser> _userManager;
    private readonly IUnitOfWork _unitOfWork;

    public UsersApiController(UserManager<ApplicationUser> userManager, IUnitOfWork unitOfWork)
    {
        _userManager = userManager;
        _unitOfWork = unitOfWork;
    }

    [HttpGet]
    public async Task<IActionResult> GetUsers()
    {
        var users = new List<UserViewModel>();

        foreach (var user in _unitOfWork.ApplicationUsers.GetAll())
        {
            if (user.UserName.ToLower() == "admin")
                continue;
            var userRoles = await _userManager.GetRolesAsync(user);
            var userToAdd = new UserViewModel
            {
                Id = user.Id,
                UserName = user.UserName,
                FullName = user.FullName,
                Email = user.Email,
                IsActive = user.IsActive,
                PhoneNumber = user.PhoneNumber,
                CreatedUtc = user.CreatedUtc,
                ElapsedTime = DateHelper.GetElapsedTime(user.CreatedUtc),
                Role = user.Role,
                LastAccessUtc = user.LastAccess,
                LastAccessStr = DateHelper.GetElapsedTime(user.LastAccess),
                LastLoginIP = user.LastLoginIP,
                LastLoginUtc = user.LastLogin,
                LastLoginStr = DateHelper.GetElapsedTime(user.LastLogin),
                CreatedBy = user.CreatedByUsername,
                DepartmentId=user.DepartmentId
            };
            users.Add(userToAdd);
        }

        return Ok(users);
    }

The DepartmentsApiController.cs code:

 public class DepartmentsApiController : Controller
{
    private readonly UserManager<ApplicationUser> _userManager;
    private readonly IUnitOfWork _unitOfWork;

    public DepartmentsApiController(UserManager<ApplicationUser> userManager, IUnitOfWork unitOfWork)
    {
        _userManager = userManager;
        _unitOfWork = unitOfWork;
    }

    [HttpGet]
    public IActionResult GetDepartment()
    {
        var dep = _unitOfWork.DepartmentsRep.GetAll();

        return Ok(dep);
    }

Please note that the departmentId is of type Guid. I also tried replacing the Guid type with string type and the problem still the same. I also tried using int instead of Guid in the UsersApi and DepatementsApi and the problem still the same. I am trying this because in DevExpress site they said this problem because of type mismatch. I have included an image showing the problem.

Answer 1

First of all your sample code has some problems, your DepartmentsApiController inherits from Controller but returns Ok(), it should inherit from ApiController instead, second, your GetDepartment action returns a IActionResult, it should return a IHttpActionResult

---

Now after these considerations here is the answer to your question, the problem is on your GetDepartment Action, it looks like this

[HttpGet]
public IActionResult GetDepartment()
{
    var dep = _unitOfWork.DepartmentsRep.GetAll();

    return Ok(dep);
}

But should look like this

[HttpGet]
 public HttpResponseMessage GetDepartment(DataSourceLoadOptions oadOptions)
{
            var dep = _unitOfWork.DepartmentsRep.GetAll();

            return Request.CreateResponse(DataSourceLoader.Load(dep, loadOptions));
}

---

Here you can see a DevExpress official sample code

Razor

columns.Add()
            .DataField("ShipVia")
            .Caption("Shipping Company")
            .Lookup(lookup => lookup
                .DataSource(d => d.WebApi().Controller("GridData").LoadAction("ShippersLookup").Key("Value"))
                .ValueExpr("Value")
                .DisplayExpr("Text")
            );

API

[HttpGet]
public HttpResponseMessage ShippersLookup(DataSourceLoadOptions loadOptions)
{
            var lookup = from i in _nwind.Shippers
                         orderby i.CompanyName
                         select new
                         {
                             Value = i.ShipperID,
                             Text = i.CompanyName
                         };

            return Request.CreateResponse(DataSourceLoader.Load(lookup, loadOptions));
  }