Virtualization results in strange display behavior

[Scott]

Correct data is returned from the server, and it seems to be paging correctly, but I get a big empty dropdown list. What am I doing wrong? As far as I can tell, this code matches the code from the demo. Using v.2015.2.805.545.

Controller:

public ActionResult GetCustomers([DataSourceRequest] DataSourceRequest request) {
    var customers = Context.Customers.Where(c => c.DateDeleted == null);

    var results = customers.ToDataSourceResult(request, ModelState, c => new CustomerSelectListItem(c));

    return Json(results, JsonRequestBehavior.AllowGet);
}

public ActionResult CustomersValueMapper(int[] values) {
    //this method exists to get a concrete "row number" for the value(s) in question.
    //
    //to fulfill this requirement, we're using List's FindIndex method over a collection of all customers stored in the Session
    //

    var indices = new List<int>();

    var customers = GetAllCustomers();

    if (values != null) {
        //add all customers with indices >= 0
        indices.AddRange(values.Select(value => customers.FindIndex(c => c.Id == value))
            .Where(index => index >= 0));
    }

    return Json(indices, JsonRequestBehavior.AllowGet);
}

private List<Customer> GetAllCustomers() {
    if (Session["allCustomers"] == null) {
        Session["allCustomers"] = Context.Customers.Where(e => e.DateDeleted == null).ToList();
    }

    return (List<Customer>)Session["allCustomers"];
}

 

Javascript:

 

function valueMapper(options) {
    console.log("valueMapper: options.value = " + options.value);
    $.ajax({
        url: "@Url.Action("CustomersValueMapper", "Equipment", new {area="Dispatch"})",
        data: convertValues(options.value),
        success: function (data) {
            options.success(data);
    }
});
}

function convertValues(value) {
    var data = {};

    value = $.isArray(value) ? value : [value];

    for (var idx = 0; idx < value.length; idx++) {
        data["values[" + idx + "]"] = value[idx];
    }

    return data;
}

 

 View:

@(Html.Kendo().DropDownList()
    .Name("customerId")
    .DataValueField("Value")
    .DataTextField("Text")
    .DataSource(ds => ds.Custom()
        .ServerPaging(true)
        .PageSize(80)
        .Type("aspnetmvc-ajax") //uses DataSourceRequest
        .Transport(transport => transport.Read("GetCustomers", "Equipment", new { area = "Dispatch" }))
        .Schema(schema => schema
            .Data("Data")
            .Total("Total"))
    ).Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
)

[Scott]

It seems the items are there, they're just not displayed in the dropdown (see attached screenshot).

 ​

[Georgi Krustev]

Hello Scott,

The widget setup and the server implementation look correct. I am afraid that we will not be able to determine the source of the issue without reviewing a runnable demo. Would it be possible to send us such? Thus we will investigate the issue further and will be able to pinpoint the cause of the problem faster.

Regards,
Georgi Krustev
Telerik

[Scott]

My small demo project worked fine, so I tried disabling things one-by-one in my real project. It turned out to be some bad custom CSS. Thanks for the confirmation that my code was fine.