table-row-id-key not changing after pagination ajax call

[Random90]

When initializing datatable with these columns: $scope.gridColumns = { 'table-row-id-key': 'id', 'column-keys': [ 'u_avatar', 'u_fullname', 'u_login', 'u_active', 'id' ] }; , table-row-id-key holds my userid used to display an avatar <mdt-custom-cell column-key="u_avatar"> <div avatargrid user="clientScope.getUser(rowId)"</div> </mdt-custom-cell> After ajax call to get another page, rowIds stays the same, and avatar do not display properly

Above you can see rowId on first column - it is different from last column, where id is valid. Everything is ok on first page:

[johannesvaltonen]

I bumped into this problem, too. I found out that binding to clientScope with rowId did not work properly if the objects bound to the data table did not contain a property with the specified column-key. In your case the objects probably do not have a property called u_avatar?

[Random90]

that is not a case. Every object contains property u_avatar.

[johannesvaltonen]

Ok, then it's about something else. Either way, I would like this to be fixed, too.

[Random90]

i looked a bit into the source code of mdDataTable: Starting at line 287:

// fill storage with values if set
                function _processData(){
                    if(_.isEmpty($scope.mdtRow)) {
                        return;
                    }
                    //local search/filter
                    if (angular.isUndefined($scope.mdtRowPaginator)) {
                        $scope.$watch('mdtRow', function (mdtRow) {
                            vm.dataStorage.storage = [];

                            _addRawDataToStorage(mdtRow['data']);
                        }, true);
                    }else{
                        //if it's used for 'Ajax pagination'
                    }
                }

Looks like something is missing in else

[simonaco]

+1

[SunilVashisht]

#Izanagi13 Please share the code to delete and edit selected code because i am stuck here .

Thanks

[amacado]

Same problem here. Any solution or Workaround?

[Random90]

@Amacado Workaround is very simple. Since rowId stays the same all the time, you can do this:

In your <mdt-custom-cell> add ng-init with function that will create array with initial rowIDs as keys:

$scope.avatarHack = function() {
          angular.forEach($scope.user_icons, function(value,id) {
              //'rowID' is the same as 'id' on first run
              $scope.user_icons_hacked[id] = value;
          });

Whatever happens to your data, you will now have array with rowId keys in proper order. In your paginator callback function, parse received data to array created on init:

var icon_class = []; 
//here I parse received icons to desired format to icon_class array
                    angular.forEach($scope.user_icons_hacked, function(value,id) {
                        if(typeof data.data.item_list[i] !== "undefined")
                            $scope.user_icons_hacked[id] = icon_class[data.data.item_list[i].id];
                        i++;
                    });

data.data.item_list must be a simple array. My mdt-custom-cell:

    <div avatargrid icon="clientScope.getUserClass(rowId)" ng-init="clientScope.avatarHack(rowId)"></div>
<mdt-custom-cell column-key="u_avatar">

This is probably not most elegant workaround, but it is working for me. Sorting and changing rows number is working properly. I hope i made this explanation clear enough for you to understand :)

[vigneswaranp]

@Random90 Can you please explain me in detail I got stuck here for long time.