Error getting data from selected row: "Type 'Number' cannot be used as an index"

[jdhParticipant]

Overview: Angular 4 project; Recently realized I was using the plain JavaScript jqxGrid instead of the Angular one, so trying to switch to see if that will let me run tests. My table has row checkboxes to select a row, and upon clicking another button I’m changing the value of a field in that row (kind of like a show/hide toggle). My problem is a Typescript error that seems to say I can’t use a Number variable to access indices within this.daGrid.attrSource.recordids even though I can hardcode a number in, as you’ll see in the following function’s console.log statement:

setRecordRejection(event: any, status: string) {
    const rowsToReject = this.daGrid.getselectedrowindexes();
    let record: EditedRecord;
    if (rowsToReject.length !== 0) {
      rowsToReject.forEach(rowIndex => {
        console.log(rowIndex, this.daGrid.attrSource.recordids[0]); //works!
        //I'm using VS Code, so I can see types just by hovering over the property.
        //rowsToReject is Number[], rowIndex is Number, and recordids is Number[],
        //so it doesn't make any sense to me why recordids[rowIndex] isn't valid.
        //No problem with the JS-only jqxGrid, because everything is type:any.
        const rowdata = this.daGrid.attrSource.recordids[rowIndex]; //TS won't even compile; says "Type 'Number' cannot be used as an index type"
        if (status === 'reject') {
            record = { recordId: rowdata.recordId, status: 'Y' };
            // TODO: call rejectSelected on the service
            // if that resolves, update the grid as follows
            rowdata['rejected'] = 'Y';
            rowdata['rejectedMap'] = 'Y';
            this.daGrid.updaterow(rowIndex, rowdata);
          } else {
              record = { recordId: rowdata.recordId, status: '' };
              // TODO: call rejectSelected on the service
              // if that resolves, update the grid as follows
              rowdata['rejected'] = '';
              rowdata['rejectedMap'] = 'N';
              this.daGrid.updaterow(rowIndex, rowdata);
            }
          });
    }
  }

[jdhParticipant]

I believe I finally discovered the answer.

The problem is that getselectedrowindexes() returns Number[] which, according to Typescript’s Do’s and Dont’s, should never be used because “they are almost never used appropriately in JavaScript” which is the case here, as though you get an array of indices, you can’t use single values in a forEach to access that array since array accessors need to be number and not Number.

The odd thing is that getselectedrowindex just returns number so this appears to be a bug in the jqxGridComponent code that needs to be fixed.

My solution then is to explicitly cast to number in my forEach loop:

const rowsToReject = this.daGrid.getselectedrowindexes();
rowsToReject.forEach((rowIndex:number) => {
...
}); 

[Ivo ZhulevParticipant]

Hi jdh,

Thanks for the feedback.

Best Regards,
Ivo

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

[Author]

Posts