Kendo UI Grid / Popup editing with selected droup down list field Using ASP.NET MVC.

Kendo UI Grid / Popup editing with selected droup down list field.

In order to get start with coding, please create a new ASP.NET MVC 4 Project using Visual Studio and choose Telerik Mvc web application . When the new project is created successfully, you can easily find "Model", "View" and "Controller" folders inside it.

     First of all, we will be creating a new domain model class inside the model folder say "ProductList.cs" as:   

 public class ProductList
    {

        public int ProductId { get; set; }

        public string Name { get; set; }

        public string Picture { get; set; }

        public decimal Price { get; set; }

        public string  CategoryName { get; set; }

        public int CategoryId { get; set; }

        public bool IsActive { get; set; }

        public bool Deleted { get; set; }

        public DateTime CreatedOnUtc { get; set; }

        public DateTime UpdatedOnUtc { get; set; }

    }

Now, its time to add controller class to your project. In controller folder, you will find two controller classes by default i.e. HomeController.cs and ValuesController.cs. Add a new controller "ProductController.cs" under "Controller" folder. Following will be the code for it.

 public class ProductController : Controller
    {

        #region - Action Method -
        //
        // GET: /Admin/Product/

        /// <summary>
        /// Get all product list
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            ViewBag.Categories = Categories(0);
            return View();
        }

        /// <summary>
        /// Get all active product list from database.
        /// </summary>
        /// <param name="Request">Data source read request </param>
        /// <returns> return all the active product.</returns>
        public ActionResult Read([DataSourceRequest]DataSourceRequest Request)
        {

            var Result = new M2CommerceDataContext();



            return Json(Result.Products.Where(x => x.IsActive == true && x.Deleted == false).Select(product => new ProductList
            {
                ProductId = product.ProductId,
                Name = product.Name,
                CategoryName = product.Category.Name,
                CategoryId = product.CategoryId,
                Price = product.Price.Value,
                Picture = product.Picture,
                CreatedOnUtc = product.CreatedOnUtc,
                UpdatedOnUtc = product.UpdatedOnUtc,
                IsActive = product.IsActive,
                Deleted = product.Deleted,

            }).OrderByDescending(x => x.ProductId).ToDataSourceResult(Request));

        }

        /// <summary>
        /// Get all the active category from database. 
        /// </summary>
        /// <param name="id">CategoryId</param>
        /// <returns>return all the active category.</returns>
        public List<CategoryList> Categories(int? id)
        {
            var Result = new M2CommerceDataContext();


            return Result.Categories.Where(x => x.IsActive == true && x.Deleted == false).Select(x => new CategoryList
            {
                Name = x.Name,
                CategoryId = x.CategoryId,


            }).ToList();



        }


        public ActionResult Update([DataSourceRequest]DataSourceRequest Request, ProductList model, HttpPostedFileBase Picture)
        {

            if (ModelState.IsValid)
            {
                using (var dbcontext = new M2CommerceDataContext())
                {

                    var existingdata = dbcontext.Products.Single(x => x.ProductId == model.ProductId);

                    existingdata.Name = model.Name;
                    existingdata.IsActive = model.IsActive;
                    existingdata.Deleted = model.Deleted;
                    existingdata.CategoryId = model.CategoryId;
                    existingdata.UpdatedOnUtc = DateTime.UtcNow;
                    dbcontext.SubmitChanges();
                }
            }

            return Json(new[] { model }.ToDataSourceResult(Request, ModelState));
        }
        #endregion

        #region - Pricate Method -

        public ActionResult RenderPhoto(int id)
        {
            var Result = new M2CommerceDataContext();

            string imageData = Result.Products.Single(x => x.ProductId == id).Picture;

            if (imageData != null)
            {
                return File("~/Uploads/" + imageData.ToString(), "image");
            }
            return null;


        }

        #endregion

    }

Now its time to create Popup view to your project. Add new view under the EditorTemplates forlder inside shared folder with the name as _Product.cshtml. Following will be the code for it.

@model M2Commerce.Models.ProductList
@{
    ViewBag.Title = "_Product";
   
}
@using Kendo.Mvc.UI;
<div class="editor-label">
    @(Html.LabelFor(model => model.Name))
</div>
<div class="editor-field">
    @(Html.TextBoxFor(model => model.Name, new { @class = "k-textbox" }))
    @Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
    @(Html.LabelFor(model => model.CategoryId))
</div>
<div class="editor-field">
    @Html.Kendo().DropDownListFor(x => x.CategoryId).BindTo(new SelectList(ViewBag.Categories, "CategoryId", "Name"))
    @(Html.HiddenFor(model => model.CategoryId, new { @id = "hdnCategory" }))
</div>
<div class="editor-label">
    @(Html.LabelFor(model => model.Price))
</div>
<div class="editor-field">
    @(Html.TextBoxFor(model => model.Price, new { @class = "k-textbox" }))
    @Html.ValidationMessageFor(model => model.Price)
</div>
<div class="editor-label">
    @(Html.LabelFor(model => model.Picture))
</div>
<div class="editor-field">
    <img src='@Url.Action("RenderPhoto", "Product", new { @id = "${ProductId}" }, @Request.Url.Scheme)' height="100" width="100" />
    @(Html.Kendo().Upload().ShowFileList(true).Name("Picture"))
    @Html.ValidationMessageFor(model => model.Picture)
</div>

Now create main view inside Product folder in view part as Index.cshtml.Following will be the code for it.

@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}
@using Kendo.Mvc.UI;
@using Kendo.Mvc.Extensions;
@using M2Commerce.Models;

<script type="text/javascript"> 
    var options = @(Html.Raw(Json.Encode(ViewData["Categories"])))

</script>
<div id="example">
    <section class="well">
                <h3 class="ra-well-title">Product List</h3>
                
                  @(Html.ActionLink("Create", "Create", "Product"))
    <div id="UserList">
    
   @(Html.Kendo().Grid<M2Commerce.Models.ProductList>()
    .Name("ProductGrid")
    .Columns(column =>
    {

        column.Bound(x => x.Name).Width(100);
        column.Bound(x => x.UpdatedOnUtc).Format("{0:d}").Width(100);
        column.Bound(x => x.Price).Width(100);
        column.Bound(x => x.CategoryName).Width(100);
        
        column.Command(command =>
        {
            command.Edit();
            command.Destroy();
        }).Title("Action")
        .Width(100);
    })
    .ToolBar(toolbar =>
    {

        toolbar.Create();
    })
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_Product"))
         .Scrollable()
        .Groupable()
        .Sortable()
                
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
                    .Model(model =>
                    {
                        model.Id(usr => usr.ProductId);
                        model.Field(usr => usr.ProductId).Editable(false);
                       
                      
                    }).PageSize(5)
                   .Read(read => read.Action("Read", "Product"))
                           .Update(update => update.Action("Update", "Product"))
                   .Create(create => create.Action("Create", "Product"))
                           .Destroy(delete => delete.Action("Delete", "Product"))
    ))
    </div></section>

</div>