Я использую KendoUI Grid
(веб-фреймворк). Он заполняется из локальных данных json
, которые загружаются из ASP.NET MVC
ViewBag
при загрузке страницы. Я объявляю источник данных в отдельной переменной перед инициализацией сетки и заполнением данными из datasoruce. У меня возникает проблема, когда меню фильтров прерывается после первой фильтрации или очистки (смотрите изображение). Каждый раз, когда я нажимаю кнопку фильтра или очистки, он скрывает больше элементов управления, пока не осталось только две кнопки. Странно, что в консоли отсутствуют ошибки. Я работаю над этой проблемой более одной недели, но я не могу найти никакой информации об этом, и я не приближаюсь к возможному решению.
Я знаю, что не-английский код может быть трудно понять, но я буду рад перевести и объяснить, что это значит!
К сожалению, я не могу предоставить ссылку на сервер, на котором эта страница запущена, так как она требует входа в систему, а страница уже развернута, что означает, что было бы нецелесообразно публиковать учетные данные. Хотя я изо всех сил пытался собрать рабочую скрипку, я не смог заставить ее работать.
Я использую этот код:
root.seznamDataSource = new kendo.data.DataSource({
data: zahteveData,
pageSize: 15,
schema: {
model: {
fields: {
IdZahteve: {
type: "number"
},
Naslov: {
type: "string"
},
Datum: {
type: "date"
},
Status: {
type: "string"
},
Narocnik: {
type: "string"
},
PoslovniPartner: {
type: "string"
}
}
}
},
change: function(e) {
var urejeniItemi;
if ((e.sender._sort != null)
&& (e.sender._sort[0] != null)
&& e.sender._sort[0].field === "Status") {
e.preventDefault();
urejeniItemi = [];
return $.getJSON("/Zahteve/StatusiData", function(data) {
var item, status, _i, _j, _len, _len1, _ref;
for (_i = 0, _len = data.length; _i < _len; _i++) {
status = data[_i];
_ref = e.items;
for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
item = _ref[_j];
if (item.Status.trim().toLowerCase() === status.Opis.trim().toLowerCase()) {
urejeniItemi.push(item);
}
}
}
if (urejeniItemi.length !== e.items.length) {
console.log("napaka, niso urejeni vsi itemi");
return;
}
if (e.sender._sort[0].dir === "desc") {
urejeniItemi.reverse();
return e.items = urejeniItemi;
}
});
}
}
});
Я зарегистрировал прослушиватель событий изменений, чтобы применить конкретную сортировку. После инициализации источника данных я запускаю инициализацию KendoUI Grid
:
$("#odprte-zahteve").kendoGrid({
dataSource: root.seznamDataSource,
columns: [
{
template: '<span data-idZahteve="#=IdZahteve#"></span>#=Naslov#',
field: "Naslov",
title: "Naslov zahteve",
attributes: {
style: "min-width: 110px!importnat; text-indent: 10px;"
},
filterable: {
ui: naslovFilter
}
}, {
field: "Datum",
title: "Datum zahteve",
format: "{0: dddd, dd. MMMM 'yy}",
attributes: {
style: "min-width: 105px!importnat;"
},
filterable: {
extra: true,
ui: function(element) {
element.kendoDatePicker({
depth: "month",
max: new Date(),
format: "dddd,d. MMMM yyyy",
ARIATemplate: "#=datumZImenom(data.current)#",
footer: "Danes - #=datumZImenom(data)#"
});
}
}
}, {
field: "Status",
title: "Status",
attributes: {
style: "min-width: 60px!importnat;"
},
filterable: {
ui: statusFilter
}
}, {
field: "Narocnik",
title: "Naročnik",
attributes: {
style: "min-width: 80px!importnat;"
},
filterable: {
ui: narocnikFilter
}
}, {
field: "PoslovniPartner",
title: "Poslovni partner",
attributes: {
style: "min-width: 100px!importnat;"
},
filterable: false,
sortable: false
}
],
change: function(e) {
return urediZahtevo(getIzbranaZahteva(this));
},
dataBound: prilagodiSirino,
selectable: true,
sortable: true,
pageable: {
buttonCount: 5,
pageSizes: [15, 30, 45],
messages: {
display: "Prikazujem {0} - {1} od {2} odprtih zahtev",
empty: "Ni podatkov",
itemsPerPage: "zahtev na stran",
next: "Pojdi na naslednjo stran",
first: "Pojdi na prvo stran",
previous: "Pojdi na prejšnjo stran",
last: "Pojdi na zadnjo stran",
refresh: "Osvežite tabelo"
}
},
filterable: {
extra: false,
operators: {
string: {
eq: "Je enak",
startswith: "Se začne z",
contains: "Vsebuje"
},
date: {
lt: "Pred datumom",
gt: "Po datumu",
eq: "Je enak datumu"
}
},
messages: {
and: "in",
or: "ali",
filter: "Filtriraj",
clear: "Počisti",
info: "Filtriraj po: ",
selectValue: "Izberite kategorijo"
}
}
});
Функции фильтра ui просто создают основные меню фильтров
naslovFilter = function(element) {
element.kendoAutoComplete({
dataSource: zahteveData,
dataTextField: "Naslov"
});
};
datumFilter = function(element) {
element.kendoDatePicker({
depth: "month",
max: new Date(),
format: "dddd,d. MMMM yyyy",
ARIATemplate: "#=datumZImenom(data.current)#",
footer: "Danes - #=datumZImenom(data)#"
});
};
statusFilter = function(element) {
var item, status, statusi, _i, _len;
statusi = [];
for (_i = 0, _len = zahteveData.length; _i < _len; _i++) {
item = zahteveData[_i];
status = item.Status.trim();
if (!statusi.contains(status)) {
statusi.push(status);
}
}
element.kendoDropDownList({
dataSource: statusi,
optionLabel: "Izberite status"
});
};
narocnikFilter = function(element) {
element.kendoDropDownList({
dataSource: narocniki,
optionLabel: "Izberite naročnika"
});
};
Изменить: Я снова начал работать над этим проектом, и менеджер решил полностью переделать его, поэтому теперь я использую Bootstrap с Angular.js, что устраняет необходимость использования KendoUI.