首页 > 解决方案 > dxDataGrid - 将列标题过滤器与 CustomStore 一起使用

问题描述

我使用 devexpress 和 headerFilter 选项在从下拉列表中选择一些选项并执行 OK 时出现问题:标头过滤器不会将所选值传递给 loadOptions 对象,如果我用 headerFilter 替换查找但我不想要查找它可以工作。

基本上我想调用另一个 api 来在 headerFilter 中加载数据

这是我的代码:

    var store = new DevExpress.data.CustomStore({
        key: "ID",
        load: function (loadOptions) {// loadOptions does not contains the selected value
            var d = $.Deferred(),
                params = {};
            [
                "sort", 
                "filter"
            ].forEach(function(i) {
                if(i in loadOptions && isNotEmpty(loadOptions[i])) 
                    params[i] = JSON.stringify(loadOptions[i]);
            });
            $.getJSON(dataTable.replace("{numberOfRow}", loadOptions.take).replace("{page}", (loadOptions.skip / loadOptions.take) + 1), params)
        .done(function (result) {
            d.resolve(result.UserTasks, {
                totalCount: result.Count
            });
        });
            return d.promise();
        }
    });
    opt = {
        dataSource: store,
        remoteOperations: { filtering: true, sorting: true, paging: true, grouping: false },
        showBorders: true,
        allowColumnReordering: true,
        rowAlternationEnabled: true,
        filterRow: {
            visible: true,
            applyFilter: "auto"
        },
        searchPanel: {
            visible: true,
            width: 240,
            placeholder: "Search..."
        },
        headerFilter: {
            visible: true
        },
        paging: {
            pageSize: 10
        },
        pager: {
            showPageSizeSelector: true,
            allowedPageSizes: [10, 20, 30],
            showInfo: true
        },
        columns: [{
        dataField: "Title",
        dataType: "string",
        caption:idea,
            width:180,
            //allowFiltering: false,
            //allowSearch: true,
            cellTemplate: function (element, info) {
                url = url.replace("/Ideas/View", "/Ideas");
                element.append("<a class='view-task' href=" + url + "/" + info.data.ID + " data-task-id=" + info.data.ID + ">" + info.data.Title + '-' + ideano + info.data.IdeaId + "</a>");
            }
        },
        {
            dataField: "FormName",
            caption: form,
            dataType: "string",
            headerFilter: { //here its bringing all data properly
                dataSource:{
                    store: new DevExpress.data.CustomStore({
                        key: "Id",
                        load: function (loadOptions,i) {
                            var d = $.Deferred(),
                                    params = {};
                            [
                                "sort",
                                "filter"
                            ].forEach(function (i) {
                                if (i in loadOptions && isNotEmpty(loadOptions[i]))
                                    params[i] = JSON.stringify(loadOptions[i]);
                            });
                            $.getJSON(filterDataTable.replace("{filter}", form).replace("{numberOfRow}", loadOptions.take).replace("{page}", (loadOptions.skip / loadOptions.take) + 1), params)
                                .done(function (result) {
                                    d.resolve(result.Items);
                                });
                            return d.promise();
                        }
                    })
                }
            }
        }]
    }
    $("#gridContainer").dxDataGrid(opt).dxDataGrid("getDataSource");

标签: jquerydevexpress

解决方案


推荐阅读