Kendo multiselect Select event and dataItem

1 Answer 589 Views
MultiSelect
Jody
Top achievements
Rank 1
Jody asked on 24 Jan 2022, 09:03 PM

I'm having an issue getting the selected item from the passed event, mostly because the demo uses "e.dataitem"

like this:

function onSelect(e) {
        if ("kendoConsole" in window) {
            var dataItem = e.dataItem;
            kendoConsole.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
        }
    }
My attempt to recreate this failed, dataItem has no such members:


@(Html.Kendo().MultiSelect()
                              .Name("JobIds")
                              .HtmlAttributes(new { style = "Width:700px; height:60px; overflow-y:scroll;", aria_label = "editor" })
                              .DataTextField("job_name")
                              .DataValueField("job_id")
                              .HeaderTemplate("<div class=\"dropdown-header\">" +
                                        "<span style=\"width=350px\">Job Name</span>" +
                                        "<span style=\"width=350px\">Parent Name</span>" +
                                        "</div>\n <table>")
                              .ItemTemplate("<span class = \"namespan\">#: data.job_name #</span> <span class=\"parentspan\">#: data.job_parent #</span >")
                              .DataSource(source =>
                                {
                                    source.Read(read =>
                                    {
                                        read.Action("JobSearch", "SupportEditor");
                                    })
                                    .ServerFiltering(true);
                                })
                              .Events(e =>
                              {
                                  e.Select("Job_onSelect")
                                  })


function Job_onSelect (e) {
        var dataItem = e.dataItem;
        console.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
    }


The console reads:


event :: select (undefined : undefined)


The only way i have managed to pull data is with direct reference to the multiselect like below:

function Job_onSelect(e) {
console.log($("#JobIds").data("kendoMultiSelect").value().toString());
}
But this does not provide the values of selected item value as it is selected; instead it only gives the full value of the multiselect before the change occurs (e.g. if 3 items are selected it only returns items 1 and 2, and when the first item is selected it returns nothing).

1 Answer, 1 is accepted

Sort by
1
Petar
Telerik team
answered on 25 Jan 2022, 08:19 AM

Hi Jody,

To display the data of the selected MultiSelect item, you need to change the marked below properties. The new values should be these defined in the DataTextField and DataValueField configuration of the component. In the context of the shared code, the below:

function Job_onSelect (e) {
        var dataItem = e.dataItem;
        console.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
}

should be changed to:

function Job_onSelect (e) {
        var dataItem = e.dataItem;
        console.log("event :: select (" + dataItem.job_name+ " : " + dataItem.job_id+ ")");
}

Try the suggested above changes and let me know if they help you achieve the targeted functionality in your application.

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
MultiSelect
Asked by
Jody
Top achievements
Rank 1
Answers by
Petar
Telerik team
Share this question
or