Devextreme datagrid column filter value validation

Question

I have a datagrid with date range filter (FilterOperations.Between) for date column

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

How to make custom validation for filter values? I want user to fill two fields in range filter or neither.

For example: If user fill only one field in range filter - show error message, If user fill two or neither fields in range filter - it's Ok.

Any ideas?

Answer 1

Finally I find out how to make custom validation

I made it with OnEditorPreparing event handler

cshtml:

.OnEditorPreparing("onEditorPreparing")

js:

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