Nested Table Comlex JSON Jquery Template

Question

I am using entity framework LINQ to dispaly department,process and check info. Each Department has multiple process and each process can have multiple check. I want to dipslay the data in a manner that department will be display only once for multiple processs, and for each process check should be displayed in front of the process.

{"d":"[{\"DataEntryProcessInfos\":[{\"DataEntryCheckInfos\":[{\"CheckId\":21,\"CheckName\":\"Fahad     \",\"Frequency\":\"Weekly\"},{\"CheckId\":22,\"CheckName\":\"Fahad     \",\"Frequency\":\"Weekly\"},{\"CheckId\":63,\"CheckName\":\"Check Test\",\"Frequency\":\"Fortnightly\"}],\"ProcessId\":7,\"ProcessName\":\"Process 1\"}],\"DepartmentId\":2,\"DepartmentName\":\"Dept 2\"},{\"DataEntryProcessInfos\":[{\"DataEntryCheckInfos\":[{\"CheckId\":86,\"CheckName\":\"afdassd   \",\"Frequency\":\"Yearly\"}],\"ProcessId\":8,\"ProcessName\":\"Wasqur Process\"}],\"DepartmentId\":7,\"DepartmentName\":\"Dept 6\"},{\"DataEntryProcessInfos\":[{\"DataEntryCheckInfos\":[{\"CheckId\":65,\"CheckName\":\"New Check \",\"Frequency\":\"Weekly\"},{\"CheckId\":66,\"CheckName\":\"abc       \",\"Frequency\":\"Monthly\"},{\"CheckId\":67,\"CheckName\":\"2333      \",\"Frequency\":\"Weekly\"},{\"CheckId\":84,\"CheckName\":\"adafdasdfs\",\"Frequency\":\"Fortnightly\"},{\"CheckId\":85,\"CheckName\":\"Test check\",\"Frequency\":\"Fortnightly\"}],\"ProcessId\":9,\"ProcessName\":\"Process 2 Wasqur\"},{\"DataEntryCheckInfos\":[{\"CheckId\":65,\"CheckName\":\"New Check \",\"Frequency\":\"Weekly\"},{\"CheckId\":66,\"CheckName\":\"abc       \",\"Frequency\":\"Monthly\"},{\"CheckId\":67,\"CheckName\":\"2333      \",\"Frequency\":\"Weekly\"},{\"CheckId\":84,\"CheckName\":\"adafdasdfs\",\"Frequency\":\"Fortnightly\"},{\"CheckId\":85,\"CheckName\":\"Test check\",\"Frequency\":\"Fortnightly\"}],\"ProcessId\":14,\"ProcessName\":\"My New Procees\"}],\"DepartmentId\":8,\"DepartmentName\":\"Dept 7\"},{\"DataEntryProcessInfos\":[{\"DataEntryCheckInfos\":[{\"CheckId\":68,\"CheckName\":\"CHeck 1   \",\"Frequency\":\"Weekly\"},{\"CheckId\":73,\"CheckName\":\"New Check \",\"Frequency\":\"Fortnightly\"},{\"CheckId\":74,\"CheckName\":\"Checker   \",\"Frequency\":\"Weekly\"},{\"CheckId\":77,\"CheckName\":\"Wasi      \",\"Frequency\":\"Weekly\"}],\"ProcessId\":10,\"ProcessName\":\"My New Process\"},{\"DataEntryCheckInfos\":[{\"CheckId\":68,\"CheckName\":\"CHeck 1   \",\"Frequency\":\"Weekly\"},{\"CheckId\":73,\"CheckName\":\"New Check \",\"Frequency\":\"Fortnightly\"},{\"CheckId\":74,\"CheckName\":\"Checker   \",\"Frequency\":\"Weekly\"},{\"CheckId\":77,\"CheckName\":\"Wasi      \",\"Frequency\":\"Weekly\"}],\"ProcessId\":12,\"ProcessName\":\"Tes\"}],\"DepartmentId\":13,\"DepartmentName\":\"Dept 11\"}]"}

Here is the example.

---

| Deptarment | Process | Checks |

| Dept 1 | Process A | Check A

|------------|-------------| Check B

|------------| Process B | Check A

|------------|-------------| Check B

|------------|-------------| Check C

|------------|-------------| Check D

| Dept 2 | Process A | Check A

|------------|-------------| Check A

i want to bind data using Jquery Template like above example but i don't want to use nested table as it will create problems for fluid templates as well as header will not be display properly. here is my template in the above question.

 <tr>
    <td>
        <div class="btn-group  row-fluid" style="margin-top: 4px">
            <button class="btn">
                ${DepartmentId}</button>
            <button class="btn btn-success">
                    ${DepartmentName}</button></div>
    </td>
    <td colspan="4">
        <table class="table table-striped table-bordered dataTable" border="0" cellspancing="0"
            cellpadding="0" style="width: 100%">
            {{each DataEntryProcessInfos}}<tr>
                <td style="width: 20%">
                    <div class="btn-group row-fluid" style="margin-top: 4px">
                        <button class="btn">
                            ${ProcessId}</button>
                        <button class="btn btn-warning">
                                ${ProcessName}</button></div>
                </td>
                <td style="width: 60%">
                    <table style="width: 100%" class="table table-striped table-bordered dataTable">
                        {{each DataEntryCheckInfos}}<tr>
                            <td style="width: 33%">
                                <div class="btn-group row-fluid" style="margin-top: 4px">
                                    <button class="btn">
                                        ${CheckId}</button>
                                    <button class="btn btn-danger">
                                            ${CheckName}</button></div>
                            </td>
                            <td style="width: 33%">
                                <button class="btn">
                                    ${Frequency}
                                </button>
                            </td>
                            <td style="width: 33%">
                                <a class="btn-link" href="CheckItems.aspx?checkId=${CheckId}&mode=entry">Action
                                </a>
                            </td>
                        </tr>
                        {{/each}}
                    </table>
                </td>
            </tr>
            {{/each}}
        </table>
    </td>
</tr>