wijmo 5 issue-checkbox not getting unchecked inside wj-flex-grid-column

Posted by: skhan on 22 September 2022, 5:37 pm EST

  • Posted 22 September 2022, 5:37 pm EST

    I am using a wijmo 5 grid with angular 11. my grid is like that-

    <wj-flex-grid id="dealfunding" #flexdealfunding [itemsSource]="cvDealFundingList" [allowAddNew]="true" [allowSorting]="false">
    <wj-flex-grid-column [header]="'Confirmed'" [binding]="'Applied'" [width]="95">
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
    <input #fundingappiedchk type="checkbox" checked]="cell.item.Applied"
    (change)="ChangeFundingappied(cell.item.DealFundingID,fundingappiedchk.checked,cell.row)" id="fundingappiedchk"/>
    </ng-template>
    </wj-flex-grid-column>
    </wj-flex-grid>

    here cvDealFundingList is a CollectionView i am having as grid source.My problem is when i check the checkbox i am having some validation,if that fails i dont want that checkbox to be cheked,instaed it should be unchecked again,i have written code in typescript on file inside a methode 'ChangeFundingappied ' to uncheck it ,but it doesnt.my code is below.

    ChangeFundingappied(dealFundingID: string, _value: boolean, flexGridrw: wjcGrid.Row): void {
    //this is my aler box,after this i want to uncheck the checkbox again which i have checked.
    this.CustomAlert("You cannot wire confirm the draw as the workflow status is not completed.");
    this.flexdealfunding.rows[flexGridrw.index].dataItem.Applied = false;
    this.flexdealfunding.invalidate();
    }


    could you please let me know the workaround for this?
  • Replied 25 September 2022, 10:44 pm EST

    Hello,

    We have responded on the support portal. Please refer to the link for the same:
    https://www.grapecity.com/my-account/my-support/case/CAS-34565-T2Z9V5

    Here is a copy of the response:

    Instead of handling the checkbox 'change' event, you should handle FlexGrid's cellEditEnding' event to check the data for validation. You can cancel the edit if it fails the validation, by setting the CellEditEndingEventArgs object 'cancel' property to true. You can do something like this-

    editEnding(e) {
    if (e.panel.columns[e.col].binding == "active") {
    // check here for validation and set e.cancel = false if you want to cancel the edit operation
    alert("Check for validation");
    e.cancel = true;
    }
    }

    You can refer to the following sample for full implementation:
    https://codesandbox.io/s/flexgrid-checkbox-issue-1crflo?file=/src/app/app.component.ts

    Regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels