Change row background based on validity of data

[Missing User]

Hello everyone, I'm having troubles understanding how to change the background color of a row when one of the (required) values of its cells is invalid

Code:

<kendo-grid
        #grid
        [kendoGridBinding]="kgData"
        [sortable]="true"
        [pageable]="!kgHasOrdernumField"
        [pageSize]="kgHasOrdernumField ? 1000 : 5"
        [rowClass]="kgRowCallback"
        (add)="kgAddHandler($event)"


        (cancel)="kgCancelHandler($event)"
        (save)="kgSaveHandler($event)"
        >
        <!-- BUTTONS -->
        <ng-template kendoGridToolbarTemplate>
          <button kendoGridAddCommand [hidden]="kgTemplateButtonsHidden">
            Add
          </button>
          <!-- Button disabled when there's no data to send OR one of them contains an invalid value -->
          <button class="k-button" [hidden]="kgTemplateButtonsHidden" [disabled]="kgDataToSend.length == 0 || (kgDataToSend.length != 0 && kgInvalidFields.length != 0)" (click)="kgSendData()">
            Save
          </button>
          <span style="width:10px"></span> <b>*</b> fields are mandatory
 
        </ng-template>

        <!-- HEADERS -->
        <kendo-grid-column *ngFor="let col of columnInfoArray" [field]="col.fieldname" [title]="col.mandatory ? col.description + '*' : col.description" [hidden]="col.fieldname === 'id'">
          <ng-template
            kendoGridCellTemplate
            let-dataItem
            let-rowIndex="rowIndex">
              <!--! NUMBER  -->
              <!--
                decimals: do not allow the user to type , and . when focused
                format n0: do not put commas when the input is not focused
                autocorrect: prevent insertion of invalid values
                disabled: disable ordernum
              -->
              <kendo-numerictextbox
                *ngIf="col.configtype === 'int'"
                [disabled]="col.fieldname=='ordernum'"
                kendoGridFocusable
                [decimals]="0"
                format="n0"
                [min]="1"
                [autoCorrect]="kgAutoCorrect"
                [value]="dataItem[col.fieldname]"
                (valueChange)="kgUpdateValue(col,rowIndex,dataItem,$event)"
                ></kendo-numerictextbox>
              <!--! SELECT  -->
              <!--
                [data]: the array of options, textField and valueField access the properties of the objects contained inside the array
                [value]: gets the default value based on the fieldname and the value
              -->
              <kendo-dropdownlist
                *ngIf="col.configtype === 'combo'"
                kendoGridFocusable
                [data]='kgSelectOptions[col.fieldname]'
                textField='label'
                valueField='value'
                [value]='kgGetDefaultOption(col.fieldname,dataItem[col.fieldname])'
                (valueChange)="kgUpdateValue(col,rowIndex,dataItem,$event)"
                ></kendo-dropdownlist>
              <!--! CHECKBOX  -->
              <input
                *ngIf="col.configtype === 'bool'"
                type="checkbox"
                kendoGridFocusable
                kendoCheckBox
                [checked]="dataItem.deleted"
                (input)="kgUpdateValue(col,rowIndex,dataItem,$event)"/>
              <!--! STRING  -->
              <input
                *ngIf="col.configtype === 'string'"
                kendoGridFocusable
                [value]="kgGetValue(dataItem[col.fieldname])"
                (input)="kgUpdateValue(col,rowIndex,dataItem,$event)"/>
          </ng-template>
        </kendo-grid-column>
        <!--# COMANDI NUOVA RIGA -->
        <kendo-grid-command-column title="Comandi" [hidden]="!kgTemplateButtonsHidden">
          <ng-template kendoGridCellTemplate let-isNew="isNew">
            <button *ngIf="isNew" kendoGridSaveCommand [disabled]="!kgNewRowValid" class="k-button">Confirm</button>
            <button *ngIf="isNew" kendoGridCancelCommand class="k-button">Cancel</button>
          </ng-template>
        </kendo-grid-command-column>
      </kendo-grid>

 Using the suggested rowClass method doesn't work as intended

kgRowCallback = (context: RowClassArgs) => {
    return { invalid: !this.kgValidateValue(context.dataItem) }
  }

I get different results based on the css selector, but none of them modifies ONLY the affected row

tr.invalid, tr.invalid:hover {
  background-color: rgba(255, 99, 88, 0.2);
}

Gives me this: 


Whereas this (which was suggested here: https://stackoverflow.com/questions/54553443/)

.k-grid tr.invalid, .k-grid tr.invalid:hover {
  background-color: rgba(255, 99, 88, 0.2);
}

Gives me this

 

What did I do wrong?

[Missing User]

I'm trying an alternative solution which doesn't work as well: in the kgUpdateValue function, based on the validity of the value I do this:

//if valid
(document.querySelector(`[data-kendo-grid-item-index='${rowIndex}']`) as HTMLElement).classList.remove('invalid');
//else
(document.querySelector(`[data-kendo-grid-item-index='${rowIndex}']`) as HTMLElement).classList.add('invalid');

However, if we suppose to have the rowIndex 0 row set to invalid, when I change the page, the first row of the new page would keep the background color:

[Missing User]

I was able to solve the issue, I had some logical problems in my validation function which didn't return correctly