Пустой столбец после запроса источника данных в кендо - PullRequest
Новая
       20

Пустой столбец после запроса источника данных в кендо

0 голосов
/ 12 мая 2019

После вызова 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();
        }
    }

1 Ответ

1 голос
/ 13 мая 2019

Найден похожий запрос на сетке . В одном из ответов предлагается использовать 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>
...