mat-checkbox in an Html form inside a Kendo Treeview

Question

We have a kendo-treeview placed inside a form tag. In the tree we render each item using the kendo template as follows :

<kendo-treeview [nodes]="roleFeatureTree" textField="text"
 kendoTreeViewExpandable kendoTreeViewSelectable
 kendoTreeViewHierarchyBinding childrenField="items">
 <ng-template kendoTreeViewNodeTemplate let-dataItem style="width:100%">
  <span class="float-left">{{dataItem.text}} </span>
  <table>
   <tr>
   
    <td>     
     <mat-checkbox *ngIf="dataItem.Feature.CanView"
       [checked]="dataItem.ViewAccess"
      (change)="roleFeatureChecked($event,dataItem.Feature.UID,'ViewAccess')">
     </mat-checkbox> 
    </td>    

   </tr>

  </table>
  <div class="float-right">
  </div>
 </ng-template>
</kendo-treeview>

However, the checked binding is not working - i.e.[checked]="dataItem.ViewAccess".

And I cannot use [(ngModel)] since we're inside an html form.

I can confirm that our API is successfully saving the checked value down to our DB. And when reloading the page, I can debug and examine the tree node data. The item is indeed checked.

And when the checkbox is clicked, we can see the checkbox state:

    roleFeatureChecked(event, roleFeatureUID:any, rfType:string){
        
        ft[rfType] = event.checked;  // this part working fine.
        
        this.updateChildrenFeatures(roleFeatureUID, rfType, event.checked);
        this.roleForm.markAsDirty();
    }