Question
Andy Stobirski · Nov 7

Displaying custom icons in Zen TablePane

Hi

Can anyone explain how to display custom icons in a TablePane?

Andy

0
0 141
Discussion (4)3
Log in or sign up to continue

Hi Andy,

If you are using the tableNagator you can extends and override the XData Contents with icons, in the place of default buttons. Class to extends %ZEN.Component.tableNavigator 

If you are using the tableNagatorBar you can extends and override the javascript method renderButtons with icons, in the place of default buttons. Class to extends %ZEN.Component.tableNavigatorBar

Hi Christiano

Thanks for your reply - I'm not sure how to go about doing that. So, if I had a .PNG how would I display it on a zen page?

Andy

Hi Andy.

Follows a very simple example:

Navigation Customized:

/// br.cjs.zen.TableNavigator
Class br.cjs.zen.TableNavigator Extends %ZEN.Component.tableNavigator
{

/// Este é o namespace XML para este componente.
Parameter NAMESPACE = "br.cjs.zen";

/// Contents of this composite component:
/// This is a set of paging buttons as well as text controls
/// to show the current page number.
XData Contents
{
<composite xmlns="http://www.intersystems.com/zen">
    <hgroup labelPosition="left" cellAlign="left">
        <!-- originally was a series of buttons -->
        <image id="btnFirst" onclick="zenThis.composite.gotoPage('first');" src="navigation/First.png"/>
        <image id="btnPrev"  onclick="zenThis.composite.gotoPage('prev');"  src="navigation/Previus.png"/>
        <image id="btnNext"  onclick="zenThis.composite.gotoPage('next');"  src="navigation/Next.png"/>
        <image id="btnLast"  onclick="zenThis.composite.gotoPage('last');"  src="navigation/Last.png"/>
        <!-- End -->
        <spacer width="20"/>
        <text id="pageNo" size="2" labelClass="tn-pageLabel" onchange="zenThis.composite.gotoPage(zenThis.getValue());" />
        <text id="pageCount" size="4" labelClass="tn-pageLabel" readOnly="true" />
        <spacer width="*"/>
    </hgroup>
</composite>
}

}

Sample usage: