Difference between revisions of "Template:CustomItemRendering"

From Documentation
 
(2 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
If you just want to change the text e.g. enclosing it with brackets, just put <code><template></code> as its child and add characters with <code>${each}</code>:
 
If you just want to change the text e.g. enclosing it with brackets, just put <code><template></code> as its child and add characters with <code>${each}</code>:
  
<syntaxhighlight line lang='xml'>
+
    <{{{1}}}>
<{{{1}}}>
+
        <template name="model">[${each}]</template>
    <template name="model">[${each}]</template>
+
    </{{{1}}}>
</{{{1}}}>
 
</syntaxhighlight>
 
 
 
 
* The template only allows text that can be converted into a ZK <code>Label</code>.
 
* The template only allows text that can be converted into a ZK <code>Label</code>.
  
 
== Change HTML Structure ==
 
== Change HTML Structure ==
 
If you want to make more changes e.g. adding tooltips by setting title attributes, you need to create your own <code>ItemRenderer</code>. See [[ZK%20Developer's%20Reference/MVC/View/Renderer/Item%20Renderer]].
 
If you want to make more changes e.g. adding tooltips by setting title attributes, you need to create your own <code>ItemRenderer</code>. See [[ZK%20Developer's%20Reference/MVC/View/Renderer/Item%20Renderer]].

Latest revision as of 04:01, 5 December 2023

Custom Item Rendering

Since this component has no child component like Listbox, if you want to render its items differently, there 2 ways:

Change text

If you just want to change the text e.g. enclosing it with brackets, just put <template> as its child and add characters with ${each}:

   <{{{1}}}>
       <template name="model">[${each}]</template>
   </{{{1}}}>
  • The template only allows text that can be converted into a ZK Label.

Change HTML Structure

If you want to make more changes e.g. adding tooltips by setting title attributes, you need to create your own ItemRenderer. See ZK Developer's Reference/MVC/View/Renderer/Item Renderer.