Select parent row when clicking detailtemplate + using shift to select more

[Bram]

Hello,

I've got a detail template and if you click on it, it adds the key to the selectedKeys arrray, so it gets highlighted (selected). 

But after that I press shift and click on another row (2 rows down for example.  Not the detail) and it selects all the records from the first one until the clicked row.  Not from the row I selected via the detail row.

It's like the grid doesn't know I've already selected a row.

Do you have an example when clicking the detail template, selects the parent row and also keeps the shift from working?

This is my detail template:

      <ng-template kendoGridDetailTemplate let-dataItem>

        <ng-container>

          <div

            *ngIf="dataItem['COMMENTS']"

            (click)="childRowOnClicked($event, dataItem["ORDERID"])"

          >

            <div>

              {{ dataItem['COMMENTS'] }}

            </div>

          </div>

        </ng-container>

Regards,

 

[Yanmario]

Hi Bram,

I am not sure what is your specific Grid configuration and I will provide some information when using the Binding Directive. Generally, the developer would need to handle a click event as your provided code and add the selected key to the array. From there with the directive it seems that the selection with shift works properly:

https://stackblitz.com/edit/angular-g4xhbv-vw55jn?file=app%2Fapp.component.ts,app%2Fproducts.ts

When the detail template child is selected it will select the parent and shift select also selects other parents depending on the range.

If your scenario is different could you provide more context, example, steps, and the desired end result of the interaction? That will help me better suggest a solution if one is available.

Thank you in advance for your cooperation.

Regards,
Yanmario
Progress Telerik     

[Bram]

Hi Yanmario,

The demo you've created has the same issue as I described.

What you do is click on the child row for example 17 from the chang row. (see first click.png)

After that you press shift and click on the parent row Chef Anton's Cajun Seasoning. (see shift click.png)

This will select all the rows until Chef Anton's Cajun Seasoning (first until 4th row) instead of chang until Chef anton's (2nd until 4th row).(see sample.gif)

Regards,

Bram

[Yanmario]

Hi Bram,

Thank you for the additional context.

The behavior is expected as the shift click selection would respect the user first index that was clicked. Now in this case the selection is done programmatically, and the directive will select from the very first index to the last that was shift + click by the user. This behavior was previously logged here:

https://github.com/telerik/kendo-angular/issues/3394

For this reason, our developers added two new input properties rangeSelectionStartColumnIndex and rangeSelectionStartRow that can help select from a specific range even if the index was added programmatically. 

Updated example - https://stackblitz.com/edit/angular-95bff1?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fproducts.ts

Of-course the rangeSelectionStartRow would need to be when the custom click event handles the data.

Regards,
Yanmario
Progress Telerik

[Bram]

Yanmario,

This works for selecting the parent row.

But if I want to select multiple lines from the last clicked child row, it just starts from the last clicked parent row (not the row that was selected via the child row).

You can reproduce this by clicking a child row that is below "Chang" and then press shift and select the first row. You would expect it selects starting from the the child row you selected until the first row.  But it only selects the first 2 rows.

How can you catch this? 
The selection changed events isn't triggered when I click a child row.

Regards,

Bram

[Yanmario]

Hi Bram,

I've noticed that a ticket was opened on the same topic and I will suggest to continue the conversation in on of the threads and not both to avoid confusion.

Regards,
Yanmario
Progress Telerik