This is a migrated thread and some comments may be shown as answers.

Accessing the Selected DataText and DataValue withing an Event Script

4 Answers 231 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Kevin Gill
Top achievements
Rank 1
Kevin Gill asked on 12 Jul 2017, 02:33 PM

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

4 Answers, 1 is accepted

Sort by
0
Kevin Gill
Top achievements
Rank 1
answered on 12 Jul 2017, 02:47 PM

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>

0
Stefan
Telerik team
answered on 14 Jul 2017, 07:22 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
CCC
Top achievements
Rank 1
answered on 19 Jun 2018, 01:44 PM

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.

 

 

0
Stefan
Telerik team
answered on 20 Jun 2018, 06:13 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ListBox
Asked by
Kevin Gill
Top achievements
Rank 1
Answers by
Kevin Gill
Top achievements
Rank 1
Stefan
Telerik team
CCC
Top achievements
Rank 1
Share this question
or