jQuery Grid Templates

With the flexible templating mechanism in the ShieldUI grid widget, you can define your own layout for all elements. The following templates are available:

Row template and Alternating row template
You can define a template for each row and alternating row via the rowTemplate and altRowTemplate settings of the grid. It takes an html template which will be added into the each grid row and alternating row:

<script id="rowTemplate" type="text/x-shield-template">
    <tr class="row">            
      
    </tr>               
</script>
<script id="altRowTemplate" type="text/x-shield-template">
   <tr class="alt-row">          
     
    </tr>               
</script>


$(document).ready(function () {
    $("#grid").shieldGrid({
        dataSource: {
            data: gridData
        },           
        paging: {
            pageSize: 12,
            pageLinksCount: 10
        },
       rowTemplate: $("#rowTemplate").html(),
       altRowTemplate: $("#altRowTemplate").html(),
       columns: [
        { title: "Contacts" }           
        ]
    });
});
  

A live example is available here: row-templates

Detail templates
In order to show more information about the grid row you can use the detail template which is shown under each row. The detail template can be static as well as expand/collapsible. This is controlled by the detailExpandCollapse property.

    <script id="detailTemplate2" type="text/x-shield-template">
         <table>
            <tr class="row">
               <td>
                   <img src="images/categories/{Category.CategoryID}.png" alt="{Category.CategoryName}" />
               </td>
               <td>
                    {ProductName} 
                    {UnitPrice} 
                    {UnitsInStock} 
                    {Discontinued}
    </td>
 </tr>
</table>
    </script>
$("#grid2").shieldGrid({
    dataSource: {
        data: products
    },
    detailTemplate: $("#detailTemplate2").html(),
    detailExpandText: "+",
    detailCollapseText: "-",
    scrolling: true,
    height: 330,
    rowHover: false,
    altRows: false,
    columns: [
    { field: "ProductID", title: "ProductID", width: "330px" },
    { field: "['Category']['CategoryName']", title: "CategoryName", format: "{0:c}", width: "330px" },
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "230px" },
    { field: "UnitsInStock", title: "Units In Stock", width: "230px" },
    { field: "Discontinued", width: "230px" }
    ]
});    

A live example is available here: Detail Tempalte

Column templates
You can define a different tempalte for each column of the grid control. To do that you just need to set columnTemplate option to the html template:

<script id="nameTemplate" type="text/x-shield-template">
    <div class="image">
      ...
    </div>
</script>
$(document).ready(function () {
    $("#grid").shieldGrid({
        dataSource: {
            data: gridData
        },
        paging: {
            pageSize: 4,
            pageLinksCount: 10               
        },
        altRows: false,
        columns: [
        { field: "name", title: "Person", columnTemplate: $("#nameTemplate").html(), width: "217px" },
        { field: "company", title: "Company Name" },
        { field: "phone", title: "Contact Phone" }
        ]
    });
    });    

A live example is available here: column templates

Column header templates
You can define a different tempalte for each column’s header of the grid control. To do that you just need to set columnTemplate option to the html template:

<script id="template1" type="text/x-shield-template">
       <div id="People" class="header">                   
           <span class="icon1"> </span>
            <span class="text">Person Name</span>
       </div>
</script>
$(document).ready(function () {
    $("#grid").shieldGrid({
        dataSource: {
            data: gridData
        },
        paging: {
            pageSize: 12,
            pageLinksCount: 10
        },
        altRows: false,
        columns: [
        { field: "name", headerTemplate: $("#template").html()},
       ]
    });
    });

A live example is available here: column templates