Как предварительно выбрать значение для KendoMultiselect с флажками, когда параметры множественного выбора читаются из вызова API

Question

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

Я попытался использовать атрибут 'value'. Но, похоже, он не работает с моим кодом. Я попробовал следующие 2 метода, учитывая, что API-интерфейс getStatusCol имеет значение «New» в качестве одного из значений.

API GetStatusCol возвращает статус в виде строки [].

function setStatus(element) {
    element.kendoMultiSelect({
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "../../api/GetStatusCol"
                }
            }
        },
        value: ["New"],
        change: function (e) {
        var filter = { logic: "or", filters: [] };
        var values = this.value();
        $.each(values, function (i, v) {                 
            filter.filters.push({ field: "Status", operator: "eq", value: v});                   
        });
        console.log(this.dataSource.data());
        this.dataSource.filter(filter);
        },          
    });
}  

, а также попытался определить значения позже, как показано ниже

function setStatus(element) {
    element.kendoMultiSelect({
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "../../api/GetStatusCol"
                }
            }
        },

        change: function (e) {
        ...         
    });
    element.getKendoMultiSelect().value(["New"]);

}  

Вот как я определяю свои столбцы и интерфейс мультиэлемента

Columns: [
    { field: "ID", title: "ID", type: "number", hidden: true, "menu": false },                       
    {
        field: "Status", title: "Status", type: "string", filterable: {
            ui: setStatus,
            multi: true
        }
    }                       
]


function setStatus(element) {
    element.kendoMultiSelect({
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "../../api/GetStatusCol"
                }
            }
        },
        change: function (e) {
        var filter = { logic: "or", filters: [] };
        var values = this.value();
        $.each(values, function (i, v) {                 
            filter.filters.push({ field: "Status", operator: "eq", value: v});                   
        });
        console.log(this.dataSource.data());
        this.dataSource.filter(filter);
        },          
    });
}

Я новичок в Кендо и мне нужна помощь, чтобы выяснить, что здесь не так.

Заранее спасибо!

Answer 1

Если вы связываете свой множественный выбор с массивом строк. Значение может быть указано как строковый массив, как вы уже реализовали.

<select id="multiselect" multiple="multiple"></select>
<script>
$("#multiselect").kendoMultiSelect({
     dataSource: ["New", "In Progress", "Closed", "Re-open"],
     value: ["New"]
});
</script>

Но если ваш API возвращает данные в виде массива объектов, вам нужно отобразить их, как показано ниже: -

<div id="example" >
    <div class="demo-section k-content">
        <h4>Products</h4>
        <select id="products"></select>
    </div>
    <script>
        $(document).ready(function() {
            $("#products").kendoMultiSelect({
                placeholder: "Select products...",
                dataTextField: "ProductName",
                dataValueField: "ProductName",
                autoBind: false,
                dataSource: {
                    type: "json",
                    serverFiltering: true,
                    transport: {
                        read: {
                             url: "https://demos.telerik.com/kendo-ui/service/products",
                                                 dataType: "jsonp"
                        }
                    }
                },
                value: [
                    { ProductName: "Ipoh Coffee"},
                    { ProductName: "Chai" }
                ]
            });
        });
    </script>
</div>

Используйте справочную информацию API , чтобы получить больше примеров.