'Contains' select in cascading dropdown

6 posts, 0 answers
  1. Marc
    Marc avatar
    104 posts
    Member since:
    Jul 2010

    Posted 21 Sep Link to this post

    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? 

  2. Dimitar
    Admin
    Dimitar avatar
    172 posts

    Posted 25 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Marc
    Marc avatar
    104 posts
    Member since:
    Jul 2010

    Posted 25 Sep Link to this post

    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>
  4. Dimitar
    Admin
    Dimitar avatar
    172 posts

    Posted 26 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Marc
    Marc avatar
    104 posts
    Member since:
    Jul 2010

    Posted 27 Sep Link to this post

    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.
  6. Ianko
    Admin
    Ianko avatar
    1729 posts

    Posted 29 Sep Link to this post

    Hello Marc,

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

    Regards,
    Ianko
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top