Accessing the Selected DataText and DataValue withing an Event Script

5 posts, 0 answers
  1. Kevin Gill
    Kevin Gill avatar
    2 posts
    Member since:
    Oct 2006

    Posted 12 Jul 2017 Link to this post

    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

  2. Kevin Gill
    Kevin Gill avatar
    2 posts
    Member since:
    Oct 2006

    Posted 12 Jul 2017 Link to this post

    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>

  3. Stefan
    Admin
    Stefan avatar
    2525 posts

    Posted 14 Jul 2017 Link to this post

    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 visualization (charts) and form elements.
  4. CCC
    CCC avatar
    2 posts
    Member since:
    Jun 2014

    Posted 19 Jun 2018 in reply to Stefan Link to this post

    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.

     

     

  5. Stefan
    Admin
    Stefan avatar
    2525 posts

    Posted 20 Jun 2018 Link to this post

    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.
Back to Top