Я использую KendoUI в своем приложении MVC. Я фильтрую свою сетку, используя некоторые поля ввода и виджет с несколькими видами. Виджет multiselect передает выбранные элементы в виде массива. Мой вопрос в том, как можно фильтровать сетку с помощью мультиселектора?Как фильтровать сетку KendoUI с помощью виджета Multiselect?
В настоящий момент все входные данные разделяют глобальное условие «И», чтобы они могли работать вместе при возврате данных, однако для мультиселекта должно быть выполнено условие «ИЛИ».
То, что я пытался сделать, это перебрать переданные объекты массива и вернуть их индивидуально. Мне нужно условие мультиселектации «или», которое будет применяться к ним. Я вижу, что объекты массива возвращаются индивидуально в консоль, но они не включаются в общую фильтрацию сетки, что делает ее избыточной.
Может ли кто-нибудь пролить некоторые, как я могу решить эту проблему? Я включил свой код ниже, который показывает, где виджет мультиселектора находится в моем javascript-коде и подход, который я сделал.
@(Html.Kendo().Grid<MyProject.ViewModels.FixtureSearchViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.fixture_idx).Hidden();
columns.Bound(c => c.fixture_date)
.Title("Date")
.ClientTemplate("#=fixture_date ? kendo.toString(kendo.parseDate(fixture_date), 'dd/MM/yyyy') : '' #");
columns.Bound(c => c.owner_company)
.Title("Owner");
columns.Bound(c => c.vessel_name)
.Title("Name");
columns.Bound(c => c.vessel_type)
.Title("Type");
columns.Bound(c => c.charterer_company)
.Title("Charterer");
columns.Bound(c => c.fixture_type)
.Title("Type");
columns.Bound(c => c.workscopecode)
.Title("Duties");
columns.Bound(c => c.fixture_start)
.Title("Start")
.ClientTemplate("#=fixture_start ? kendo.toString(kendo.parseDate(fixture_start), 'dd/MM/yyyy') : '' #");
columns.Bound(c => c.on_hire_location)
.Title("Location");
columns.Bound(c => c.fixture_end)
.Title("End")
.ClientTemplate("#=fixture_end ? kendo.toString(kendo.parseDate(fixture_end), 'dd/MM/yyyy') : '' #");
columns.Bound(c => c.off_hire_location)
.Title("Location");
columns.Bound(c => c.initial_rate)
.Title("Rate")
.ClientTemplate(" #=initial_rate_currency# #=initial_rate#");
})
.Pageable()
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn);
}).ToolBar(toolbar =>
{
toolbar.Template(@<text>
<table class="table">
<tr>
<td>Charterer</td>
<td>
@(Html.Kendo().DropDownList()
.Name("charterer_company")
.Filter("contains")
.OptionLabel("Choose Charterer")
.DataTextField("CompanyName")
.DataValueField("CompanyName")
.DataSource(e => e.Read("GetChartererCompanies", "FormAssets"))
)
</td>
</tr>
<tr>
<td>Start(After)</td>
<td>
@(Html.Kendo().DatePicker()
.Name("fixture_start"))
</td>
</tr>
<tr>
<td>End(Before)</td>
<td>
@(Html.Kendo().DatePicker()
.Name("fixture_end"))
</td>
</tr>
<tr>
<td>Vessel Types</td>
<td>
@(Html.Kendo().DropDownList()
.Name("vessel_type")
.Filter("contains")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "AHTS",
Value = "AHTS",
},
new SelectListItem() {
Text = "PSV",
Value = "PSV"
},
new SelectListItem() {
Text = "Special",
Value = "Special"
},
new SelectListItem() {
Text = "Standby",
Value = "Standby"
},
new SelectListItem() {
Text = "Tug",
Value = "Tug"
}
}))
</td>
</tr>
<tr>
<td>Duties</td>
<td>
@(Html.Kendo().MultiSelect()
.Name("workscopecode")
.DataTextField("WorkScopeName")
.DataValueField("WorkScopeName")
.Placeholder("Select Duties")
.AutoBind(false)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDuties", "FormAssets");
})
.ServerFiltering(true);
})
)
</td>
</tr>
<tr>
<td>Onhire Location</td>
<td></td>
</tr>
<tr>
<td>Fixture Type</td>
<td></td>
</tr>
</table>
<button id="search-button" type="button">Search</button>
</text>);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model => model.Id(p => p.fixture_idx))
.Read(read => read.Action("readFixtures", "Search"))
))
Это мой javascript, который контролирует указанные выше поля ввода поиска.
var search_btn = document.getElementById("search-button");
function search() {
var filters = [],
grid_aberdeen = $('#Grid').data('kendoGrid'),
search_charterer = $("#charterer_company").data("kendoDropDownList").value(),
search_start = $("#fixture_start").data("kendoDatePicker").value(),
search_end = $("#fixture_end").data("kendoDatePicker").value(),
search_type = $("#vessel_type").data("kendoDropDownList").value(),
search_duties = $("#workscopecode").data("kendoMultiSelect").value();
if (search_charterer) {
filters.push(
{
field: "charterer_company",
operator: "eq",
value: search_charterer
}
)
}
if (search_start) {
filters.push(
{
field: "fixture_start",
operator: "gte",
value: search_start
})
}
if (search_end) {
filters.push(
{
field: "fixture_end",
operator: "lte",
value: search_end
})
}
if (search_duties) {
var sub_filter = { logic: "or", filters: [] }
$.each(search_duties, function (i, v) {
sub_filter.filters.push[
{
field: "workscopecode",
operator: "eq",
value: v
}
]
console.log(v)
})
};
grid_aberdeen.dataSource.filter({
logic: "and",
filters: filters
});
}
search_btn.addEventListener("click", search);
Как вы можете видеть, что я пытался создать «суб условия» если вы будете, что я хотел бы обратиться к множественному, но ничего не делает. Консоль показывает, что элементы массива разделены просто отлично, но на самом деле фильтр против них не работает.
var sub_filter = { logic: "or", filters: [] }