How to use Template onTemplateItemBound Event

When jQXB generates new instances of template items, or when the binding process takes place between an enumerable collection and
a template container, jQXB raises an event for each creation allowing the programmer to perform some operations.
This event is very useful when, for example, if you intend to assign specific features to individual elements of a template such as
example those relating to the cancellation or the editing of the record but is also extremely useful when you want to assign values or
impose particular behaviour according to the contents within the record element that is currently displayed.

To do this, you must attach an appropriate event handler with the jQXB.addOnTemplateItemBound(handler) function, which is normally done in the initialization routine

the method that should be used to set the return visit must have the following signature:

function (dataSourceName, templateName, occurrency, dataItem, templateItem).

  • dataSourceName is the name of the datasource that is used as the datasource for binding
  • templatename is the name of the current template
  • occurrency is the index of the nth element
  • dataItem contains the item that is currently associated with
  • templateItem is a jQuery object containing the block that represents the item template currently associated


Html declarations


        <tbody jqxb-templatecontainer="addressTemplate" jqxb-datasource="mydataDetails">
            <tr jqxb-template="addressTemplate" jqxb-templateitemidprfx="addressrow" style="display: none;">
                <td><input type="text"  jqxb-itemdatamember="prefix" /></td>
                <td><input type="text"  jqxb-itemdatamember="number" /></td>
                <td><input type="text"  class="rowsummary" /></td>
                <td><a href="#" class="onSelect">Click To See Data</a></td>



jQXB code


    jQuery(document).ready(function () {
        // Initialize the System
        // Attach template Event Handling, it should be declared before binding 
        jQXB.addOnTemplateItemBoundhnd(function (dataSourceName, templateName, occurrency, dataItem, jQrytemplateItem) {
            switch (templateName) {
                case "addressTemplate": // filter only event databound from a specifica template
                    var jQryElem = jQrytemplateItem.find('.rowsummary');
                    var jQryBtn = jQrytemplateItem.find('.onSelect');
                    jQryElem.val(' the row  ' + occurrency + ' has been created in template \'' + templateName + '\', values : ' + dataItem.prefix + ' and ' + dataItem.number);
                    // prevent events fires twice in case of re-binding
                    jQryBtn.bind('click', function () {
                                alert('Row ' + occurrency + ' selected , calling ' + dataItem.prefix + '-' + dataItem.number); 

Last edited Aug 3, 2011 at 6:49 PM by lightcode, version 5


No comments yet.