aspnetmvc-16411-components-data-editors-extensions-gridlookup.md
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: GridLookupWatch Video: DevExpress ASP.NET MVC: Grid Lookup EditorView Example: GridView - How to use GridLookup with single selection mode in EditFormView Example: GridView - How to use GridLookup in EditForm in multiple selection mode
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.
GridLookup can be added to a view in the following manner.
@Html.Partial("IndexPartial")
@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.
public partial class HomeController : Controller {
public ActionResult Index() {
return View("Index");
}
public ActionResult IndexPartial() {
return PartialView("IndexPartial");
}
}
The image below illustrates the results.