Virtualisation on dropdown list

[newKendoUser]

Hello, i have a Kendo drop down on my form which i anticipate will need to handle large volumes of data and so i am trying to configure virtualisation, however i am struggling to understand how to configure correctly. I am new to Kendo so please excuse if this is a silly question.

 

My drop down will display remote data however, at the point of creating the drop down the data will have been retrieved earlier and stored in a variable. here is my drop down:

 

$("#newDropDown").kendoDropDownList({
        filter: "contains",
        dataTextField: "Value",
        dataValueField: "ID",
        dataSource: items,
        select: onDropDownSelect,
        noDataTemplate: $("#noDataTemplate").html(),
        optionLabel: "Please select ..",
        pageSize: 80,
        serverPaging: true,
        serverFiltering: true,
        virtual: {
            itemHeight: 26,
            valueMapper: function (options) {
                options.success([options.value || 0]);
            }
        },
    });

 

I think where i am going wrong is my value mapper and my misunderstanding of how to configure it for my requirements. i have read the documentation and examples from https://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization, but remain unclear. 

I have configured the no data template on my drop down to allow adding a new item if it does not exist on search. This is presented as a modal pop and on close of the modal window the item is created, drop down refreshed and the selected item set to the newly created data item. The line of code i have dynamically setting the selected item is:

 

 $("#newDropDown").data("kendoDropDownList").value(NEW_ITEM_ID)

 

this works successfully before i added in virtual configuration. Could someone explain how my value mapper should be configured in such scenario or point me towards documentation that might help explain it better? any examples ive loked at so far the valueMapper makes a remote call- is it required to callfor data again?

 

Many thanks

 

 

[Neli]

Hi,

By default Kendo UI provides server-side virtualization. The valueMapper use the currently selected value. Based on the index of the selected value, the widget returns the indexes of the next items, that should be rendered.

In case you need a client-side virtualization, the functionality described above should be implemented. Below is an example:

virtual: {
itemHeight: 26,
valueMapper: function(options) {
var values = convertValues(options.value);

var indices = [];

if (!values && values.length > 0) {
for(var j = 0; j < data.length; j ++){
var order = data[j];

if (values.indexOf(order.OrderID)) {
indices.push(j);
}
}
}

options.success(indices);
}
},

In case you have a server-side virtualization, you can add the new item by sending an ajax request to the server. To fetch the new data, you should call the dataSource.read() method.  Note, that additional check should be performed to avoid adding items with duplicated IDs.

$.ajax({
  method: "POST",
  data: data,
  url: "/Home/AddProduct",
  success: function (response) {
    dropdownlist.dataSource.read();
    dropdownlist.value(response.item);
  }
})

The linked Dojo example describes the implementation of the client-side virtualization and also includes the 'Add new Item' functionality performed on the client.

I hope that the provided information helps.

Regards,
Neli
Progress Telerik

[newKendoUser]

Hi Neli,

Thanks for your reply and providing the example. that makes sense and i plan to try and implement it. However i've run into some other issues redesigning my drop down before looking at virtualization again. 

I now want to populate my dropdown using remote data (odata) retrieved via an api call. On first attempt i was receiving errors to do with kendo $format and $inlinecount parameters.  I came across this article (https://www.telerik.com/blogs/using-kendo-ui-with-mvc4-webapi-odata-and-ef) which explained how to get around the errors and this appears to work to eliminate the errors but i dont see the records returned appear in my drop down.

If i examine the call made i do see it has been successful and can see the objects returned. Perhaps my mapping is wrong? My code for my drop down is as follows:

$("#newDropDown").kendoDropDownList({
        filter: "contains",
        dataTextField: "name",
        dataValueField: "id",
        dataSource: {
            serverFiltering: true,
            serverPaging: true,
            type: 'odata',
            transport: {
                read: {
                    url: constructedUrl,
                    dataType: "json"
                },
                parameterMap: function (options, type) {
                    var paramMap = kendo.data.transports.odata.parameterMap(options);
                    delete paramMap.$inlinecount;
                    delete paramMap.$format;
                    return paramMap;
                }
            },
            schema: {
                data: function (data) {
                    return data;
                },
                total: function (data) {
                    return data.length;
                }
            }
        },
        select: onDropDownSelect,
        noDataTemplate: $("#noDataTemplate").html(),
        optionLabel: "Please Select ..."
    });

and an example object returned in the response as so:

{@odata.etag:"W/"544870"",id:"276c06d3-af05-e811-81b6-0022480109ef",name:"Account 2"}

 

Am i missing something in my configuration. Also when it comes to applying virtualization, server side, will your previous example still apply?

 

Many thanks

[Neli]

Hi Martina,

The provided code seems to be correct. Could you please prepare and send us an isolated runnable example where the issue can be replicated? This way we will be able to troubleshoot it locally and provide you with further assistance.

Regarding the server-side virtualization, please take a look on the following demo. 

Regards,
Neli
Progress Telerik