Multiple filters in Kendo Combobox

Question

I have seen several examples where either the FilterType.StartsWith or FilterType.Contains is used as the filter.

@(Html.Kendo().ComboBox().Name("kcombobox")
    .HtmlAttributes(new { style = "width:250px" })
    .Placeholder("Select a value...")
    .DataTextField("Text")
    .DataValueField("Value")
    .Filter(FilterType.StartsWith)
    .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetCountries", "Home");
            }).ServerFiltering(true);
        })
)

How to use multiple filters together. I want to filter the data such that the result shows the list on the basis of StartsWith then the list on the basis of Contains. So it would be like the union of the two lists.

Answer 1

Selam Hasan. Here is what you need that I use in my project and works perfectly. It retrieves "Participants" according to the selected "Multiplier". I use NameSurname property by combining Name and Surname on my model, but you can use just a single property as filter parameter of course. On the other hand I used an extra javascript method in order to prevent the users entering free text to the comboboxes.

Besides my sample, you can also have a look at Cascading ASP.NET MVC ComboBox sample.

View:

@Html.LabelFor(m => m.ParticipantInstituteName)
@(Html.Kendo().ComboBox()
    .Name("multipliers") //The name of the combobox is mandatory. It specifies the "id" attribute of the widget.
    .DataTextField("InstituteName") //Specifies which property of the Model to be used by the combobox as a text.
    .DataValueField("ID") //Specifies which property of the Model to be used by the combobox as a value.
    .HtmlAttributes(new { style = "width:350px" })
    .Placeholder("Type searching text here...")
    .Filter(FilterType.Contains)
     //.MinLength(3)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetCascadeMultipliers", "Multiplier");
        });
    })
)
@Html.ValidationMessageFor(m => m.ParticipantInstituteName)
<br />

<script>
    $(function () {
    /* Find and select value if exists in Kendo().ComboBox() for preventing from selecting free text entry
    Note: Use this script (inside  $(function () { }); ) on the below of each kendoComboBox "seperately" instead of above of the page or at the same section i.e. below of the same kendoComboBox!!! */
    var widget = $("#multipliers").data("kendoComboBox");
    widget.bind("change", function () {
            if (widget.selectedIndex === -1 && widget.value()) {
                if (widget.dataSource.view().length > 0) {
                    widget.select(0)
                } else {
                    widget.value("");
                }
            }
        })
    });
</script>

@Html.LabelFor(m => m.ParticipantNameSurname)
@(Html.Kendo().ComboBox()
    .Name("participants") //The name of the combobox is mandatory. It specifies the "id" attribute of the widget.
    .DataTextField("NameSurname") //Specifies which property of the Model to be used by the combobox as a text.
    .DataValueField("ID") //Specifies which property of the Model to be used by the combobox as a value.
    .HtmlAttributes(new { style = "width:300px" })
    .Placeholder("Type searching text here...")
    .Filter(FilterType.Contains)
    //.MinLength(3)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetCascadeParticipants", "Participant")
                .Data("filterParticipants");
        })
        .ServerFiltering(true);
    })
    .Enable(false)
    .AutoBind(false)
    .CascadeFrom("multipliers")
)
@Html.ValidationMessageFor(m => m.ParticipantNameSurname)

<script>
    function filterParticipants() {
        return {
        multipliers: $("#multipliers").val(),
        participantFilter: $("#participants").data("kendoComboBox").input.val()
        };
    }

    $(function () {
    /* Find and select value if exists in Kendo().ComboBox() for preventing from selecting free text entry
    Note: Use this script (inside  $(function () { }); ) on the below of each kendoComboBox "seperately" instead of above of the page or at the same section i.e. below of the same kendoComboBox!!! */
    var widget = $("#participants").data("kendoComboBox");
    widget.bind("change", function () {
        if (widget.selectedIndex === -1 && widget.value()) {
            if (widget.dataSource.view().length > 0) {
                    widget.select(0)
                } else {
                    widget.value("");
                }
            }
        })
    });
</script>

**Controller:**

public JsonResult GetCascadeMultipliers()
{
    return Json(repository.Multipliers.Where(m => m.Status == 1).Select(m => new { ID = m.ID, InstituteName = m.InstituteName }), JsonRequestBehavior.AllowGet);
}


public JsonResult GetCascadeParticipants(int? multipliers, string participantFilter)
{
    var participants = repository.Participants.AsQueryable();

    if (multipliers != null)
    {
        participants = participants.Where(p => p.MultiplierID == multipliers);
    }

    if (!string.IsNullOrEmpty(participantFilter))
    {
        //participants = participants.Where(p => p.Name.Contains(participantFilter)); //Search for the value containing filter
        participants = participants.Where(p => p.Name.StartsWith(participantFilter)); //Search for the value start with filter
    }

    return Json(participants.Select(p => new { ID = p.ID, NameSurname = p.Name + " " + p.Surname }), JsonRequestBehavior.AllowGet);
}