'Contains' select in cascading dropdown

[Marc]

With a cascading dropdown, it seems like the default behavior is to highlight a selection as a user starts typing with a 'begins with' type search.

Is there a simple way to switch this to a 'contains' type search if nothing begins with the users input? 

[Dimitar]

Hello Marc,

This behavior can be modified by using the DropDownList's filter configuration option. The supported filter values are startswith, endswith and contains.

You can also observe the behavior with filter: "contains" on the following Dojo example.

Regards,
Dimitar
Progress Telerik

[Marc]

Thanks I see this working in your dojo, but I'm using the MVC wrappers and when I add:

 

.Filter(FilterType.Contains) to the cascading dropdown, it doesn't work. Is there something else that needs to be done to get this to work with the razor syntax.

 

Here is my code:

 

@(Html.Kendo()
                      .DropDownListFor(model => model.ProgramId)
                      .HtmlAttributes(new { @class = "form-control", style = "width: 100%;" })
                      .OptionLabel("- Select -")
                      .DataTextField("name")
                      .DataValueField("value")
                      .DataSource(source => source.Read(read => read.Action("GetPrograms", "Request")).ServerFiltering(true)))



<label class="control-label">Charge Number </label>

@(Html.Kendo()
      .DropDownListFor(model => model.ChargeNumber)
      .Filter(FilterType.Contains)
      .HtmlAttributes(new
      {
          @class = "form-control",
          style = "width: 100%;"
      })
      .OptionLabel("- Select -")
      .DataTextField("name")
      .DataValueField("value")
      .DataSource(source => source.Read(read => read.Action("GetChargeNumbers", "Request").Data("filterPrograms")).ServerFiltering(true))
      .Enable(false)
      .AutoBind(false)
      .CascadeFrom("ProgramId"))
<script>
                            function filterPrograms() {
                                return {
                                    programId: $("#ProgramId").val()
                                };
                            }
</script>

[Dimitar]

Hello Marc,

I am attaching an ASP.NET MVC solution, where a similar scenario to the one described is demonstrated (Cascading DropDownLists with server filtering). With it, the cascading and filtering functionality works as expected.

I have noticed that in the provided code sample, serverFiltering is set to true. This will force the filtering of the widget to be performed on the server-side. You can observe the server implementation in the above solution, which is located in the RequestController's GetChargeNumbers() method:

if (!string.IsNullOrEmpty(filterChargeNumber))
{
  numbers = numbers.Where(p => p.ChargeNumberName.Contains(filterChargeNumber));
}

If the serverFiltering option is not specified explicitly, the filtering of the DropDownList will be performed client-side and can be configured only with the Filter(FilterType.Contains) option.

Regards,
Dimitar
Progress Telerik

[Marc]

Thanks but this seems clunky. Is there an MVC example of using only client filtering. If I turn off server filtering the second cascading dropdown does not get populated even though the ajax request is made.

[Ianko]

Hello Marc,

Here you are the sample sent by Dimitar, but modified for client-side filtering. 

Regards,
Ianko
Progress Telerik

[Borja]

The second dropdown still not being populated when server filtering is set to false. 

How can this be fixed?

[Dimitar]

Hello Carlos,

By default, when a value is chosen from the first DropDownList, this filters the records for the child widget based on the selected value and bounds them to the widget. Here is a short screencast that demonstrates the behavior on my end with the previously attached solution. You will notice that after selecting a value, the child DropDownList data is being correctly filtered.

Taking the above into consideration, could you please elaborate a bit more on what is the exact issue on your end?

Regards,
Dimitar
Progress Telerik