Looking to implement virtualization for local data using the kendo object ComboBox.
I've tried different methods, but only the current page (first 40 elements) is displayed.
I followed a code structure similar to the kendo virtualization tutorial and also experimented with utilizing the data field in Dasource while disabling ServerPaging, yet encountered issues.
Here's the HTML snippet:
<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>And here's the TypeScript file:
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
});