Проверка значения фильтра столбца таблицы данных Devextreme - PullRequest
Новая
       8

Проверка значения фильтра столбца таблицы данных Devextreme

0 голосов
/ 07 ноября 2018

У меня есть сетка данных с фильтром диапазона дат (FilterOperations.Between) для столбца даты 

        x.AddFor(m => m.RequestDate)
            .Caption("Дата запроса")
            .Width(150)
            .Alignment(HorizontalAlignment.Center)
            .DataType(GridColumnDataType.Date)
            .Format("dd.MM.yyyy")
            .FilterOperations(new[] {FilterOperations.Between})
            .SelectedFilterOperation(FilterOperations.Between)
            .AllowHeaderFiltering(false)
            .FilterValue(new object[] {
                  DateTime.Now.AddMonths(-3),
                  DateTime.Now
            });

Как сделать пользовательскую проверку значений фильтра? Я хочу, чтобы пользователь заполнил два поля в фильтре диапазона или ни того, ни другого.

Например: если пользователь заполняет только одно поле в фильтре диапазона - показать сообщение об ошибке, если пользователь заполняет два или ни одного поля в фильтре диапазона - это нормально.

Есть идеи?

1 Ответ

0 голосов
/ 29 ноября 2018

Наконец-то я узнаю, как сделать пользовательскую проверку

Я сделал это с помощью обработчика события OnEditorPreparing

cshtml: 

.OnEditorPreparing("onEditorPreparing")

ЯШ: 

function onEditorPreparing(e) {
    if (e.editorName === "dxDateBox") {
        prepareDateFilterCustomValidation(e);
    }
}

function prepareDateFilterCustomValidation(e) {
    e.editorOptions.onValueChanged = $.proxy(function () {
        // Get Date inputs
        var firstInput = $("div.dx-editor-container.dx-datagrid-filter-range-start > div > div .dx-texteditor-input").last()[0];
        var secondInput = $("div.dx-editor-container.dx-datagrid-filter-range-end > div > div .dx-texteditor-input").last()[0];

        validateDateInputs(firstInput, secondInput);

        applyInputFilter(firstInput, secondInput, arguments[0]);

    }, null, e.dataField);
}

function validateDateInputs(firstInput, secondInput) {
    // If two inputs are filled - date range is valid
    if (firstInput.value !== "" && secondInput.value !== "" || firstInput.value === "" && secondInput.value === "") {
        $("div.dx-editor-container.dx-datagrid-filter-range-start > div").last().removeClass("dx-invalid");
        $("div.dx-editor-container.dx-datagrid-filter-range-end > div").last().removeClass("dx-invalid");

        return;
    }

    // If filled only first - date range is invalid
    if (firstInput.value !== "" && secondInput.value === "") {
        $("div.dx-editor-container.dx-datagrid-filter-range-start > div").last().removeClass("dx-invalid");
        $("div.dx-editor-container.dx-datagrid-filter-range-end > div").last().addClass("dx-invalid");

        return;
    }

    // If filled only second - date range is invalid
    if (firstInput.value === "" && secondInput.value !== "") {
        $("div.dx-editor-container.dx-datagrid-filter-range-start > div").last().addClass("dx-invalid");
        $("div.dx-editor-container.dx-datagrid-filter-range-end > div").last().removeClass("dx-invalid");

        return;
    }
}

function applyInputFilter(firstInput, secondInput, filtrationFieldName) {
    // If two inputs filled
    if (firstInput.value !== "" && secondInput.value !== "") {
        // change date format dd.mm.yyyy -> mm-dd-yyyy
        var firstDate = new Date(
            firstInput.value.substr(3, 2) + "-" + // Месяц
            firstInput.value.substr(0, 2) + "-" + // День
            firstInput.value.substr(6, 4)); // Год

        // change date format dd.mm.yyyy -> mm-dd-yyyy
        var secondDate = new Date(
            secondInput.value.substr(3, 2) + "-" + // Месяц
            secondInput.value.substr(0, 2) + "-" + // День
            secondInput.value.substr(6, 4)); // Год

        // apply datagrid filter
        setColumnFilterValue(filtrationFieldName, [firstDate, secondDate]);
    }
}
...