Showing posts with label SharePoint Display Template Hover click. Show all posts
Showing posts with label SharePoint Display Template Hover click. Show all posts

Saturday, 10 May 2014

SharePoint Display Template Hover click

SharePoint Display Template Hover click
Add below code in item template
var tileId=encodedId + "tile";
var containerId=encodedId + "container";
var featureinformation=$getItemValue(ctx, "Feature Information");
var linkMarkup="<a href='" + linkURL.value + "'><div class='cbs-sliding-details-preview-pane-link'>See more information</div></a>";
var contentMarkup="<div class='cbs-preview-pane-feature-details'>" + featureinformation.value + linkMarkup + "<\div>";
addPreviewPaneContentData([containerId,contentMarkup]);
============================
function addPreviewPaneContentData(newData){
previewPaneContentData.push(newData);
}
function setCurrentPaneId(newId){
curretntPanelId = newId;
}
function getCurrentPanelId(){
return(currentPanelId);
}
function previewpane_init() {
$('.cbs-sliding-details-container').click(tileClick);
$('.cbs-sliding-details-container').first().click();
}
function tileClick() {
if (previewPanelContentData != null)
{
for(var i=0; i<previewPanelContentData.length; i++)
{
if($(this.attr("id")==previewPanelContentData[i][0]){
$('#previewPanelHeroPanel').html(previewPanelContentData[i][1]);
break;
}
}
}
See below video from 40 min onwards..
http://channel9.msdn.com/Events/SharePoint-Conference/2012/SPC246