JQuery Template not displaying record set as groupby

I have tried different ways to display Title which is GroupBy field but not showing in the grid. All the other records are showing properly in grouping.

Anyone tell me how to fix that?

Record now showing but not filling ${Title} placeholder

Tabular record ahowing

{Title}
        HRDInactive     HRD     
        HRDN1           HR  
        HRBDN           HRB     
        HRBCDN          HRC     
{Title}
        PatientsCInactive       PatientsC   
        PatientsADN             PatientsA   
        PatientsBDN             PatientsB

Rsponse in Firefox Firebug

[[{"ParentMenuId":0,"Id":30,"GroupName":"footer_menu","IndexOrder":0,"Title":"Health Resources","DisplayName":"HRDInactive","UrlName":"HRD","Active":false,"Message":null,"Status":null},{"ParentMenuId":0,"Id":27,"GroupName":"footer_menu","IndexOrder":1,"Title":"Health Resources","DisplayName":"HRDN1","UrlName":"HR","Active":true,"Message":null,"Status":null},{"ParentMenuId":0,"Id":28,"GroupName":"footer_menu","IndexOrder":2,"Title":"Health Resources","DisplayName":"HRBDN","UrlName":"HRB","Active":true,"Message":null,"Status":null},{"ParentMenuId":0,"Id":29,"GroupName":"footer_menu","IndexOrder":3,"Title":"Health Resources","DisplayName":"HRBCDN","UrlName":"HRC","Active":true,"Message":null,"Status":null}],[{"ParentMenuId":0,"Id":26,"GroupName":"footer_menu","IndexOrder":1,"Title":"Patients","DisplayName":"PatientsCInactive","UrlName":"PatientsC","Active":false,"Message":null,"Status":null},{"ParentMenuId":0,"Id":24,"GroupName":"footer_menu","IndexOrder":2,"Title":"Patients","DisplayName":"PatientsADN","UrlName":"PatientsA","Active":true,"Message":null,"Status":null},{"ParentMenuId":0,"Id":25,"GroupName":"footer_menu","IndexOrder":3,"Title":"Patients","DisplayName":"PatientsBDN","UrlName":"PatientsB","Active":true,"Message":null,"Status":null}]]

AJAX Call

var ReloadGrid = (function(){
            $.getJSON("/FooterMenu/GetFooterGrid", function(data) {
                $('#gridTemplate').tmpl(data).appendTo('table.gridTable > tbody');
            });
 });

Template

<script id="gridTemplate" type="text/x-jQuery-tmpl">
    <tr class="gridRow">
        <td class="gridSpan" >${Title}</td>
    </tr>
    {{tmpl($data) "#cellTemplate"}}
</script>
<script id="cellTemplate" type="text/x-jQuery-tmpl">
    <tr class="gridRow">
        <td class="cellTd">${DisplayName}</td>

    </tr>
</script>   


<div class="gridDiv">
<table class="gridTable" cellspacing="0" cellpadding="0">
    <tbody>
        <tr class="gridTitleRow">
            <td class="iconLink widthAuto">Display Name</td>
        </tr>
    </tbody>
</table>
</div>

Solution

When the tmpl function is passed an array, it will execute the template for each item in the array.

What is happening in your sample is that the gridTemplate is given each item in the outer-most array, which is actually an array of your items like:

[{"ParentMenuId":0,"Id":30,"GroupName":"footer_menu","IndexOrder":0,"Title":"Health Resources","DisplayName":"HRDInactive","UrlName":"HRD","Active":false,"Message":null,"Status":null},{"ParentMenuId":0,"Id":27,"GroupName":"footer_menu","IndexOrder":1,"Title":"Health Resources","DisplayName":"HRDN1","UrlName":"HR","Active":true,"Message":null,"Status":null},{"ParentMenuId":0,"Id":28,"GroupName":"footer_menu","IndexOrder":2,"Title":"Health Resources","DisplayName":"HRBDN","UrlName":"HRB","Active":true,"Message":null,"Status":null},{"ParentMenuId":0,"Id":29,"GroupName":"footer_menu","IndexOrder":3,"Title":"Health Resources","DisplayName":"HRBCDN","UrlName":"HRC","Active":true,"Message":null,"Status":null}]

Then, when you pass $data to the cellTemplate, it is executing the template for each item in the above array, which allows you to get at your actual data.

If the Title is the same on each item in the outer array, then I suppose that you could do something like:

<td class="gridSpan" >${$data[0].Title}</td>