Question

对于日期列，我有一个带有日期范围过滤器（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
            });

如何对过滤器值进行自定义验证？我希望用户填写范围过滤器中的两个字段，或者都不填写。

例如：如果用户仅填充范围过滤器中的一个字段-显示错误消息，如果用户填充范围过滤器中的两个或两个字段都不显示-可以。

有什么想法吗？

Answer 1

最后，我了解了如何进行自定义验证

我是通过OnEditorPreparing事件处理程序完成的

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

Devextreme datagrid列过滤器值验证

1 个答案: