Currently, a selected item in a connected LVWP is only indicated by a filled, black diagonal arrow icon. I would like to add background color formatting for the selected item row. Note: I am not referring to checkbox-selected items.
I have been successful using Eric Fang's solution on a site page containing only the LVWP and connected InfoPath Form Web Part. His javascript, added to a CEWP on the site page, is as follows:
<script src="/_layouts/1033/unitingcare/jquery-1.7.1.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
$Text = $("IMG[alt='Selected']");
$Text.parent().parent().css("background-color", "lightgreen");
});
</script>
However, to complicate matters, I am trying to apply this on a page based on a master page that comes from Softlanding's Tabbed Webpart Zone.
The issue is, when the CEWP javascript is added to the Tabbed Web Part Zone page, the tabbed zone on the page disappears and the page is broken (edit page ribbon button non-working, etc.). I have searched high and low for other methods of changing the selected item row background but have come up empty handed. My best guess is there is interference between the Tabbed javascript and the CEWP javascript that I am too inexperienced to recognize.
The Tabbed Web Part Zone javascript is below:
<PublishingWebControls:EditModePanel runat="server" id="editmodestyles">
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/edit-mode-21.css %>"
After="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/page-layouts-21.css %>" runat="server"/>
</PublishingWebControls:EditModePanel>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<SharePoint:CssRegistration Name="http://mysite/_catalogs/masterpage/jquery-ui.css" After="Themable/corev15.css" runat="server" />
<SharePoint:ScriptBlock runat="server">
//for reference, http://kyleschaeffer.com/sharepoint/wp-tabify/
// http://jqueryui.com/tabs/
// > for this script to work properly, the proper css classes and styles should be included.
(function (jQuery) {
jQuery.fn.wpTabify = function () {
// if we're not in edit mode
if (jQuery('.ms-WPAddButton').size() == 0) {
// for each
this.each(function (i) {
// create variables needed for assembling tabs within this web part zone
var idName = jQuery(this).attr('id');
var tabList = jQuery('<ul class="wpt-ui-tabs-nav"/>');
var panels = jQuery('<div class="wpt-ui-tabs-wrapper"/>');
// for each web part in the web part zone, assemble the tab headers and tab content in the format JQuery UI tabs() method expects.
jQuery(this).find('div.ms-webpartzone-cell > div:first-child').each(function (j) {
jQuery(tabList).append('<li><a href="#ui-tab-panel' + idName + i + j + '"><span>' + jQuery(this).find('h2.ms-webpart-titleText').text() + '</span></a></li>');
var thisPanel = jQuery('<div id="ui-tab-panel' + idName + i + j + '" class="wpt-ui-tabs-panel"/>');
var panelContents = jQuery(this).detach();
jQuery(thisPanel).append(jQuery(panelContents).find('.ms-wpContentDivSpace'));
jQuery(panels).append(thisPanel);
});
// if we created any tabs, then push the new tabs structure back into the DOM, then call the jquery ui method .tabs()
if (jQuery(tabList).find('li').size() > 0) {
jQuery(this).prepend(panels);
jQuery(this).prepend(tabList);
jQuery(this).tabs();
}
// remove original webpart zone now that we've tabified what we wanted out of it
jQuery(this).find('div.ms-webpart-zone').remove();
});
}
};
})(jQuery);
function TabifyFnWrapper() {
// tabify the appropriate web part zone for this page layout
jQuery('#TabbedWebPartZoneWrapper').wpTabify();
//regardless of the tabify result, display the web part zone
jQuery('#TabbedWebPartZoneWrapper').css('display', 'inline-block');
}
// add to sharepoint javascript function queue to be called after page load
_spBodyOnLoadFunctionNames.push('TabifyFnWrapper');
</SharePoint:ScriptBlock>
Any help is appreciated, thanks.
<script>? – Amal Hashim Jan 19 '15 at 19:20