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

Get ListView Item ID from DataSource

11 Answers 3199 Views
ListView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Greg
Top achievements
Rank 1
Greg asked on 27 Mar 2012, 02:10 AM
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  

11 Answers, 1 is accepted

Sort by
0
Accepted
Nikolay Rusev
Telerik team
answered on 27 Mar 2012, 09:22 AM
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!
0
Greg
Top achievements
Rank 1
answered on 28 Mar 2012, 01:45 AM
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;
0
Saransh
Top achievements
Rank 1
answered on 10 Sep 2012, 07:37 PM
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.
0
Nikolay Rusev
Telerik team
answered on 11 Sep 2012, 06:43 AM
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!
0
Bill
Top achievements
Rank 1
answered on 08 Nov 2012, 02:35 AM
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();



0
Nikolay Rusev
Telerik team
answered on 08 Nov 2012, 07:34 AM
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!
0
Paul
Top achievements
Rank 1
answered on 14 Jan 2013, 11:49 PM
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]);
 }



0
Nikolay Rusev
Telerik team
answered on 17 Jan 2013, 09:30 AM
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!
0
Michael
Top achievements
Rank 1
answered on 17 Jun 2013, 05:05 PM
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()]);
 
}
0
Paul
Top achievements
Rank 1
answered on 21 Feb 2014, 05:32 PM
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,
0
Nikolay Rusev
Telerik team
answered on 24 Feb 2014, 09:59 AM
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!
Tags
ListView
Asked by
Greg
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Greg
Top achievements
Rank 1
Saransh
Top achievements
Rank 1
Bill
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Share this question
or