Кендо виртуализация не работает должным образом

Я пытаюсь привязать список к моему кендо со списком, список содержит более 30000 записей, поэтому мне нужна функция виртуализации. Я проверил эту документацию:

http://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization#valuemapper

и пытался реализовать, но не повезло.

Мой веб-API

[Authorize]
    [HttpGet]
    [Route("app/clients")]
    [GzipCompressed]
    public IEnumerable<string> GetClients()
    {
        return businessLayer.GetClients();
    }

    [Authorize]
    [HttpGet]
    [Route("app/valuemapper")]
    [GzipCompressed]
    public int ValueMapper(string value)
    {
        if (string.IsNullOrWhiteSpace(value))
        {
            return -1;
        }
        var clients = businessLayer.GetClients(null);
        return clients.ToList().IndexOf(value);
    }

businessLayer.GetClients() вернет все 30000+ записей.

это мой джс

$scope.clientsOptions = {     
        virtual: {
            itemHeight: 26,
            valueMapper: function(options) {
                $http({
                    url: config.endpoint + '/app' + '/valuemapper',
                    method: "GET",
                    params: {"value": options.value}
                }).then(function successResponse(response){
                  options.success(response.data);
                })
            }
        },
        height: 520,
        dataSource: getClientDataSource()
    }


function getClientDataSource() {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function(options) {
                    $http({
                        method: 'GET',
                        url: config.endpoint + '/app' + '/clients',
                        headers: {
                            'Content-Type': "application/json",
                        }
                    }).then(function successResponse(response) {
                        options.success(response.data);
                    });
                }
            },
            pageSize: 80,
            serverPaging: true,
            serverFiltering: true
        });
        return dataSource;
    }

Проблема с этим кодом выше: 1. Кажется, что подкачка не работает, когда я ищу строку в ComboBox и выбираю ее, в следующий раз, когда я щелкаю массив, чтобы открыть поле со списком, он снова вызовет службу, чтобы получить все данные; 2. Щелчок мышью не может выбрать выделение, работает только клавиатура;

Кто-нибудь может помочь?


javascript asp.net-web-api kendo-ui kendo-combobox
person Allen4Tech    schedule 20.12.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Обновить

Ваш метод получения клиентов не применяет пейджинг к полученному источнику

Как это должно выглядеть:

[Authorize]
[HttpGet]
[Route("app/clients")]
[GzipCompressed]
public ActionResult GetClients([[DataSourceRequest] DataSourceRequest request)
{
    return Json(businessLayer.GetClients().ToDataSourceResult(request));
}

Запрос на отправку преобразуется в DataSourceRequest, который содержит информацию о подкачке сервера, фильтрации, сортировке и т. д. Затем эта информация передается в метод ToDataSourceResult, который строит правильное выражение LINQ и извлекает нужный фрагмент данных.

Идея valueMapper состоит в том, чтобы получить индекс строки, соответствующий определенному значению.

Я почти уверен, что вы должны отправлять преобразованные значения на свой сервер в valueMapper

$scope.clientsOptions = {     
        virtual: {
            itemHeight: 26,
            valueMapper: function(options) {
                $http({
                    url: config.endpoint + '/app' + '/valuemapper',
                    method: "GET",
                    //here we convert values before sending 
                    params: convertValues(options.value)
                }).then(function successResponse(response){
                  options.success(response.data);
                })
            }
        },
        height: 520,
        dataSource: getClientDataSource()
    }

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;
}

А вот пример серверной части ValueMapper из примеров кендо github https://github.com/telerik/kendo-ui-demos-service/blob/master/KendoCRUDService/Controllers/OrdersController.cs

public ActionResult ValueMapper(int[] values)
        {
            var indices = new List<int>();

            if (values != null && values.Any())
            {
                var index = 0;
                foreach (var order in OrderRepository.All()) 
                {
                    if (values.Contains(order.OrderID))
                    {
                        indices.Add(index);
                    }

                    index += 1;
                }
            }

            return this.Jsonp(indices);
        }

Посмотрите этот пример из документации по кендо.

https://demos.telerik.com/kendo-ui/combobox/virtualization

person layonez    schedule 10.01.2017
comment
спасибо за повтор. Я проверил документацию ниже и нашел код в github. Я запутался, что должно возвращать convertValues? Что именно я должен передать веб-API? - person Allen4Tech; 11.01.2017
comment
@ Allen4Tech это было полезно? - person layonez; 11.01.2017