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

Cascading DropDownListFor switch from serverfiltering true to false after load

1 Answer 784 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
daniel
Top achievements
Rank 1
daniel asked on 24 Sep 2019, 08:26 PM

Hi,

We have a custom popup grid editing form with cascading dropdowns, which use serverFiltering(true) and pass 3 parameters to the datasource read action.

The dropdown gets a set of items and we then want to use simple clientside filtering in the dropdown to help the users find what they want:

@(Html.Kendo().DropDownListFor(m => m.CodeId)
                                                            .OptionLabel("Select code ...")
                                                            .DataTextField("Description")
                                                            .DataValueField("Id")
                                                            .Filter(FilterType.Contains)
                                                            .MinLength(2)

                                                            .ValuePrimitive(true)
                                                            .DataSource(source =>
                                                            {                                                                
                                                                source.Read(read =>
                                                                {                                                                
                                                                    read.Action("GetCodesForPropertyForCashType", "CodeInvoice").Data("GetCodes");
                                                                })
                                                                .ServerFiltering(true);
                                                            })
                                                            
                                                            .Enable(false)

                                                            .AutoBind(false)
                                                            .CascadeFrom("ScheduleId")

)

 

But the server filtering always seems to kick in.

Can we get the dropdown to just filter its contents in place after the initial load?

Thanks,

Daniel.

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 27 Sep 2019, 03:28 PM

Hello Daniel,

Thank you for the provided code. 

I was able to achieve the desired result on our Cascading DropDownList Demo with several changes. I will use that demo as reference. Initially the ServerFiltering of the child DropDownList (Products) should be set to false (and will remain false). I also added the cascadeFromField configuration with parameter CategoryID, which comes from the parent DropDownList.

@(Html.Kendo().DropDownList()
              .Name("products")
              .HtmlAttributes(new { style = "width:100%" })
              .OptionLabel("Select product...")
              .DataTextField("ProductName")
              .DataValueField("ProductID")
              .Filter(FilterType.Contains)
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("Cascading_GetProducts", "DropDownList")
                          .Data("filterProducts");
                  })
                  .ServerFiltering(false);
              })
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("categories")
              .CascadeFromField("CategoryID")
    )

In the controller, in the method which gets the data for the child component, I removed the following code:

public JsonResult Cascading_GetProducts(int? categories)
{
    using (var northwind = GetContext())
    {
        var products = northwind.Products.AsQueryable();
        //if (categories != null)
        //{
        //    products = products.Where(p => p.CategoryID == categories);
        //}
        return Json(products.Select(p => new { ProductID = p.ProductID, ProductName = p.ProductName , CategoryID= p.CategoryID}).ToList());
    }
}
That way, all the data of the child dropdown will be returned unfiltered. The filtering then will occur client-side, based on the configured filter and the CategoryID field, which is set as CascadeFromField .

 

I hope the above will help you. If you are not able to implement this in your project, please send it to me so that I can help you further. Please try to use local data instead of data from a database.

Regards,
Martin
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
DropDownList
Asked by
daniel
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or