3 Answers, 1 is accepted
Hello Ronald,
If the button is in the grid, you would need to prevent the click from getting to the grid row as shown here: https://docs.telerik.com/blazor-ui/components/grid/selection/overview#selection-in-template
If the button is outside of the grid, it should not affect the grid selection. If it does, please post here a sample that shows the problem.
Regards,
Marin Bratanov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

<
TelerikGrid
Data
=
"@excludedOrganisms"
Height
=
"400px"
Pageable
=
"true"
Sortable
=
"true"
Groupable
=
"true"
FilterMode
=
"Telerik.Blazor.GridFilterMode.FilterRow"
Resizable
=
"true"
Reorderable
=
"true"
SelectionMode
=
"GridSelectionMode.Multiple"
SelectedItems
=
"@selectedExcludedOrganisms"
>
<
GridColumns
>
<
GridCheckboxColumn
/>
<
GridColumn
Field
=
"@(nameof(OrganismName.OrganismId))"
Title
=
"Group Id"
Width
=
"120px"
/>
<
GridColumn
Field
=
"@(nameof(OrganismName.Name))"
Title
=
"Organism Name"
Groupable
=
"false"
/>
<
GridColumn
Field
=
"@(nameof(OrganismName.CreatedBy))"
Title
=
"Created By"
/>
</
GridColumns
>
</
TelerikGrid
>
<
div
class
=
"center"
>
<
TelerikButton
class
=
"GroupingButton"
OnClick
=
"@OnForwardClick"
Icon
=
"caret-double-alt-right"
></
TelerikButton
>
<
TelerikButton
class
=
"GroupingButton"
OnClick
=
"@OnReverseClick"
Icon
=
"caret-double-alt-left"
></
TelerikButton
>
</
div
>
<
TelerikGrid
Data
=
"@includedOrganisms"
Height
=
"400px"
Pageable
=
"true"
Sortable
=
"true"
Groupable
=
"true"
FilterMode
=
"Telerik.Blazor.GridFilterMode.FilterRow"
Resizable
=
"true"
Reorderable
=
"true"
SelectionMode
=
"GridSelectionMode.Multiple"
SelectedItems
=
"@selectedIncludedOrganisms"
>
<
GridColumns
>
<
GridCheckboxColumn
/>
<
GridColumn
Field
=
"@(nameof(OrganismName.OrganismId))"
Title
=
"Group Id"
Width
=
"120px"
/>
<
GridColumn
Field
=
"@(nameof(OrganismName.Name))"
Title
=
"Organism Name"
Groupable
=
"false"
/>
<
GridColumn
Field
=
"@(nameof(OrganismName.CreatedBy))"
Title
=
"Created By"
/>
</
GridColumns
>
</
TelerikGrid
>
The buttons are in between the grids.
The button handlers right now are empty
async Task OnForwardClick()
{
StateHasChanged();
}
async Task OnReverseClick()
{
StateHasChanged();
}
I would expect if I put a breakpoint in one of the handlers that the selected items list would have values in it. And after returning from the handler the items still show selected on the grid. Both of these things don't seem to be happening.
private
IEnumerable<OrganismName> selectedIncludedOrganisms {
get
;
set
; } = Enumerable.Empty<OrganismName>();
private
IEnumerable<OrganismName> selectedExcludedOrganisms {
get
;
set
; } = Enumerable.Empty<OrganismName>();
Thank you for your prompt response.
Hello Ronald,
You should use the @bind-SelectedItems syntax so the grid can actually update the view-model with the selected items. The current syntax only provides an initial collection of selected items to the grid. You can find some examples here: https://docs.telerik.com/blazor-ui/components/grid/selection/multiple#two-way-binding-of-selecteditems.
Without that, the grid does not update the view model, and the button click re-renders things with the state from the view-model that does not have the newly selected items. You can also read more on value binding here: https://docs.telerik.com/blazor-ui/getting-started/value-vs-data-binding
Regards,
Marin Bratanov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.