DELETE button in kendo grid visible/invisible

[Lino]

Context: kendo grid.
How can I make the DELETE button visible/invisible based on there being at least one grid row selected?

[Lino]

Anyone here who can help me out please?

[Georgi]

Hi Lino, 

Thank you very much for the details provided.

From what I understand from your question, you are utilizing the Kendo UI for Angular Grid and are looking for an approach that would allow you to hide the Remove/Delete button from the Grid based on the number of records that are being selected. Please, correct me if I misunderstood you.

One possible approach to achieve the desired functionality would be to utilize the Angular's structural directive ngIf and thus hide the specific element(in this case the Remove/Delete button) based on a custom condition. 

In case you are looking for an approach that would allow you to access the currently selected items, I would suggest checking out our built-in SelectionDirective and binding its selectedKeys property to store the indices of the selected items. 

I hope this answers your question. Let me know if you need additional assistance with this case.

Regards,
Georgi
Progress Telerik

[Lino]

Hi Georgi, actually this worked for me:

                    <kendo-grid

                        #grid1

                        [data]="viewGrid1 | async"

                        [pageable]="true"

                        [pageSize]="stateGrid1.take"

                        [skip]="stateGrid1.skip"

                        [sort]="stateGrid1.sort"

                        (dataStateChange)="onStateChange($event)"                        (cellClick)="cellClickHandler($event)"

                        (cellClose)="cellCloseHandler($event)"

                        [navigable]="true"

                        [selectable]="true"

                        (selectionChange)="selectionChangeHandler($event)"

                    >

                            <button

                                mat-flat-button

                                color="primary"

                                *ngIf="selectedRows.length > 0"

                                (click)="removeHandler(grid1)"

                            >

                                Remove

                            </button>

    selectedRows: any[] = [];

    selectionChangeHandler(event: any) {

        if (event.selectedRows.length > 0) this.selectedRows.push(event.selectedRows);

        else if (event.deselectedRows.length > 0)

            this.selectedRows.splice(this.selectedRows.indexOf(event.deselectedRows), 1);

    }

Thanks for your feedback