How to disable first row selection

[kazzkiq]

By default, in all examples, it seems the first row always starts selected. How can I prevent that, making the selection occur only after an user clicked a row?

[64n35h4]

Show your code, by default the code doesn't selects the first row..

[kazzkiq]

I'd say the opposite.

In all examples the first row starts selected (unless you use selectMode: 'multi'). The same behavior replicates to my project.

I couldn't find any clue in the documentation on how to start my grid without selections.

Here is my configuration code:

Show Code

{
  editable: false,
  noDataMessage: 'No data could be found here.',
  actions: {
    add: false,
    edit: false,
    delete: false
  },
  columns: {
    titulo: {
      title: 'Name'
    }
  }
}

[Newan]

i have the same.

[kazzkiq]

(Messy) Workaround:

1. Find data-set.js in your node_modules/ng2-smart-table;
2. Search for this.willSelect and override it with a 'none' string:

this.willSelect = 'none';

Explanation:
willSelect is what defines if the table will start with first or last row selected. But sadly the option is not exposed to the settings object, which means you can't change its behavior unless you change it directly in the component code.

So as of today you have three options:

• Edit the code directly in your node_modules (as described above);
• Clone this repo, submit a PR, and wait (or use your own fork in your project);
• Copy the entire component into your project, instead of using it via npm install.

[FunnyZ]

I have the same needs.

[yunier0525]

I was able to solve the problem of first click with this code made by me:

this.table.grid.dataSet.deselectAll();
this.table.grid.dataSet['rows'][0].isSelected = false;
this.table.grid.dataSet['selectedRow'] = null;

And to auto select the first row and populate the 'selected' class to well style the row:

setTimeout(function () {
   $($(`ng2-smart-table tbody tr`).first()[0]).trigger('click');
});

The two code snippets together solve the problem that the self-selecting row does not have the selected class.

I hope this small contribution will help someone.
Regards.

[NicolaLC]

Hi to all, I've fixed this bug by my own and I've maded a pull request, if you're interested in.

[TheoCanonne]

Hi !
As the pull request of @NicolaLC has not been accepted yet, I've managed to select only the row that the user clicked on.

I use the LocalDataSource to store my data and when it changes ( new data loaded or pagination events ), I set the selected row of the user.

Here is the code I've made :

ngAfterViewInit() {
    this.localDataSource.onChanged().subscribe(() => {
      this.table.grid.dataSet.deselectAll();
      if (this.dataSelected) {
        this.table.grid.dataSet.getRows().map(
          row => {
            if (row.getData() === this.dataSelected) {
              return this.test.grid.dataSet.selectRow(row);
            }
         });
      }
    });
}

Hope it will help ^^

[yim222]

Solution: The userRowSelect event supposed to handle it. Worked and solved for me

<ng2-smart-table [settings]="tableSetting" [source]="tableSource" (userRowSelect)="onSelectRow($event)"></ng2-smart-table>

[muysewinkel]

Solution: The userRowSelect event supposed to handle it. Worked and solved for me

<ng2-smart-table [settings]="tableSetting" [source]="tableSource" (userRowSelect)="onSelectRow($event)"></ng2-smart-table>

This helps not triggering the initial select function. However, row one is still selected and thus will not trigger the userRowSelect function if the first row is clicked.

[wqzyow]

this.table.grid.dataSet.select(-1);

[tuhu95]

Just add selectedRowIndex: -1 to your table settings like this
tableSettings = { hideSubHeader: true, mode: 'external', selectedRowIndex: -1 };

[Peeripapo]

Humati's solution is perfect!

[apappas1129]

Just add selectedRowIndex: -1 to your table settings like this tableSettings = { hideSubHeader: true, mode: 'external', selectedRowIndex: -1 };

Not working for me

I tried this.table.grid.dataSet.deselectAll(); (table is @ViewChild('smartTableComponent') table?: Ng2SmartTableComponent;), but it doesn't do anything.

I figured, for my use case, I do this:

// function deselectRows
this.table.grid.dataSet.deselectAll(); // Maybe this is still needed for component's state?
// class "selected" is not removed by function above, so let's remove it ourselves
const tr = document.querySelector('ng2-smart-table > table > tbody > tr.ng2-smart-row.selected');
tr && tr.classList.remove('selected');

And I had to do it after I load data in the source to make sure tr is already rendered.

void this.source.load(DATA).then(() => this.deselectRows());

[ScotteYx]

Just add selectedRowIndex: -1 to your table settings like this tableSettings = { hideSubHeader: true, mode: 'external', selectedRowIndex: -1 };

Works perfectly, thanks! Weird it's not in the docs.