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

Cacading example

6 Answers 63 Views

DropDownList

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

Daniel asked on 14 Dec 2012, 08:04 AM

Hello again,
i have the kendo UI for MVC Q3 2012,but inside there is no example folder so i can view the full example for the cascading.
I tried to implement the scenario from the demo,the online example ,but for the moment,the second dropdownlist is not activating when i choose a category.
the cshtml look like this:
<p>
    <label for="categories">Categories:</label>
    @(Html.Kendo().DropDownList()
          .Name("categ")
          .OptionLabel("Select category...")
          .DataTextField("CategoryName")
          .DataValueField("CategoryID")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeCategories", "Controls");
              });
          })

    )
</p>
<p>
    <label for="products">Products:</label>
    @(Html.Kendo().DropDownList()
          .Name("produc")
          .OptionLabel("Select product...")
          .DataTextField("ProductName")
          .DataValueField("ProductID")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetCascadeProducts", "Controls")
                      .Data("filterProducts");
              }).ServerFiltering(true);
          })

          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("categ")


    )
<script type="text/javascript">
        function filterProducts() {

            return {
                categories: $("#categ").val()
            };
        }

    </script>

the Code in controller look like this:
public JsonResult GetCascadeCategories()
        {


            return Json(_categoryRepository.GetAll().Select(c => new { CategoryId = c.CategoryID, CategoryName = c.CategoryName }), JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetCascadeProducts(string categories)
        {

            var products = _productRepository.GetAll();

            if (!string.IsNullOrEmpty(categories))
            {
                products = products.Where(p => p.Category.CategoryName == categories);
            }

            return Json(products.Select(p => new { ProductID = p.ProductID, ProductName = p.ProductName }), JsonRequestBehavior.AllowGet);
        }

Or,can you send me a functional example taking data from a real database like Northwind.

Thanks in advance.

6 Answers, 1 is accepted

answered on 14 Dec 2012, 03:45 PM

Examples.zip

Hello Daniel,

I believe that the Examples folder is placed inside of the "%Installation Folder%\Telerik\Kendo UI for ASP.NET MVC Q3 2012\wrappers\aspnetmvc\Examples". For your convenience I have attahced the examples as an archive to this message.

All the best,
Georgi Krustev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 17 Dec 2012, 09:53 AM

I installed the product using the Telerik Control Panel,and in my \wrappers\aspnetmvc\ folder there are only 3 subfolders:\Binaries,\Editor Templates and \Legacy Templates.And with this i can only turn on or off the feature.can i unistall by turning off? or do i have to uninstall manually from Control Panel\Programs and features ?

Anyway the examples that you gave me,is what i want it,and i found my problem regarding cascading,also because is a complete example project,it will help me check my other problems from the grid that i posted.

Thank you for your feedback with the examples.

P.S:for any member who read this, my problem i think was a case-sensitive thing in the View.the controller return an anonymous type with a pair of {CategoryId,CategoryName},but in the view was .DataValueField("CategoryID") and the action didn't even execute.after correcting the AnonymousType to be just like in the view {CategoryID=p.CategoryID,...} it's ok.