Interactive Table Sort with Named MDX

Canvas Canvas Questions
1

Hi,

Apologies in advance for posting on a topic that’s already been discussed but I’m really struggling to get a sortable table working with a named MDX as a table source and I need some help please.

Here is my table:
> $scope.dataset = $tm1Ui.resultsetTransform($rootScope.defaults.settingsInstance, “”, result, {alias: {“”:“EN Code and Name”}});

    var options = {preload: true, watch: false};
    if($scope.table){
        options.index = $scope.table.options.index;
        options.pageSize = $scope.table.options.pageSize;
    }
    $scope.table = $tm1Ui.tableCreate($scope, $scope.dataset.rows, options);

It creates a simple table with three columns and a few hundred rows.

I’ve copied the setup of the HTML from the sample table:

>                     <thead>
>                         <tr>
>                             <th>Customer</th>
>                             <th class="tm1-ui-sortable" ng-class="table.sortClass('Revenue')" ng-click="table.sort('Revenue')">Weekly Revenue Movement</th>
>                             <th class="tm1-ui-sortable" ng-class="table.sortClass('Metres')" ng-click="table.sort('Metres')">Weekly Metres Movement</th>
>                         </tr>
>                     </thead>
>                     <tbody>
>                         <tr ng-repeat="row in table.data()">
>                             <td ng-repeat="el in row.elements" >{{el.alias}}</td>
>                             <td ng-model="row.Revenue">{{row['weeklyrevenuemovement'].value | formatNumber:0}}</td>
>                             <td ng-model="row.Metres">{{row['weeklymetresmovement'].value | formatNumber:0}}</td>
>                         </tr>
>                     </tbody>

When clicking on either the Revenue or Metres columns it does apply some kind of sort but not according to the values in the column, also, no matter what column is clicked the sort is the same.

What am I doing wrong? Can someone also please explain to me what the relationship is between the ng-class=“table.sortClass()” and ng-click=“table.sort()” in the table header and ng-model in the table body?

Many thanks,
David

2

Hi @anz.fin.all.mailbox,

First would be to try to set the watch flag to true.

As for the relationship/difference between sortClass() vs sort():

  • sortClass() gets the current sorting CSS class for that particular column / property. This is returning either tm1-ui-desc, tm1-ui-asc or none.
  • sort() sets that column / property that is to be used for sorting. It also reverses what ever is the current value for that property (i.e. if it is currently descending, it will now set it as ascending - and vice versa)

You can try to display the current value of the options as you click on the table out on your HTML page and see if it can help out further:

<div>table-options: {{table.options}}</div>

Cheers,
Paul

3

Hey,

I don’t think you need to add the watch option to the table, we’ve found that it has a bad impact on the performance of a given table.

I believe your issue is that you a declaring ng-models in a td tag, ng-model is allowed wherever typical form elements exist that can use the directive ([input, select and textarea]), for example.

Also, you don’t really need to create additional ng-models, as the data is already bound:

So, remove the ng-models from the tags, and try:

ng-class="table.sortClass('weeklyrevenuemovement.value')" 
ng-click="table.sort('weeklyrevenuemovement.value')"
ng-class="table.sortClass('weeklymetresmovement.value')" 
ng-click="table.sort('weeklymetresmovement.value')"

Jack

1 Like
4

That’s exactly what I was looking for! Thanks so much Jack!

Cheers,
David