Accessing the Selected DataText and DataValue withing an Event Script

[Kevin Gill]

Accessing the Selected DataText and DataValue

Please help...

@(Html.Kendo().ListBox()
.HtmlAttributes(new { title = "Accounts"})
.Name("ListAccounts")
.DataTextField("AccountName")
.DataValueField("AccountID")
.BindTo(Model)
.Events(events => events.Change("onChange"))
)

<script>
function onChange(e) {
var value = $("#ListAccounts").data("kendoListBox").dataSource._data[$("#ListAccounts").data("kendoListBox").selectedIndex].value;
GetFleetAssets(value);
}
</script>

How can i get the DataValueField "AccountID" for the selected item within an Event Script? I can see that the data is loaded by viewing the source.

script above does not function

[Kevin Gill]

Just tried the following but still no joy...

<script>
    function onChange(e) {
        var selectedID = $.map(this.select(), function (item) {
            return $(item).index("AccountID");
        });
        GetFleetAssets(selectedID);
    }
</script>

[Stefan]

Hello Kevin,

I already provided an answer to the same question in a ticket.

I will share the approach in the thread, so more people can benefit from it:

"
The desired result can be achieved on the change(or another custom) event, by retrieving first the selected element, and then based on the selected element to retrieve the information for the dataItem associated with that line:

function onChange(e) {
    var element = e.sender.select();
    var dataItem = e.sender.dataItem(element[0])
    console.log(dataItem)//In the application dataItem.AccountID should return the desired value
}

http://docs.telerik.com/kendo-ui/api/javascript/ui/listbox#methods-select

http://docs.telerik.com/kendo-ui/api/javascript/ui/listbox#methods-dataItem
"


Regards,
Stefan
Progress Telerik

[CCC]

The dataItem property will contain an array of the selected items.  The contents of each selected item will be the object in the dataSource for that item.

You can then use a for loop to process them individually, or just send the array back to the server using an Ajax call.

This is the code that I use:

function AddReviewer(e)
{
    var dataItems = e.dataItems;
    var url = window.location.href.replace("Reviewers", "AddReviewer");
    if (dataItems.length > 0) {
            $.ajax({
                url: url,
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ user_name: dataItems }),
                async: false,
                processData: false,
                cache: false,
                error: function (xhr) {
                }

            });
    }
    return false;
}

 

The code in my controller method is:

[HttpPost]
public void AddReviewer(BulkUserListing[] user_name)
{
    {
        var user_names = from user in user_name.ToList()
                         select user.user_name;
        System.Web.Security.Roles.AddUsersToRole(user_names.ToArray(), "Biospecimen Reviewer");
    }
}

 

The class used for the array is:

public class BulkUserListing
{
    public BulkUserListing();

    public string FullName { get; set; }
    public int member_id { get; set; }
    public int user_id { get; set; }
    public string user_name { get; set; }

}

 

I am not sure why you would want to use anything more complicated than this.

dataItems will always contain an array of the selected items.

 

 

[Stefan]

Hello,

Thank you for sharing this with the Kendo UI community, it is highly appreciated.

The information is shown with good details and snippets.

Still, if more complex scenarios arise, please let us know and we will gladly assist.

Regards,
Stefan
Progress Telerik