Read-only setting from table from named MDX


#1

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:


#2

Hi @twu,

So you just wanted it to always be just non-editable right?

Instead of,

<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>

You can just make it as,

<td ng-repeat="cell in row.cells" class="text-right" >
    <span style="padding-right: 10px;">{{cell.value | formatNumber:0}}</span>
</td>


Paul