Kendo ui Kendo中数据源查询后的空列

调用DataSource.Query后，我无法调用grid.setOption函数。如果我这样做，它只返回一个空网格

this.jobKendoGrid.dataSource.query({
                sort: sort,
                filter: filter,
                pageSize: this.jobKendoGrid.dataSource.pageSize(),
                page: 1
            })

我已经在几个论坛上搜索过了，但到目前为止还没有找到

只需调用setOption就可以在网格中正常工作

 this.grid.setOptions({scrollable: true, autoBind: true});

但当我调用query函数，然后调用setOption时，它会加载一个空网格

this.jobKendoGrid.dataSource.query({
                sort: sort,
                filter: filter,
                pageSize: this.jobKendoGrid.dataSource.pageSize(),
                page: 1
            })

我认为在进行dataSource.Query调用之后，远程调用正在断开连接。我想这就是为什么我不能调用setOption，但我如何才能连接回远程数据源

PS：编辑 我想再次调用setOption的原因是，我在每个网格中都有一个工具栏选项，可以在FitToScreen中执行。此选项将使所有列进入屏幕

public fitToScreen() {
        for (var i = 0; i < this.grid.columns.length; i++) {
            if (this.grid.columns[i].title && this.grid.columns[i].title != "Edit" && this.grid.columns[i].title != " ") {
                // console.log(this.grid.columns[i].width);
                delete this.grid.columns[i].width;
            }
        }
        //setOption Call
        this.grid.setOptions({ scrollable: true });

        // https://www.telerik.com/forums/grid-setoptions-causes-empty-grid
        if (this.grid.options.autoBind === false) {
            this.grid.refresh();
        }
    }

---

在上找到类似的查询。其中一个答案建议先使用，然后再执行，以解决问题

<div id="example">
            <div id="grid"></div>
            <button onclick="filterGrid()">Filter Grid</button>

            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        Freight: { type: "number" },
                                        ShipName: { type: "string" },
                                        OrderDate: { type: "date" },
                                        ShipCity: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 20,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 550,
                        filterable: {extra: false, mode: "row"},
                        sortable: true,
                        pageable: true,
                        columns: [{
                                field:"OrderID",
                                filterable: false
                            },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name", width: 200
                            }, {
                                field: "ShipCity",
                                title: "Ship City", width: 200
                            }
                        ]
                    });
                });

              function filterGrid()
              {
                var grid =  $("#grid").data("kendoGrid");
                var sort= { field: "Freight", dir: "desc" };
                var filter ={ field: "Freight", operator: "gte", value: 100 };

                grid.dataSource.query({
                  sort: sort,
                  filter: filter,
                  pageSize: grid.dataSource.pageSize(),
                  page: 1
                });

                fitToScreen();
              }

              function fitToScreen() 
              {
                console.log("fitToScreen");
                var grid =  $("#grid").data("kendoGrid");
                        for (var i = 0; i < grid.columns.length; i++) {
                            if (grid.columns[i].title && grid.columns[i].title != "Edit" && grid.columns[i].title != " ")                                       {                
                                delete grid.columns[i].width;
                            }
                      }

                     var currOpt = grid.getOptions();
                     //Check values of options you want to set
                     console.log(currOpt.sortable); 

                     //setOptions call
                     grid.setOptions(currOpt);

                     //refresh call
                     grid.refresh();          
           }
  </script>
</div>

---

特别是当您有this.gridConfig.filterable={extra:false，mode:row，}时，它不起作用。我需要了解您正在尝试的场景，比如为什么要设置数据源筛选器和排序，然后使用grid setOptions，请更新问题。更新答案。我更新到snippet以调用fitToScreen，但仍然无法重现问题。可能是我的步骤错误，或者我遗漏了什么。但是，如果您启用了this.gridConfig.filterable={extra:false，mode:row，}filter，然后使用query，然后使用setOptions，那么它会崩溃，并以空网格结束。不过，我还是无法纠正这一点。