How to Pre-select value for KendoMultiselect with checkboxes, when the multiselect options are read from an API call

Question

I am trying to set up pre-selected values for a multi-select checkbox filter for one of the columns in my Kendo Grid. I am not sure how to achieve this.

I have tried to use the 'value' attribute. But it does not seem to work with my code. I have tried the following 2 methods, considering getStatusCol API does have "New" as one of it's values.

GetStatusCol API returns the Status as a string[].

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

and also tried to define values later like the below

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

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

}  

Here is how I define my columns and the multiselect UI

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

I am new to Kendo and need some help in figuring out what's going wrong here.

Thank you in advance!

Answer 1

If you are binding your multi-select to a string array. The value can be specified like a string array, as you have implemented already.

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

But if your API, is returning data like an object array you need to map it like below:-

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

Use the API reference, for more examples.