Как определить фильтр столбцов сетки кендо между двумя датами?

после работы с Telerik, я пришел к ответу. Нить, которую я открыл, может быть найти здесь, но я также подытожу в этом ответе.

конечным решением было:

• используйте опцию" сообщения "в столбце" фильтруемое", чтобы настроить отображаемое сообщение фильтра.
• используйте опцию " Extra "столбца" filterable", чтобы получить дополнительный селектор даты в меню фильтра.
• настройки Опция "операторы" в опции фильтрации сетки, чтобы установить, какие операторы могут использоваться для дат (gte, lte) и какой текст отображается для каждого (дата начала, Дата окончания).
• используйте событие filterMenuInit для настройки элементов управления фильтра.

Конечный Результат

Фильтрация

использовались следующие фильтруемые параметры:

filterable: { "extra": "true", "messages": { "info": "Show items between dates:" }}

Экстра дает нам второе выбор даты и сообщение "информация" настраивают текст, отображаемый в верхней части меню фильтра.

Решетки Фильтрующийся

я использовал опцию "операторы "в опции" filterable " на уровне сетки, чтобы фильтры даты предоставляли только операторы gte и lte и настраивали текст для этих операторов. Вот как выглядит объект конфигурации операторов:

"date": {
                "gte": "Begin Date",
                "lte": "End Date"
            }

потому что мы хотим, чтобы это применялось ко всем датам, мы ставим это на заводе и повторно использовать его в каждом угловом контроллере / представлении.

filterMenuInit событие

предоставляя обработчик для события filterMenuInit, можно получить доступ и настроить отдельные элементы управления в меню фильтр по мере его создания. Функция обработчика, которую я создал, выглядит так:

function (e) {
            if (e.sender.dataSource.options.schema.model.fields[e.field].type == "date") {
                var beginOperator = e.container.find("[data-role=dropdownlist]:eq(0)").data("kendoDropDownList");
                beginOperator.value("gte");
                beginOperator.trigger("change");
                beginOperator.readonly();

                var logicOperator = e.container.find("[data-role=dropdownlist]:eq(1)").data("kendoDropDownList");
                logicOperator.readonly();

                var endOperator = e.container.find("[data-role=dropdownlist]:eq(2)").data("kendoDropDownList");
                endOperator.value("lte");
                endOperator.trigger("change");
                beginOperator.readonly();
            }

в частности, для любого поля даты эта функция устанавливает первые и последние выпадающие операторы в "gte" и "lte" с уважением (это выпадающие списки для первого оператора даты и второго оператора даты) и устанавливает все выпадающие списки только для чтения, чтобы пользователь не мог их изменить (единственный другой раскрывающийся список, который находится в индексе 1, является логическим сравнением и имеет смысл, поэтому мы не позволяем пользователям изменять его.)

эта функция применяет данную конфигурацию для любых полей типа "дата". Я сделал это таким образом, чтобы я мог создать эту функцию один раз, поместить ее в угловую фабрику, а затем повторно использовать ее для любой сетки, которая Я нуждался. Если вы не хотите применять это как общую конфигурацию для всех столбцов даты, вы можете изменить условие для проверки полей по имени. Пример:

if (e.field == "fieldName")

надеюсь это будет полезно кому-то еще. Это не дает вам конечной настройки пользовательского интерфейса в меню фильтра, но это позволяет вам просто настроить фильтр между двумя датами. Я уверен, что кто-то умный может объединить это с моей оригинальной стратегией (замена разметки для меню фильтра полностью), чтобы придумать что-то полностью настроенное.