Hi all,
I have below code to generate a table from named MDX results. (i just copied from samples)
Realized this table is all editable, how can i make it read-only?
I know there is a read-only attribute for tm1-ui-dbr, how to do the same for below code?
<table class="table table-striped" ng-if="!loading">
<thead>
<tr ng-repeat="row in dataset.headers">
<th ng-repeat="col in row.rows" ng-if="col.visible" colspan="{{col.colspan}}" rowspan="{{col.rowspan}}" class="text-center" >
{{col.dimension}}
</th>
<th ng-repeat="col in row.columns" ng-if="col.visible" colspan="{{col.colspan}}" rowspan="{{col.rowspan}}" class="text-center" >
{{col.name}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in table.data()" >
<td ng-repeat="el in row.elements" ng-if="el.visible || $parent.$index == 0" colspan="{{el.colspan}}" rowspan="{{el.rowspan}}" ng-class="{'tm1-ui-element-consol': el.element.type == 'C'}" >
<span class="tm1-ui-indent" ng-repeat="item in el.element.indent"></span>
<span ng-if="el.element.type != 'C'" style="margin-right:20px;"></span>
<i ng-if="el.element.type == 'C' && !el.element.collapsed && $index == 0" ng-click="el.element.toggle();table.refresh();" class="fa fa-caret-down fa-fw" style="margin-right:5px; cursor: pointer;" ></i>
<i ng-if="el.element.type == 'C' && el.element.collapsed && $index == 0" ng-click="el.element.toggle();table.refresh();" class="fa fa-caret-right fa-fw" style="margin-right:5px; cursor: pointer;" ></i>
<i ng-if="el.element.type == 'C' && $index > 0" class="fa fa-angle-down fa-fw" style="margin-right:5px;" ></i>
{{el.name}}
</td>
<td ng-repeat="cell in row.cells" class="text-right" >
<input ng-if="!cell.isReadOnly" type="text" class="form-control text-right" ng-model="cell.value" ng-blur="cell.update(query);" />
<span ng-if="cell.isReadOnly" style="padding-right: 10px;">{{cell.value | formatNumber:0}}</span>
</td>
</tr>
</tbody>
</table>
<div>
<div class="btn-group" role="group" >
<button type="button" class="btn btn-default" ng-click="table.previous()"><i class="fa fa-angle-left"></i></button>
<span class="btn btn-default" style="width: 100px;">{{table.page()}} of {{table.pages()}}</span>
<button type="button" class="btn btn-default" ng-click="table.next()"><i class="fa fa-angle-right"></i></button>
</div>
<div class="btn-group pull-right" role="group" >
<button type="button" class="btn btn-default" ng-class="{'active': table.isPageSize(10)}" ng-click="table.pageSize(10)">10</button>
<button type="button" class="btn btn-default" ng-class="{'active': table.isPageSize(15)}" ng-click="table.pageSize(15)">15</button>
<button type="button" class="btn btn-default" ng-class="{'active': table.isPageSize(30)}" ng-click="table.pageSize(30)">30</button>
<button type="button" class="btn btn-default" ng-class="{'active': table.isPageSize(50)}" ng-click="table.pageSize(50)">50</button>
<button type="button" class="btn btn-default" ng-class="{'active': table.isPageSize(100)}" ng-click="table.pageSize(100)">100</button>
</div>
</div>
This is my result:
