· Nov 7, 2022

Displaying custom icons in Zen TablePane


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


Discussion (3)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 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="">
    <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="*"/>


Sample usage: