This is a migrated thread and some comments may be shown as answers.

Persist selection

3 Answers 513 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ronald
Top achievements
Rank 1
Veteran
Ronald asked on 01 Apr 2021, 02:39 PM
I have a grid that I added a column for a checkbox to select the row. I have multiple selection on. Now I want to respond to a button click and display the selected items in the grid. But I am finding that the act of clicking on the button deselects the selected items. How do I keep the keep the grid selection through a click on a button?

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 01 Apr 2021, 02:41 PM

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/.

0
Ronald
Top achievements
Rank 1
Veteran
answered on 01 Apr 2021, 02:55 PM

 

 

<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.

0
Accepted
Marin Bratanov
Telerik team
answered on 01 Apr 2021, 03:06 PM

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.

Tags
Grid
Asked by
Ronald
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Ronald
Top achievements
Rank 1
Veteran
Share this question
or