This is a migrated thread and some comments may be shown as answers.

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

1 Answer 203 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chinonso
Top achievements
Rank 1
Chinonso asked on 14 Aug 2017, 09:58 PM

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

1 Answer, 1 is accepted

Sort by
0
Chinonso
Top achievements
Rank 1
answered on 15 Aug 2017, 06:27 PM
You can go ahead and ignore this post, the problem has been solved.
Tags
Grid
Asked by
Chinonso
Top achievements
Rank 1
Answers by
Chinonso
Top achievements
Rank 1
Share this question
or