Kendo dropdownlist virtual with server filtering making multiple Server Requests

[Marco]

We are instantiating late bind a new dropdownlist using jquery, making it virtual and reading data from an ajax call on the server

Here is an example of a dropdown initialization

$('#articles-row select:first').kendoDropDownList(
{
    filter: "contains",
    dataTextField: "Name",
    dataValueField: "Id",
    virtual: {
        itemHeight: 35,
        valueMapper: valueMapperArticles
    },
    dataSource: {
        pageSize: 80,
        serverPaging: true,
        serverFiltering: true,
        schema: {
            data: function (response) {
                console.log(response.Data)
                return response.Data;
            }
        },
        transport: {
            read: {
                url: "@Url.Action("Filter_Articoli")"
            }
        }
    }
});

And here is a simplified version of the datasource read method used in our program

public JsonResult Filter_Articoli([DataSourceRequest] DataSourceRequest request)
{
    IQueryable<Articles> art = _db.Articles
            .Where(x => !x.Disabled).AsQueryable();
    return Json(art.ToDataSourceResult(request));
}

When i instantiate the dropdown like so, he makes multiple server request, where the first one is correct i guess (using paging, sorting etc), and the other two are not necessary and badly formatted, making the execution of the page interrupt

Here is a screen of the three server request made by the datasource and the data obtained from the data formatting

 

Am i missing some configuration on the server or in the kendo dropdownlist instantiation?

Thanks in advance

[Neli]

Hi Marco,

I have replied earlier in the support thread regarding the same issue. As it could be helpful to the other users in the forum I am pasting my reply below as well:

The implementation of the Filter_Articoli endpoint seems correct. What I didn`t notice in the provided DropDownList configuration is to have a configured height. Аs described in the Virtualization article linked here: The UI virtualization of the DropDownList uses a specific strategy for reusing a list of DOM elements for displaying the corresponding data chunk. The number of these elements is determined based on the height and itemHeight options. In the link, you will find also how the pageSize should be calculated based on the height and itemHeight. Could you please make sure that the pageSize is set according to the described formula? 

Also, please try to set the type of the dataSource to 'aspnetmvc-ajax':

 dataSource: {
                type: "aspnetmvc-ajax",
                transport: {
                    read: {
                        .............
                    }
                },
               ......
            }

Please try the suggestions from above and let me know about the result on your side.

Looking forward to your reply.

 

Regards,

Neli