本地虚拟化ComboBox kendo

时间:2018-05-03 13:16:43

标签: angular typescript combobox kendo-ui virtualization

我想在本地数据上使用虚拟对象 ComboBox

我尝试过各种方式,但只显示当前页面(前40个元素)

我尽可能使用类似于kendo虚拟化教程的代码结构。

我还尝试使用Dasource中的数据字段编写它们,并禁用ServerPaging。但它不起作用!

我的HTML

<div class="col-xs-11 col-xs-offset-1">
                <input kendo-combo-box="EndProdChangeDialogCtrl.comboMaterialTool1" style="width:100%;"
                       ng-disabled="EndProdChangeDialogCtrl.disabledTool1"
                       k-filter="'contains'"
                       k-data-text-field="'Description'"
                       k-data-value-field="'ToolCode'"
                       k-value-primitive="true"
                       k-height="520"
                       k-data-source="EndProdChangeDialogCtrl.kk"
                       k-ng-model="EndProdChangeDialogCtrl.SelectedObject.ToolCode1"
                       k-on-change="EndProdChangeDialogCtrl.ChangeTool(EndProdChangeDialogCtrl.isLinkedTool1,EndProdChangeDialogCtrl.positionTool1,EndProdChangeDialogCtrl.SelectedObject.ToolCode1)"
 ng-class="{'required-tool':(EndProdChangeDialogCtrl.requiredTool1 ==            true &&   (EndProdChangeDialogCtrl.SelectedObject.ToolCode1==''||EndProdChangeDialogCtrl.SelectedObject.ToolCode1==null)),
                                   'required-tool-ok':(EndProdChangeDialogCtrl.requiredTool1 == true && (EndProdChangeDialogCtrl.SelectedObject.ToolCode1!='' && EndProdChangeDialogCtrl.SelectedObject.ToolCode1!=null)) }" />

                                   </div>

ts文件

  this.tools1List = t1.SuitableTools; //copy array for safe
                    var suits = new Array();
                    suits = suits.concat(t1.SuitableTools);


  this.comboMaterialTool1.setOptions(<kendo.ui.ComboBoxOptions>{

                        virtual: //<kendo.ui.ComboBoxVirtual>
                        {
                            itemHeight: 52,
                            valueMapper: function (options) {
                                var tool = Enumerable.from(suits).firstOrDefault(i => i.ToolCode == options.value);
                                var index = suits.indexOf(tool);
                                options.success(index);
                            }
                        },

                    });



                    this.kk = new kendo.data.DataSource({
                        schema: {
                            model: {

                                fields: {
                                    Description: { type: "string" },
                                    ToolCode: { type: "string" },
                                    IsAvailable: { type: "boolean" },
                                    IsMountedOnThisMachine: { type: "boolean" },
                                    TstCode: { type: "number" }
                                }
                            },
                            total: function (response) {
                                response.total = suits.length;
                                return response.total;
                            }
                        },
                        transport: {
                            read: function (options) {
                                var pagevalue = suits.slice(options.data.page * options.data.pageSize, options.data.page * options.data.pageSize + options.data.take);
                                options.success(pagevalue);
                                //     options.success(suits);
                            },
                        },
                        pageSize: 40,
                        serverPaging: true,
                      //  type: "odata" show nothing with odata type
                     });

1 个答案:

答案 0 :(得分:0)

我找到了答案。如果你只需要defaut设置post k-virtual =&#34; true&#34;在HTML页面。或者

https://dojo.telerik.com/IXANaNAm/4

我找到一个解决方案添加一个返回[]的假映射器。

看来comboBox.value()必须带有一组k-ng-model模型