Multiple row selection in Angular 7

[plumbnParticipant]

I’m completely new to jQWidgets and I think I must be missing something. I’m attempting to create a simple proof of concept for an Angular 7 app using jQWidgets DataTable. Among the many features I’ll need for my app, I’ll need to able to select multiple rows. This would appear to be quite simple, but I have been unable to get it working and I haven’t found any information to help explain what I should do differently. Since I am completely new to jQWidgets, I’ll try to include as much information as possible in case I made mistake just getting set up.

Here’s what I added to my tsconfig:

"include": [
    "src/**/*"
  ],
  "files": [
    "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxdatatable.ts"
  ]

And my angular.json:

"styles": [
     "src/styles.scss",
     "node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css"
 ],

New app.module imports:

import { jqxDataTableComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxdatatable';

@NgModule({
  declarations: [
    AppComponent,
    jqxDataTableComponent
  ],
...

app.component.html:
<jqxDataTable [source]="dataAdapter" [sortable]="true" [pageable]="true" [columns]="columns" [selectionMode]="'multipleRows'"></jqxDataTable>

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  source: any =
  {
      localdata: this.generatedata(85),
      datatype: "array",
      datafields:
      [
          { name: 'firstname', type: 'string' },
          { name: 'lastname', type: 'string' },
          { name: 'productname', type: 'string' },
          { name: 'quantity', type: 'number' },
          { name: 'price', type: 'number' }
      ],
      sortcolumn: 'firstname',
      sortdirection: 'asc'
  };

  dataAdapter: any = new jqx.dataAdapter(this.source);

  columns: any[] =
  [
      { text: 'Name', dataField: 'firstname', width: 200 },
      { text: 'Last Name', dataField: 'lastname', width: 200 },
      { text: 'Product', editable: false, dataField: 'productname', width: 180 },
      { text: 'Quantity', dataField: 'quantity', width: 80, align: 'right', cellsAlign: 'right' },
      { text: 'Unit Price', dataField: 'price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' }
  ];

  generatedata(num: number) {
    return [
      {firstname: 'Ian', lastname: 'Devling', productname: 'Espresso Truffle', price: 1.75, quantity: 8},
      {firstname: 'Nancy', lastname: 'Wilson', productname: 'Cappuccino', price: 5.00, quantity: 3},
      {firstname: 'Cheryl', lastname: 'Nodier', productname: 'Caffe Americano', price: 2.50, quantity: 4},
      {firstname: 'Martin', lastname: 'Saavedra', productname: 'Caramel Latte', price: 3.80, quantity: 11},
      {firstname: 'Guylene', lastname: 'Bjorn', productname: 'Green Tea', price: 1.50, quantity: 8},
      {firstname: 'Andrew', lastname: 'Burke', productname: 'Caffe Espresso', price: 3.00, quantity: 2},
      {firstname: 'Regina', lastname: 'Murphy', productname: 'White Chocolate Mocha', price: 3.60, quantity: 6},
      {firstname: 'Michael', lastname: 'Murphy', productname: 'Caramel Latte', price: 3.80, quantity: 2},
      {firstname: 'Petra', lastname: 'Bein', productname: 'Caffe Americano', price: 2.50, quantity: 7},
      {firstname: 'Nancy', lastname: 'Nodier', productname: 'Caffe Latte', price: 4.50, quantity: 10},
      {firstname: 'Peter', lastname: 'Devling', productname: 'Green Tea', price: 1.50, quantity: 1},
      {firstname: 'Beate', lastname: 'Saylor', productname: 'Espresso con Panna', price: 3.25, quantity: 3},
      {firstname: 'Shelley', lastname: 'Nodier', productname: 'Peppermint Mocha Twist', price: 4.00, quantity: 7},
      {firstname: 'Nancy', lastname: 'Murphy', productname: 'Peppermint Mocha Twist', price: 4.00, quantity: 1},
      {firstname: 'Lars', lastname: 'Wilson', productname: 'Caffe Espresso', price: 3.00, quantity: 11}
    ];
  }
}

As far as I can tell, multiple row selection should just work once you’ve set selectionMode = multipleRows. But I would expect then that when I click on a row, it appears darker and when I click on another row, both of the two selected rows appear darker. Instead, the first row appears unselected once I select a new row. Likewise I would expect DataTable.getSelection to return an array of all selected rows, but it only returns an object of the most recently selected row.

What am I missing here?

[MartinParticipant]

Hello plumbn,

Yes, multiple row selection is enabled when you set selectionMode to ‘multipleRows’.
However, the behavior is different. To select more than one row you need to use Ctrl + click, otherwise just clicking on the rows selects the last one clicked. You can also use Shift + click to select the rows in between the two clicked.
Here is an Example.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts