jQWidgets Forums

jQuery UI Widgets Forums Angular Grid – Disable cell using cellbeginedit – not able to get row data

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

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

  • Swapnil
    Participant

    Hello,

    I have a Angular grid where I want to disable the cell edit dynamically depending on the checkbox as of the columns.
    Here is the grid in HTML:
    <jqxGrid #statusCodeList autoCreate="false"></jqxGrid>

    I am trying to reference this grid using @viewchild in my TypeScript:
    @ViewChild('statusCodeList', { static: true }) statusCodeListGrid: jqxGridComponent;

    GRid Columns:

    private gridColumns: jqwidgets.GridColumn[] = [
        { text: 'Rx Status Code', datafield: 'prescriptionStatus', align: 'left', cellsalign: 'left', editable: false, width: '10%'},
        { text: 'Rx Reason Code', datafield: 'prescriptionReasonCode', align: 'left', cellsalign: 'left', editable: false, width: '10%'},
        { text: 'Rx Reason Code Description', datafield: 'prescriptionReasonCodeDescription', align: 'left', width: '25%',
          cellsalign: 'left', editable: false},
        { text: 'Transmit', datafield: 'transmit', align: 'left', cellsalign: 'left', columntype: 'checkbox', width: '5%'},
        { text: 'Rx Status Code Transformation', datafield: 'prescriptionStatusTransformation', align: 'left', cellsalign: 'left', width: '10%',
          renderer: function (defaultText, alignment, height) {
            return '<div style="margin: 4px 0 0 2px;">Rx Status Code<br>Transformation</div>';
          }, cellbeginedit: this.cellbeginedit
        },
        { text: 'Rx Reason Code Transformation', datafield: 'prescriptionReasonCodeTransformation', align: 'left', cellsalign: 'left',
          width: '10%', cellbeginedit: this.cellbeginedit,
          renderer: function (defaultText, alignment, height) {
            return '<div style="margin: 4px 0 0 2px;">Rx Reason Code<br>Transformation</div>';
          }
        },
        { text: 'Rx Reason Code Description Transformation', datafield: 'prescriptionReasonCodeDescriptionTransformation', width: '30%',
          renderer: function (defaultText, alignment, height) {
            return '<div style="margin: 4px 0 0 2px;">Rx Reason Code Description<br>Transformation</div>';
          }, cellbeginedit: this.cellbeginedit,
          align: 'left', cellsalign: 'left'}
      ];

    In cellbeginedit, I am trying to get the row data but I am not able to get the reference to grid object, it is undefined.

    private cellbeginedit(row, datafield, columntype, value) {
        const rowData = this.statusCodeListGrid.getrowdata(row); -----> here I get statusCodeListGrid as undefined
        if (rowData?.transmit) {
        return true;
        } else {
          return false;
        }
      }

    Is there something I am missing?

    Thanks,
    Swapnil.


    Martin
    Participant

    Hello Swapnil,

    The grid reference is undefined inside cellbeginedit function because this refers to the grid element there.
    You can use an arrow function instead. Please, see the following Example.

    Best Regards,
    Martin

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

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

You must be logged in to reply to this topic.