[Solved] Grid View - Inline Editing

[Nirav]

Hello all,

              I need some help. My requirement is that Telerik MVC Extension Grid with inline editing functionality. Grid has different type of column like, drop down list, text box. When i edit any records drop down not work proper. Here i attached screen shot. Please find attached image file and let me know asap solution.

Here below i shown my code which written in *.cshtml page,

@using System.Collections
@using Telerik.Web.Mvc.UI
@model IEnumerable<TelerikGridSample.Models.DbContex.Driver>
@{
    ViewBag.Title = "Driver";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
    GridEditMode mode = GridEditMode.InLine;
    GridButtonType type = GridButtonType.Image;
}
<h2>
    Driver</h2>
@(Html.Telerik().Grid(Model).Name("Driver").Columns(columns =>
{
    columns.Bound(o => o.DriverFirstName).Title("First Name").Width(100);
    columns.Bound(o => o.DriverLastName).Title("Last Name").Width(100);
    columns.ForeignKey(p => p.CompanyID, new SelectList((IEnumerable<JSIS.Models.DbContex.Company>)ViewData["Company"], "CompanyID", "CompanyName")).Width(100).Title("Company");
    columns.Command(commands =>
    {
        commands.Edit().ButtonType(type);
        commands.Delete().ButtonType(type);
    }).Width(60);
})
.DataKeys(keys => keys.Add(c => c.DriverID))
.ToolBar(commands => commands.Insert().ButtonType(type).ImageHtmlAttributes(new { style = "margin-left:0" }))

.DataBinding(dataBinding => dataBinding.Server()
.Select("EditingServerSide", "Driver", new { mode, type })
.Insert("Insert", "Driver", new { mode, type })
.Update("Save", "Driver", new { mode, type })
.Delete("DeleteFromGrid", "Driver", new { mode, type }))
.Editable(editing => editing.Mode(mode).DisplayDeleteConfirmation(true))
.Sortable()
.Pageable()
.Scrollable(p => p.Height(400))
)

and my controller side code listed in below,

using System.Data;
using System.Linq;
using System.Web.Mvc;
using System.Web.Routing;
using Telerik.Web.Mvc;
using Telerik.Web.Mvc.Extensions;
using Telerik.Web.Mvc.UI;
using TelerikGridSample.Models;
using TelerikGridSample.Models.DbContex;


namespace TelerikGridSample.Controllers.DriverCont
{
    public class DriverController : Controller
    {
        private JSISEntities1 db = new JSISEntities1();

        public ActionResult Index()
        {
            ViewData["Company"] = db.Companies.ToList();
            return View(db.Drivers.ToList());
        }

        public ActionResult GridFiltering(string startsWith, bool? showOrOption)
        {
            ViewData["startsWith"] = startsWith ?? "";
            ViewData["showOrOption"] = showOrOption ?? true;
            return View("Index", db.Drivers.ToList());
        }
        [GridAction]

        public ActionResult _GridFiltering()
        {
            return View(new GridModel<Driver>
            {
                Data = db.Drivers.ToList()
            });
        }

        public ActionResult EditingServerSide(GridEditMode? mode, GridButtonType? type)
        {
            ViewData["mode"] = mode ?? GridEditMode.InLine;
            ViewData["type"] = type ?? GridButtonType.Text;
            ViewData["Company"] = db.Companies.ToList();

            //  return View("Index", SessionDriverRepository.All());
            return View("Index", SessionDriverRepository.All());

        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Insert(GridEditMode mode, GridButtonType type)
        {
            ViewData["mode"] = mode;
            ViewData["type"] = type;

            ViewData["Company"] = db.Companies.ToList();

            //Create a new instance of the EditableProduct class.
            Driver product = new Driver();
            //Perform model binding (fill the product properties and validate it).
            if (TryUpdateModel(product))
            {
                //The model is valid - insert the product and redisplay the grid.
                SessionDriverRepository.Insert(product);
                //GridRouteValues() is an extension method which returns the
                //route values defining the grid state - current page, sort expression, filter etc.
                RouteValueDictionary routeValues = this.GridRouteValues();
                // add the editing mode to the route values
                routeValues.Add("mode", mode);
                return RedirectToAction("Index", routeValues);
            }
            //The model is invalid - render the current view to show any validation errors
            return View("Index", SessionDriverRepository.All());
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Save(int id, GridEditMode mode, GridButtonType type)
        {
            ViewData["mode"] = mode;
            ViewData["type"] = type;
            ViewData["Company"] = db.Companies.ToList();

            //Create a new instance of the EditableProduct class and set its ProductID property.
            Driver Driver = new Driver
            {
                DriverID = id
            };
            //Perform model binding (fill the product properties and validate it).
            if (TryUpdateModel(Driver))
            {
                //The model is valid - update the product and redisplay the grid.
                SessionDriverRepository.Update(Driver);
                //GridRouteValues() is an extension method which returns the
                //route values defining the grid state - current page, sort expression, filter etc.
                RouteValueDictionary routeValues = this.GridRouteValues();
                // add the editing mode to the route values
                routeValues.Add("mode", mode);
                return RedirectToAction("Index", routeValues);
            }
            //The model is invalid - render the current view to show any validation errors
            return View("Index", SessionDriverRepository.All());
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult DeleteFromGrid(int id, GridEditMode mode, GridButtonType type)
        {
            //Find a product with ProductID equal to the id action parameter
            Driver product = SessionDriverRepository.One(p => p.DriverID == id);
            RouteValueDictionary routeValues;
            if (product == null)
            {
                //A product with the specified id does not exist - redisplay the grid
                //GridRouteValues() is an extension method which returns the
                //route values defining the grid state - current page, sort expression, filter etc.
                routeValues = this.GridRouteValues();
                // add the editing mode to the route values
                routeValues.Add("mode", mode);
                // add button type to the route values
                routeValues.Add("type", type);
                return RedirectToAction("Index", routeValues);
            }

            //Delete the record
            SessionDriverRepository.Delete(product);
            routeValues = this.GridRouteValues();
            // add the editing mode to the route values
            routeValues.Add("mode", mode);
            // add button type to the route values
            routeValues.Add("type", type);
            //Redisplay the grid
            return RedirectToAction("Index", routeValues);
        }

        [HttpPost, ActionName("Delete")]
        public ActionResult DeleteConfirmed(int id)
        {
            Driver Driver = db.Drivers.Single(c => c.DriverID == id);
            db.Drivers.DeleteObject(Driver);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
}

              Thanks in advance.


Regards,
Nirav Parikh