Get ListView Item ID from DataSource

Thread is closed for posting
12 posts, 1 answers
  1. Greg
    Greg avatar
    11 posts
    Member since:
    Mar 2012

    Posted 26 Mar 2012 Link to this post

    Hi All,

    I have a ListView object in my page that is linked to a DataSource(contains name and ID), and formatted with a Kendo Template object. A user is going to select one of the items in the list, then I need to capture the Selected Item's ID from the data source. I cannot figure out how to do this properly

    I figured out how to get the Selected Item from a drop down list.
    var id = $("#dbdropdownlist").data("kendoDropDownList").value().toString();

    But I cannot figure out how to do something similar with the ListView object. I assume I want to use the 'Select()' method, but that returns an HTML object(I assume from the template), which means that I have to search through child objects and stuff...seemd too complicated.

    Any one have an idea of how to accomplish what I have outlined above? Any help would be appreciated.
    Greg

    OS: Windows 7
    Browser: Chrome 17.0.963.83
    Kendo UI Beta v2012.1.229 
    jQuery JavaScript Library v1.7.1  
  2. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 27 Mar 2012 Link to this post

    Hello Greg,

    The following fiddle demonstrates how you can get the data item for selected item in ListView:
    http://jsfiddle.net/AAMLA/

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Greg
    Greg avatar
    11 posts
    Member since:
    Mar 2012

    Posted 27 Mar 2012 Link to this post

    That ended up doing it! I couldn't use 'this' because I was in a different part of the code. Thanks for the help Nikolay.

    This is the final piece of code I got this to work in:
    var dbConnObj = $("#lstdbconn").data("kendoListView");
    var index = dbConnObj.select().index(),
                        dataItem = dbConnObj.dataSource.view()[index];
    var _id = dataItem.ID;
  5. Saransh
    Saransh avatar
    1 posts
    Member since:
    Jul 2012

    Posted 10 Sep 2012 Link to this post

    Nikolay, I have a similar issue but I have the selectable property set to "multiple". 

    I am able to retrieve multiple html objects doing the select() method, but from that array I am not sure how to retrieve the index value of each element selected. 

    In short could the below method work for multiple selections if so how? 


    Thanks and Regards,
    Saransh.
  6. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 11 Sep 2012 Link to this post

    Hello Saransh,

    You will have to iterate over the selected elements and execute the logic over every item.

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Bill
    Bill avatar
    3 posts
    Member since:
    Oct 2012

    Posted 07 Nov 2012 Link to this post

    Could you please be more specific?

    How do I get the selected elements?

    The following code doesn't work:

    var selections = lv.select();
    var index1 = selections[0].index();
    var index2 = selections[1].index();



  8. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 08 Nov 2012 Link to this post

    Hello Bill,

    You can find an example few posts bellow in a jsfiddle.

    Greetings,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Paul
    Paul avatar
    29 posts
    Member since:
    May 2011

    Posted 14 Jan 2013 Link to this post

    What is with the 1 line answers? The KendoUI documentation is lacking enough as it is.

    For the benefit of paying subscribers like myself please provide more detailed responses with examples.  I don't see any additional posts below... unless you meant threads. If that is the case please link to the answer so we don't need to hunt around for it.

    In response to Bill this is the solution I went with... not sure if there is an easier way.

    var lv= $("#listviewID").data("kendoListView");

    var allItems = lv.items();
    var selections = lv.select();

     for (i = 0; i < selections.length; i++) {
                var currentIndex = allItems.index(selections[i]);
     }



  10. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 17 Jan 2013 Link to this post

    Hello Paul,

    This thread is rather old. It started in March 2012 and the last post is more that two months ago. What is your question? The original question in this thread has been answered and my post marked as answer

    My first post has a runnable sample(jsfiddle) in which there are essentially 3 lines of code for getting the data item from selected element.

    change: function() {
      var index = this.select().index(),
       dataItem = this.dataSource.view()[index];
     log("id: " + dataItem.id + ", text: " + dataItem.text);
    }

    This is sample(one of possible) implementations for this scenario. Here is a related docs:
     - the change event
     - the select method
     - dataSource.view method

    "What is with the 1 line answers? The KendoUI documentation is lacking enough as it is."

    What is lacking from our documentation? We will be more than happy to hear about it, so we can improve it. Do you know that you can contribute to our docs portal. Kendo UI Docs allows and encourages the passionate Kendo UI community to get involved in making the Kendo UI docs better.

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Michael
    Michael avatar
    19 posts
    Member since:
    Oct 2011

    Posted 17 Jun 2013 Link to this post

    I was looking for a similar answer and have a very related one that will also provide a working example (though not all that different from those already here).

    $('#contentListView').kendoListView({
            dataSource: data
            , template: kendo.template($("#template").html())
            , selectable: "single"
            , schema: {
                model: {
                    children: "Children"
                    , id: "id"
                    , hasChildren: "hasChildren"
                }
            }
            ,change: selContentItem
        });
     
    function selContentItem(e) {
        //I would expect the following to return true and if it did (and similar logic followed), the next line would work nicely but it doesn't because the first line returns false. Why?
     
        console.log(e.sender == $('#contentListView').data('kendoListView'));
        console.log(e.sender.dataSource.view()[e.sender.select().index()]);
     
    }
  12. Paul
    Paul avatar
    3 posts
    Member since:
    Jan 2014

    Posted 21 Feb 2014 in reply to Nikolay Rusev Link to this post

    Hi Nikolay,

    I have tried getting the selected item as you describe here.
    The index resolves correctly but the dataItem resolves to undefined.
    Are there any changes you have done in retrieving the selected item?
    Would you share?

    Best,
  13. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 24 Feb 2014 Link to this post

    Hello Paul,

    This thread contains an example and explanation of how to get the data item from selected item.
    The ListView selection online demo also demonstrates this.

    Regards,
    Nikolay Rusev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready