Displaying row being added as selected

[Marvin]

Hello,

Is there a way to add the k-state-selected  class to a row that is being added to a grid?  My new record has its key set to 0 and I am setting my selectedIds to  an array of just this value but it seems to have no effect.  I've tried other values and they are still not recognized.

The way I am adding rows is I am calling grid.addRow and passing a formGroup object.

Thanks!

Marvin

[Martin Bechev]

Hi Marvin,

The most straightforward approach to select the newly crated row is to utilize the kendoGridSelectBy directive and control the selected rows, by modifying a custom collection. For more details about how to configure the directive check the following article:

https://www.telerik.com/kendo-angular-ui-develop/components/grid/selection/persisting/#toc-with-the-select-all-feature

In order to accomplish the desired behavior, after saving the new row, add it to the collection that holds the selected rows. Here is an example where the new row is automatically selected:

https://stackblitz.com/edit/angular-mcdtba?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fedit.service.ts

I set a custom row selection key to absolute index (meaning first row starts from 0):

 <kendo-grid
            [selectable]="true"
            [kendoGridSelectBy]="myRowSelectionKey"
            [(selectedKeys)]="mySelection"
        >

  public myRowSelectionKey = (context: RowArgs) => {
    return context.index;
  };

Thus when passing 0 in mySeletion array it will always select the first row. The developer can modify the selection key as necessary as well. Please check this topic:

https://www.telerik.com/kendo-angular-ui-develop/components/grid/selection/persisting/#toc-by-custom-keys

When saving the new row I set mySelection to an array with 0 index in it:

public saveHandler({ sender, rowIndex, formGroup, isNew }: SaveEvent): void {
    ...
    sender.closeRow(rowIndex);
    this.mySelection = [0];
  }

I hope this helps. Let me know if I can provide any further assistance on this case.

Regards,
Martin
Progress Telerik

[Marvin]

H Martin,

Thank you so much for your reply, but I think my objective was not clear.

I would like the new row to be selected BEFORE it is saved, immediately after Add New is clicked.

In your example, when Add New is clicked the row does not have a checkbox in the checkbox column, leading me to believe this is unsupported functionality.

In this screenshot, I have manually added the k-selected class using the browser developer tools, but I would like to do this programmatically, to highlight for the user the current row being edited.

Thanks!

Marvin

 

 

[Martin Bechev]

Hi Marvin,

Thank you for the additional details provided on this case.

Indeed the suggested approach would not be applicable in this scenario, since the new row is not part of the table yet.

What could be done to accomplish the desired behavior is to apply the k-state-selected class dynamically with custom JavaScript code. This could be done in the add event handler:

Here is the updated example:

https://stackblitz.com/edit/angular-mcdtba-npqwnx

  constructor(public zone: NgZone) {
  }

  public addHandler(args: AddEvent): void {
...
    args.sender.addRow(this.formGroup);
    this.zone.onStable.pipe(take(1)).subscribe(() => {
      const newRow = document.querySelector('tbody .k-grid-add-row');
      newRow.setAttribute('class', 'k-state-selected');
    });

 

[Marvin]

perfect...thanks!