How can I get the ID of the connected Item of ListView?

Question

I have three connected ListView web parts on an application page, and I want to be able to access the item that is selected in each web part. This is not selected as in the "checkboxes" but rather, the connected item that is passing the filter value to the next web part. I've tried

myWebPart.Connections // empty
myWebPart.FilterValue // null
myWebPart.ConnectionID // null

and virtually every other property of my web part. Is there no way to get the ID of the item being connected?

Answer 1

I created three web parts connected together and filterable using Title:

Choose a color -> Choose a fruit -> View fruit details.

I created the following selector (jQuery required):

$('img[alt="Selected"]').parent().next().children('div.ms-vb');

Which returns an array of the selected elements which have an ID attribute. You could then do a simple each and do the work you want with each ID.

$('img[alt="Selected"]').parent().next().children('div.ms-vb').each(function(i){
   console.log($(this).attr('id'));
});
// will give you:
// 3 (Blue)
// 2 (Blueberry)

Shows up like this in Chrome console:

I think this will work as long as the you use the Title (linked to item) column in the web parts.

Answer 2

If you use JSLink instead, I think you can connect to the items in the ListView Web Part like this:

1. In a location of your choice (such as SiteAssets library of your site, or in _catalogs/masterpage), create new JavaScript file.
2. In the file, add the code below
3. In your web part, reference this JavaScript file in the JSLink setting, like ~/site/SiteAssets/news_ui.js

(function () {
 // Initialize the variables for overrides objects
 var overrideCtx = {};
 overrideCtx.Templates = {};

 overrideCtx.Templates.Fields = {
 'ID': { 'ItemID' : ctx.CurrentItem.ID } 
 };

 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
 })();

Reference:

• SharePoint 2013: Linking item titles to items
• JSLink and Display Templates Part 1 – Overview, URL Tokens and Applying JSLink to objects