ASP .NET MVC - Kendo Grid with in-cell Cascading DropDown List

2 posts, 0 answers
  1. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

    Posted 14 Aug 2017 Link to this post

    Hey there guys and girls, i am try to implement a cascading dropdown list in a grid. I want values in the second list to be dictated by the users choice from the first list and the third list should be dictated by the users choice from the second list. The examples i have seen online are not clear on how the filter fuctions are called, so i am quite confused and i don't know how to proceed. Here is my code.

    Here are the objects

    PlanScriptVM.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
     
    namespace P2I_UI.Models.ViewM
    {
        public class PlanScriptureVM
        {
            public int PlanScriptureID { get; set; }
     
            public int MaterialCategoryID { get; set; }
           // public virtual List<MaterialCategoryVM> Materials { get; set; }
     
            public int ProductID { get; set; }
           // public virtual List<ProductVM> Products { get; set; }
     
            public int ProductTypeID { get; set; }
           // public virtual List<ProductTypeVM> ProductTypes { get; set; }
            public int TotalCalculation { get; set; }
     
            public int AdultEOY { get; set; }
     
            public int YouthEOY { get; set; }
     
            public int ChildrenEOY { get; set; }
     
            public int TotalProjection { get; set; }
     
            public int AdultQ1 { get; set; }
     
            public int YouthQ1 { get; set; }
     
            public int ChildrenQ1 { get; set; }
     
            public int AdultQ2 { get; set; }
     
            public int YouthQ2 { get; set; }
     
            public int ChildrenQ2 { get; set; }
     
            public int AdultQ3 { get; set; }
     
            public int YouthQ3 { get; set; }
     
            public int ChildrenQ3 { get; set; }
     
            public int AdultQ4 { get; set; }
     
            public int YouthQ4 { get; set; }
     
            public int ChildrenQ4 { get; set; }
        }
    }

     

    MaterialCategory.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
     
    namespace P2I_UI.Models
    {
        public class MaterialCategory
        {
            public int MaterialCategoryID { get; set; }
            public string MaterialCategoryName { get; set; }
            public bool Active { get; set; }
        }
    }

     

    Products.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
     
    namespace P2I_UI.Models
    {
        public class Product
        {
            public int ProductID { get; set; }
            public string ItemNumber { get; set; }
            public int ProductTypeID { get; set; }
            public int MaterialCategoryID { get; set; }
            public bool Active { get; set; }
        }
    }

     

    ProductType.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
     
    namespace P2I_UI.Models
    {
        public class ProductType
        {
            public int ProductTypeID { get; set; }
            public string ProductTypeName { get; set; }
            public bool Active { get; set; }
        }
    }

     

    Controller

    using Kendo.Mvc.Extensions;
    using Kendo.Mvc.UI;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web.Mvc;
     
    namespace P2I_UI.Controllers
    {
        public class ScriptureController : Controller
        {
            readonly string defaultController = "PlanBudget";
            P2IApiActions actions = new P2IApiActions();
     
            public List<MaterialCategory> GetMaterial()
            {
                var materialCategories = new List<MaterialCategory>();
                materialCategories.Add(new MaterialCategory { MaterialCategoryID = 1, MaterialCategoryName="Bible", Active = true});
                materialCategories.Add(new MaterialCategory { MaterialCategoryID = 2, MaterialCategoryName = "E&D", Active = true });
                materialCategories.Add(new MaterialCategory { MaterialCategoryID = 3, MaterialCategoryName = "P&A", Active = true });
     
                return materialCategories;
            }
     
            public List<Product> GetProducts()
            {
                var products = new List<Product>();
     
                products.Add(new Product { ProductID = 1, ItemNumber = "B-ENG-6377", ProductTypeID = 1, MaterialCategoryID = 1, Active = true });
                products.Add(new Product { ProductID = 2, ItemNumber = "B-GER-6378", ProductTypeID = 1, MaterialCategoryID = 1, Active = true });
                products.Add(new Product { ProductID = 3, ItemNumber = "B-JAP-6379", ProductTypeID = 1, MaterialCategoryID = 1, Active = true });
                products.Add(new Product { ProductID = 4, ItemNumber = "ED-ENG-637", ProductTypeID = 2, MaterialCategoryID = 2, Active = true });
                products.Add(new Product { ProductID = 5, ItemNumber = "ED-GER-637", ProductTypeID = 2, MaterialCategoryID = 2, Active = true });
                products.Add(new Product { ProductID = 6, ItemNumber = "ED-JAP-637", ProductTypeID = 2, MaterialCategoryID = 2, Active = true });
                products.Add(new Product { ProductID = 7, ItemNumber = "PA-ENG-6377", ProductTypeID = 3, MaterialCategoryID = 3, Active = true });
                products.Add(new Product { ProductID = 8, ItemNumber = "PA-GER-6378", ProductTypeID = 3, MaterialCategoryID = 3, Active = true });
                products.Add(new Product { ProductID = 9, ItemNumber = "PA-JAP-6379", ProductTypeID = 3, MaterialCategoryID = 3, Active = true });
     
                return products;
            }
     
            public List<ProductType> GetProductTypes()
            {
                var productTypes = new List<ProductType>();
                productTypes.Add(new ProductType { ProductTypeID = 1, ProductTypeName = "Bible ER", Active = true });
                productTypes.Add(new ProductType { ProductTypeID = 2, ProductTypeName = "EngDan Bible ED", Active = true });
                productTypes.Add(new ProductType { ProductTypeID = 3, ProductTypeName = "PriAud Bible PA", Active = true });
     
                return productTypes;
            }
            // GET: Scripture
            public PartialViewResult Index()
            {
                return PartialView();
            }
     
            public ActionResult Scripture_Read([DataSourceRequest]DataSourceRequest request)
            {
                TempData["MaterialList"] = GetMaterial();
                TempData["ProductList"] = GetProducts();
                TempData["PrductTypeList"] = GetProductTypes();
     
                ViewBag.MaterialsList = new SelectList(GetMaterial().OrderBy(m => m.MaterialCategoryID), "MaterialCategoryID", "MaterialCategoryName");
                ViewData["MaterialsList"] = new SelectList(GetMaterial().OrderBy(m => m.MaterialCategoryID), "MaterialCategoryID", "MaterialCategoryName");
                ViewBag.ProductsList = new SelectList(GetProducts().OrderBy(p => p.ProductID), "ProductID", "ItemNumber");
                ViewBag.PrductTypesList = new SelectList(GetProductTypes().OrderBy(pt => pt.ProductTypeID), "ProductTypeID", "ProductTypeName");
     
                var result1 = new List<PlanScriptureVM>();
     
                return Json(result1.ToDataSourceResult(request));
            }
     
            public JsonResult GetProducts(int materialCategoryId)
            {
                var products = GetProducts();
     
                var filteredProduct = products.Where(mcid => mcid.MaterialCategoryID == materialCategoryId);
     
                return Json(filteredProduct, JsonRequestBehavior.AllowGet);
            }
     
            public JsonResult GetProductTypes(int productTypeId)
            {
                var productTypes = GetProductTypes();
     
                var filteredProductTypes = productTypes.Where(ptid => ptid.ProductTypeID == productTypeId);
     
                return Json(filteredProductTypes, JsonRequestBehavior.AllowGet);
            }
        }
    }

     

    And finally the Index.cshtml

    @(Html.Kendo().Grid<P2I_UI.Models.ViewM.PlanScriptureVM>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Group(ScriptureGroup => ScriptureGroup
                   .Title("Scriture")
                   .Columns(dd => {
                       dd.ForeignKey(e => e.MaterialCategoryID, (SelectList)ViewBag.MaterialsList).Title("Type").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });//.EditorTemplateName("MaterialCategoryID");
                       dd.ForeignKey(e => e.ProductID, (SelectList)ViewBag.ProductsList).Title("Item No").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });//;.EditorTemplateName("ProductID");
                       dd.ForeignKey(e => e.ProductTypeID, (SelectList)ViewBag.PrductTypesList).Title("Descript").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });//.EditorTemplateName("ProductTypeID");
     
                   })
            );
            columns.Group(OuterProjGroup => OuterProjGroup
                   .Title("Proj.")
                   .Title("EOY Inv")
                   .Columns(opg => {
                       opg.Bound(e => e.TotalCalculation).Title("Total Calc").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });
                   })
             );
            columns.Group(OuterProjectedGroup => OuterProjectedGroup
                    .Title("Projected EOY.")
                    .Columns(optg => {
                        optg.Group(InnerProjectedGroup => InnerProjectedGroup
                            .Title("Inventory Assigned.")
                            .Columns(iptg =>
                            {
                                iptg.Bound(e => e.AdultEOY).Title("Adult").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });
                                iptg.Bound(e => e.YouthEOY).Title("Youth").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });
                                iptg.Bound(e => e.ChildrenEOY).Title("Children").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });
                            })
                         );
                    })
             );
            columns.Group(OuterProjGroup => OuterProjGroup
                   .Title("Proj.")
                   .Title("EOY Inv.")
                   .Columns(opg =>
                   {
                       opg.Bound(e => e.TotalProjection).Title("Total Proj").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });
                   })
             );
        })
        .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => {
                events.Error("error_handler");
            })
            .Model(model =>
            {
                model.Id(e => e.PlanScriptureID);
                model.Field(e => e.ProductTypeID).Editable(false);
            })
            .PageSize(5)
            .Create(read => read.Action("Scripture_Create", "Scripture"))
            .Read(read => read.Action("Scripture_Read", "Scripture"))
            .Update(read => read.Action("Scripture_Update", "Scripture"))
     
        )
    )
     
    <script type="text/javascript">
        function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function() {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            }
        }
     
        function getCurrentEditedModel() {
            var grid = $("#grid").data("kendoGrid");
            var editRow = grid.tbody.find("tr:has(.k-edit-cell)");
            return grid.dataItem(editRow);
        }
     
        function filterProducts() {
            var model = getCurrentEditedModel();
            return {
                materialCategoryId: model.MaterialCategoryID
            };
        }
     
        function filterProductTypes() {
            var model = getCurrentEditedModel();
            return {
                productTypeID: model.ProductTypeID
            };
        }
    </script>

     

     

    Thanks for the help

  2. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

    Posted 15 Aug 2017 in reply to Chinonso Link to this post

    You can go ahead and ignore this post, the problem has been solved.
Back to Top