Grid View for ASP.NET MVC - How to use a grid lookup control in multiple selection mode to edit grid data

This example demonstrates how to add a grid lookup control in multiple selection mode to the grid's edit form template.

Grid Lookup in multiple selection mode

Overview

The main idea is to use a column's GridViewColumn.SetEditItemTemplateContent method to add a grid lookup editor to the edit item template. In this example, the GridLookupProperties.SelectionMode property is set to Multiple.

Razor
settings.Columns.Add(col => {  
    col.FieldName = "TagIDs";  
    col.SetEditItemTemplateContent(container => {  
        Html.RenderAction("GridLookupPartial", new { CurrentID = DataBinder.Eval(container.DataItem, "ID") });  
    });  
});

Razor
@Html.DevExpress().GridLookup(settings => {  
    settings.Name = "TagIDs";  
    settings.Properties.TextFormatString = "{0}:{1}";  
    settings.Width = Unit.Pixel(400);  
    settings.GridViewProperties.CallbackRouteValues = new { Controller = "Home", Action = "GridLookupPartial", CurrentID = Model.ID };  
    <!-- ... -->  
    settings.Properties.SelectionMode = GridLookupSelectionMode.Multiple;  
}).BindList(ViewData["Tags"]).Bind(Model.TagIDs).GetHtml()

To validate edit values on the client side, pass a correct model instance to the PartialView.

C#
//HomeController.cs  
public ActionResult GridLookupPartial(int? CurrentID) {  
    ViewData["Tags"] = DataProvider.GetTags();  
    GridDataItem model = new GridDataItem() { ID = -1, TagIDs = new int[0] };  
    if (CurrentID > -1) {  
        model = DataProvider.GetGridData().Where(item => item.ID == CurrentID).FirstOrDefault();  
    }  
    return PartialView(model);  
}

Files to Review

HomeController.cs (VB: HomeController.vb)
GridLookupPartial.cshtml
GridViewPartial.cshtml

Documentation

DevexpressEditorsBinder - Support binding multiple values selected in MVC editor extensions to a Model's collection-type property

More Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

Controllers/HomeController.cs(vb)

C#
VB.NET

C#
using Ex_2.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Example.Controllers
{

    public class HomeController : Controller
    {
        public ActionResult Index()
        {

            return View();
        }

        public ActionResult GridViewPartial()
        {
            var model = DataProvider.GetGridData();
            return PartialView(model);
        }
        public ActionResult GridLookupPartial(int? CurrentID)
        {
            ViewData["Tags"] = DataProvider.GetTags();
            GridDataItem model = new GridDataItem() { ID = -1, TagIDs = new int[0] };
            if (CurrentID > -1)
            {
                model = DataProvider.GetGridData().Where(item => item.ID == CurrentID).FirstOrDefault();
            }
          
            return PartialView(model);
        }
        [HttpPost, ValidateInput(false)]
        public ActionResult GridViewUpdatePartial(GridDataItem item)
        {
            var model = DataProvider.GetGridData();
            if (ModelState.IsValid)
            {
                try
                {
                    DataProvider.UpdateGrid(item);
                }
                catch (Exception e)
                {
                    ViewData["EditError"] = e.Message;
                }
            }
            else
                ViewData["EditError"] = "Please, correct all errors.";
            return PartialView("GridViewPartial", model);
        }
        [HttpPost, ValidateInput(false)]
        public ActionResult GridViewInsertPartial(GridDataItem item)
        {
            var model = DataProvider.GetGridData();
            if (ModelState.IsValid)
            {
                try
                {
                    DataProvider.InsertGrid(item);
                }
                catch (Exception e)
                {
                    ViewData["EditError"] = e.Message;
                }
            }
            else
                ViewData["EditError"] = "Please, correct all errors.";
            return PartialView("GridViewPartial", model);
        }
        [HttpPost, ValidateInput(false)]
        public ActionResult GridViewDeletePartial(System.Int32 ID)
        {
            var model = DataProvider.GetGridData();

            if (ID >= 0)
            {
                try
                {
                    DataProvider.DeleteGrid(model.Where(x => x.ID == ID).FirstOrDefault());
                }
                catch (Exception e)
                {
                    ViewData["EditError"] = e.Message;
                }
            }
            return PartialView("GridViewPartial", model);
        }
    }
}

Visual Basic
Imports Microsoft.VisualBasic
Imports Ex_2.Models
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.Mvc

Namespace Example.Controllers

    Public Class HomeController
        Inherits Controller
        Public Function Index() As ActionResult

            Return View()
        End Function

        Public Function GridViewPartial() As ActionResult
            Dim model = DataProvider.GetGridData()
            Return PartialView(model)
        End Function
        Public Function GridLookupPartial(ByVal CurrentID? As Integer) As ActionResult
            ViewData("Tags") = DataProvider.GetTags()
            Dim model As New GridDataItem() With {.ID = -1, .TagIDs = New Integer(){}}
            If CurrentID > -1 Then
                model = DataProvider.GetGridData().Where(Function(item) item.ID.Equals(CurrentID)).FirstOrDefault()
            End If

            Return PartialView(model)
        End Function
        <HttpPost, ValidateInput(False)> _
        Public Function GridViewUpdatePartial(ByVal item As GridDataItem) As ActionResult
            Dim model = DataProvider.GetGridData()
            If ModelState.IsValid Then
                Try
                    DataProvider.UpdateGrid(item)
                Catch e As Exception
                    ViewData("EditError") = e.Message
                End Try
            Else
                ViewData("EditError") = "Please, correct all errors."
            End If
            Return PartialView("GridViewPartial", model)
        End Function
        <HttpPost, ValidateInput(False)> _
        Public Function GridViewInsertPartial(ByVal item As GridDataItem) As ActionResult
            Dim model = DataProvider.GetGridData()
            If ModelState.IsValid Then
                Try
                    DataProvider.InsertGrid(item)
                Catch e As Exception
                    ViewData("EditError") = e.Message
                End Try
            Else
                ViewData("EditError") = "Please, correct all errors."
            End If
            Return PartialView("GridViewPartial", model)
        End Function
        <HttpPost, ValidateInput(False)> _
        Public Function GridViewDeletePartial(ByVal ID As System.Int32) As ActionResult
            Dim model = DataProvider.GetGridData()

            If ID >= 0 Then
                Try
                    DataProvider.DeleteGrid(model.Where(Function(x) x.ID = ID).FirstOrDefault())
                Catch e As Exception
                    ViewData("EditError") = e.Message
                End Try
            End If
            Return PartialView("GridViewPartial", model)
        End Function
    End Class
End Namespace

Views/Home/GridLookupPartial.cshtml

Razor
@model Ex_2.Models.GridDataItem
@Html.DevExpress().GridLookup(settings => {
    settings.Name = "TagIDs";
    settings.Properties.TextFormatString = "{0}:{1}";
    settings.Width = Unit.Pixel(400);
    settings.GridViewProperties.CallbackRouteValues = new { Controller = "Home", Action = "GridLookupPartial", CurrentID = Model.ID };
    settings.ShowModelErrors = true;
    settings.KeyFieldName = "ID";
    settings.Properties.SelectionMode = GridLookupSelectionMode.Multiple;
    settings.Columns.Add("ID");
    settings.Columns.Add("Name");
}).BindList(ViewData["Tags"]).Bind(Model.TagIDs).GetHtml()

Views/Home/GridViewPartial.cshtml

Razor
@using Ex_2.Models

@Html.DevExpress().GridView(settings => {
    settings.Name = "GridView";
    settings.KeyFieldName = "ID";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
    
    settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "Home", Action = "GridViewUpdatePartial" };
    settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "Home", Action = "GridViewDeletePartial" };
    settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "Home", Action = "GridViewInsertPartial" };
    settings.CommandColumn.Visible = true;
    settings.CommandColumn.ShowEditButton = true;
    settings.CommandColumn.ShowNewButtonInHeader = true;
    settings.CommandColumn.ShowDeleteButton = true;
    settings.CustomColumnDisplayText = (s, e) =>
    {
        if (e.Column.FieldName == "TagIDs")
        {
            var tagIDs = (int[])e.Value;
            var text = DataProvider.GetTags().Where(t => tagIDs.Contains(t.ID)).
                Select(t => t.Name).DefaultIfEmpty().Aggregate((a, b) => a + ", " + b);
            e.DisplayText = text ?? string.Empty;
        }
    };
    settings.Columns.Add(col => {
        col.FieldName = "ID";
        col.EditFormSettings.Visible =  DefaultBoolean.False;
    });
    settings.Columns.Add(col => {
        col.FieldName = "TagIDs";
        col.SetEditItemTemplateContent(container => {
            Html.RenderAction("GridLookupPartial", new { CurrentID = DataBinder.Eval(container.DataItem, "ID") });
            
        });
    });

}).SetEditErrorText((string)ViewData["EditError"]).Bind(Model).GetHtml()

Artem (DevExpress Support)

last modified 2 years ago

Modified: May 3, 2023 11:19 AM

Platform: ASP.NET MVC

Product: MVC GridView

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.