devDemo.html 5.54 KB
<div>
    <div ng-switch="showPanel">
        <div ng-switch-when="1">
            <div ng-model="autoWidth" dx-check-box="{text:'columnAutoWidth'}"></div>
            <div ng-model="allowColumnReordering" dx-check-box="{text: 'Allow Column Reordering'}"></div>
            <div ng-model="allowColumResizing" dx-check-box="{text:'Allow Column Resizing'}"></div>
            <div id="dataGrid" dx-data-grid="dataGridOptions" dx-item-alias="item">
                <div data-options="dxTemplate:{name:'companyTemplate'}">
                    <a ng-href="{{item.data.Website}}">{{item.data.CompanyName}}</a>
                </div>
            </div>
        </div>

        <div ng-switch-when="2">   
    <div id="grid-custom-header" dx-data-grid="dataGridHeaderOptions" dx-item-alias="tb" style="height: 440px;">
       
    </div>
    <script id="rowHeader" type="text/html">

        <tr class="dx-row dx-column-lines dx-header-row" role="row">
            <td></td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>

        </tr>

    </script>
    <script id="gridRow" type="text/html">
        <tbody ng-if="tb.rowIndex ===0">
            <tr class="dx-row dx-column-lines dx-header-row" role="row">
            <td></td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>
            <td>
                <div dx-select-box="{
        dataSource: trialBalanceOptions,
            valueExpr: 'id',
            displayExpr: 'name'
                     }"></div>
            </td>

        </tr>
            <tr class="dx-row dx-data-row dx-row-alt dx-row-lines dx-column-lines">
                <td>{{tb.data.id}}</td>
                <td>{{tb.data.code}}  </td>
                <td>{{tb.data.name}}</td>
                <td>{{tb.data.initdebit}}  </td>
                <td>{{tb.data.initcridet}}</td>
                <td>{{tb.data.debit}}  </td>
                <td>{{tb.data.cridet}}  </td>
                <td>{{tb.data.lastdebit}}</td>
                <td>{{tb.data.lastcridet}}  </td>
            </tr>
        </tbody>
        <tbody ng-if="tb.rowIndex!==0" ng-class="{'dx-row-alt':(tb.rowIndex % 2)}">
            <tr class="dx-row dx-data-row dx-row-lines dx-column-lines">
                <td>{{tb.data.id}}</td>
                <td>{{tb.data.code}}  </td>
                <td>{{tb.data.name}}</td>
                <td>{{tb.data.initdebit}}  </td>
                <td>{{tb.data.initcridet}}</td>
                <td>{{tb.data.debit}}  </td>
                <td>{{tb.data.cridet}}  </td>
                <td>{{tb.data.lastdebit}}</td>
                <td>{{tb.data.lastcridet}}  </td>
            </tr>
        </tbody>
    </script>


    </div>

    </div>

</div>