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>
