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