GridLookup

• May 08, 2023
• 2 minutes to read

The GridLookup editor allows end-users to select values from a dropdown grid containing lookup items. GridView is seamlessly embedded into the editor’s dropdown window, providing powerful and customizable data-processing/data-representation options for your lookups (such as sorting, grouping, multi-selection, filtering, templates, and more).

Run Demo: GridLookup Watch Video: DevExpress ASP.NET MVC: Grid Lookup Editor View Example: GridView - How to use GridLookup with single selection mode in EditForm View Example: GridView - How to use GridLookup in EditForm in multiple selection mode

Implementation Details

GridLookup is realized by the GridLookupExtension class. Its instance can be accessed via the ExtensionsFactory.GridLookup helper method, which is used to add the GridLookup extension to a View. This method’s parameter provides access to the GridLookup‘s settings implemented by the GridLookupSettings class, allowing you to fully customize the extension.

GridLookup‘s client counterpart is represented by the ASPxClientGridLookup object.

Declaration

GridLookup can be added to a view in the following manner.

Razor (View)

@Html.Partial("IndexPartial")

Razor (PartialView)

@Html.DevExpress().GridLookup(settings => {
    settings.Name = "gridLookup";
    settings.KeyFieldName="TagName";

    settings.CommandColumn.Visible = true;
    settings.CommandColumn.ShowSelectCheckbox = true;

    settings.Columns.Add("TagName");
    settings.Columns.Add("Rank").Settings.AllowAutoFilter = DefaultBoolean.False;

    settings.Properties.SelectionMode = DevExpress.Web.ASPxGridLookup.GridLookupSelectionMode.Multiple;
    settings.Properties.TextFormatString = "{0}";
    settings.Properties.MultiTextSeparator = ", ";
    settings.Properties.Width = 250;

    settings.GridViewProperties.CallbackRouteValues = new { Controller = "Home", Action = "IndexPartial" };
    settings.GridViewProperties.Settings.ShowFilterRow = true;
    settings.GridViewProperties.Settings.ShowStatusBar = GridViewStatusBarMode.Visible;
    settings.GridViewProperties.SetStatusBarTemplateContent(c => {
        ViewContext.Writer.Write("<div style=\"padding: 2px 8px 2px 0; float: right\">");
        Html.DevExpress().Button(btnSettings => {
            btnSettings.Name = "btnClose";
            btnSettings.UseSubmitBehavior = false;
            btnSettings.Text = "Close";
            btnSettings.ClientSideEvents.Click = "CloseGridLookup";
        }).Render();
        ViewContext.Writer.Write("</div>"); 
    });

    settings.DataBound = (sender, e) => {
        var gridLookup = (MVCxGridLookup)sender;
        gridLookup.GridView.Width = 250;
    };
}).BindToXML("~/App_Data/GridLookupData.xml", "//Tags/*").GetHtml()

Note

The Partial View should contain only the extension’s code.

C# (Controller)

public partial class HomeController : Controller {
    public ActionResult Index() {
        return View("Index");
    }
    public ActionResult IndexPartial() {
        return PartialView("IndexPartial");
    }
}

The image below illustrates the results.