Question

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

我已经搜索了多个论坛，但到目前为止还没有运气。

只需调用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();
        }
    }

Answer 1

在grid forum上找到了类似的查询。建议使用getOptions()然后再进行setOptions()来解决该问题。

<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>

Kendo中数据源查询后的空列

1 个答案: