Create the best Web experiences in browsers and devices with our user interface controls designed expressly for jQuery, ASP.NET MVC, HTML 5 and CSS 3. You’ll be building on a solid and proven foundation without any plug-ins or extensions, just real world best practices and the most forward-thinking, robust Web technology.

Infragistics NetAdvantage jQuery API Reference

igTemplating

igTemplating_image
The templating engine is a high-performance engine capable of working stand-alone as well as integrated with NetAdvantage for jQuery controls. The templating engine features support for scalar property output, nested property output, block IF tags, block –IF/ELSE tags, block EACH tag and more. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

Code Sample

 
      <!doctype html>
      <html>
      <head>
          <!-- jQuery Core -->
          <script src="js/jquery.js" type="text/javascript"></script>
          <!-- jQuery UI -->
          <script src="js/jquery-ui.js" type="text/javascript"></script>
          <!-- Infragistics Loader Script -->
          <script src="js/infragistics.loader.js" type="text/javascript"></script>
          <!-- Infragistics Loader Initialization -->
          <script type="text/javascript">
              $.ig.loader({
                  scriptPath: "js/",
                  cssPath: "css/",
                  resources: "igTemplating"
              });
        
              $.ig.loader(function () {
      var employees = [{ firstName: "Tom", lastName: "Wickens", age: 22 },{  firstName: "Jessica", lastName: "Alba", age: 25}, {  firstName: "Jennifer", lastName: "Smith", age: 33}, {  firstName: "John", lastName: "Rider", age: 35} ];
      var template = '{{if $i%2 == 0 }}' +
      '<tr><td><b>First Name: </b>${firstName}</td><td><b>First Name: </b>${lastName}</td><td><b>Age: </b>${age}</td></tr>' +
      '{{else}}' +
      '<tr class="alternateRow"><td><b>First Name: </b>${firstName}</td><td><b>First Name: </b>${lastName}</td><td><b>Age: </b>${age}</td></tr>'+
      '{{/if}}';
		      var data = $.ig.tmpl(template, employees);
		      $(data).appendTo('#result');         
              });
          </script>
      </head>
      <body>
          <table id="result"></table>
      </body>
      </html>

Related Samples

Related Topics

Dependencies

  • directives

    Type:
    object
    Default:
    {}

    Used to compile template directives.

    • close

      Type:
      string
      Default:
      ) {

    • end

      Type:
      string
      Default:
      }

    • 'if'

      Type:
      string
      Default:
      {

  • regExp

    Type:
    object
    Default:
    {}

    Used to tokenize the template string.

The current widget has no events.

  • encode

    igTemplating( "encode", value:string );
    Return Type:
    string

    Encoding < > ' and ".

    • value
    • Type:string
    • The string to be encoded.

  • tmpl

    igTemplating( "tmpl", template:string, data:object, [args:array] );
    Return Type:
    string

    Templates the given template with the provided data. If data is a function that requires arguments, the arguments need to be
    provided as an array following the data.
    tmpl(template, data[, args])
    then it has to be object or array returning function, possible receiving arguments array which can be specified as the third
    parameter.
    function.

    • template
    • Type:string
    • Specifies the template string.
    • data
    • Type:object
    • Specifies the data to be templated in the template. If function is provided,.
    • args
    • Type:array
    • Optional
    • If function is provided as the second parameter, then this parameter is the arguments for the.

    Code Sample

     
        var data = [{prop: ‘Value’}];
        var result = $.ig.tmpl(‘${prop}’, data);
        //The result is "Value"