New post
Question
· Nov 7, 2022

Displaying custom icons in Zen TablePane

#ZEN #Caché #TrakCare

Hi

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

Andy

Discussion (3)3
Log in or sign up to continue
Cristiano Silva · Nov 7, 2022

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

0 0
Cristiano Silva · Nov 8, 2022

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:

0 0