Kendo 组合框中的多个过滤器

Question

我见过几个使用 FilterType.StartsWith 或 FilterType.Contains 作为过滤器的示例。

@(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);
        })
)

如何同时使用多个过滤器。我想过滤数据，以便结果显示基于 StartsWith 的列表，然后显示基于 Contains 的列表。所以它就像两个列表的联合。

Answer 1

塞拉姆哈桑。这是您需要的，我在我的项目中使用并完美运行。它根据选择的 "Multiplier" 检索 "Participants"。我通过在我的模型上组合 Name 和 Surname 来使用 NameSurname 属性，但是你当然可以只使用一个属性作为过滤器参数。另一方面，我使用了额外的 javascript 方法来防止用户向组合框输入自由文本。

除了我的示例，你还可以看看Cascading ASP.NET MVC ComboBox sample。

查看：

@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>

控制器：

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);
}

希望这对您有所帮助..

Kendo 组合框中的多个过滤器

Multiple filters in Kendo Combobox

c#

telerik

telerik-mvc

kendo-ui

kendo-asp.net-mvc