Multiselect not showing initial value

2 posts, 0 answers
  1. Bernd
    Bernd avatar
    79 posts
    Member since:
    Feb 2013

    Posted 13 Nov 2016 Link to this post

    Hi all.

    I have a multiselect widget with a client side added item. Selectin this item as default selection doesn't work. This is the widget definition:

    @(Html.Kendo().MultiSelect().Name(componentName: "orderTypeSelector")
                .DataSource(ds => ds.Read((read => read.Route(OrderTypeControllerRoute.GetReadList, new RouteValueDictionary { { "culture", UICulture.ToLower() } }))))
                .Events(e => { e.DataBound(handler: "orderTypeDataBound"); e.Select(handler: "orderTypeSelect"); })
                .DataValueField(nameof(OrderTypeViewModel.Id))
                .DataTextField(nameof(OrderTypeViewModel.Label))
                .Value(new[] {new OrderTypeViewModel { Id = 0, Label = "Alle", BackgroundColor= "rgba(0, 0, 0, 1)", MasterSystemId="*" } })
        .Deferred()
    )

    And these are the javascript event handlers:

    // order type multiselect events
    function orderTypeDataBound(e) {
        var ds = this.dataSource;
        if (ds.at(0).@nameof(OrderTypeViewModel.Id) !== 0) {
            ds.insert(0, {
                @nameof(OrderTypeViewModel.Id): 0,
                @nameof(OrderTypeViewModel.Label): "Alle"
            });
        }
    }
    function orderTypeSelect (e) {
        var dataItemValue = this.dataSource.view()[e.item.index()].value;
        var values = this.value();
     
        if (dataItemValue !== "Alle" && contains(dataItemValue, values)) {
            return;
        }
     
        if (dataItemValue === "Alle") {
            values = [];
        } else if (values.indexOf("Alle") !== -1) {
            values = $.grep(values, function(value) {
                return value !== "Alle";
            });
        }
     
        values.push(dataItemValue);
        this.value(values);
        this.trigger("change"); //notify others for the updated values
     
        e.preventDefault();
    }

    What am I missing here?

    Kind regards

    Bernd

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    254 posts

    Posted 15 Nov 2016 Link to this post

    Hello Bernd,

    I would suggest you to use the Schema.Parse configuration (CustomDataSourceBuilder equivalent) of the MultiSelect's datasource to add the new item. The Parse event is executed before the server response is used. It is used for preprocessing or parsing the server response.

    Please find attached a sample example implementing the described approach which behaves as in this screencast.

    Regards,
    Peter Milchev
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top