jQuery UI Widgets Forums DataTable Multiple row selection in Angular 7

This topic contains 1 reply, has 2 voices, and was last updated by  Martin 1 year, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Multiple row selection in Angular 7 #102862

    plumbn
    Participant

    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?

    • This topic was modified 1 year, 4 months ago by  plumbn.
    Multiple row selection in Angular 7 #102865

    Martin
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.