Get the Index Of a Grid Row

Environment

Product

Grid for Blazor

Description

I am having a Grid and I would like to know the new index of a row when sorting or filtering the Grid.

Solution

The Grid does not directly alter the collection of items passed to its Data parameter so when performing operations like Sorting or Filtering the collection will not be changed, thus the index of the item will remain unchanged. In order to get the sorted/filtered collection you should use the OnRead event for the Grid.

• Get the New Index Of a Selected Row
• Get the New Index Of a Clicked Row

Get the New Index Of a Selected Row

@*Get the new index of the selected Grid row when sorting the Grid*@

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid Data="@currentSalesTeamMembers"
             SelectionMode="@GridSelectionMode.Single"
             SelectedItems="@selectedItems"
             SelectedItemsChanged="@((IEnumerable<MainModel> items) => SelectedItemsChanged(items))"
             OnRead="@OnReadHandler"
             TotalCount="@Total"
             Sortable="true">
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@if (!String.IsNullOrEmpty(Result))
{
    <div>
        @Result
    </div>
}

@code {
    public int Total { get; set; }
    List<MainModel> salesTeamMembers { get; set; }
    IEnumerable<MainModel> selectedItems { get; set; } = new List<MainModel>();
    List<MainModel> currentSalesTeamMembers { get; set; } //implementation of OnRead
    MainModel currentItem { get; set; } //need to save the selected item to determine its new index
    public string Result { get; set; }

    void SelectedItemsChanged(IEnumerable<MainModel> items)
    {
        selectedItems = items;

        var selectedItem = items.FirstOrDefault();

        currentItem = selectedItem;
    }

    async Task OnReadHandler(GridReadEventArgs args)
    {
        var dataSourceResult = salesTeamMembers.ToDataSourceResult(args.Request);

        currentSalesTeamMembers = dataSourceResult.Data.Cast<MainModel>().ToList(); // this is the collection with the sorted items

        int currentIndexOfItem = currentSalesTeamMembers.IndexOf(currentItem);

        if(currentIndexOfItem > -1) // this check is not mandatory
        {
            Result = $"The index of the selected item is: {currentIndexOfItem}";
        }

        Total = dataSourceResult.Total;

        StateHasChanged();
    }

    protected override void OnInitialized()
    {
        salesTeamMembers = GenerateData();
    }

    private List<MainModel> GenerateData()
    {
        List<MainModel> data = new List<MainModel>();
        for (int i = 0; i < 5; i++)
        {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            data.Add(mdl);
        }
        return data;
    }

    public class MainModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

Get the New Index Of a Clicked Row

@*Get the new index of a clicked row*@

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid Data="@currentSalesTeamMembers"
             OnRowClick="@OnRowClickHandler"
             OnRead="@OnReadHandler"
             TotalCount="@Total"
             Sortable="true">
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@if (!String.IsNullOrEmpty(Result))
{
    <div>
        @Result
    </div>
}

@code {
    public int Total { get; set; }
    List<MainModel> salesTeamMembers { get; set; }
    List<MainModel> currentSalesTeamMembers { get; set; } //implementation of OnRead
    MainModel currentItem { get; set; } //need to save the selected item to determine its new index
    public string Result { get; set; }

    void OnRowClickHandler(GridRowClickEventArgs args)
    {
        var clickedRow = args.Item as MainModel;

        currentItem = clickedRow;

        PrintTheRowIndex(clickedRow);
    }

    void PrintTheRowIndex(MainModel item)
    {
        int currentIndexOfItem = currentSalesTeamMembers.IndexOf(item);

        if (currentIndexOfItem > -1) // this check is not mandatory
        {
            Result = $"The index of the clicked row is: {currentIndexOfItem}";
        }
    }

    async Task OnReadHandler(GridReadEventArgs args)
    {
        var dataSourceResult = salesTeamMembers.ToDataSourceResult(args.Request);

        currentSalesTeamMembers = dataSourceResult.Data.Cast<MainModel>().ToList(); // this is the collection with the sorted items

        Total = dataSourceResult.Total;

        PrintTheRowIndex(currentItem);

        StateHasChanged();
    }

    protected override void OnInitialized()
    {
        salesTeamMembers = GenerateData();
    }

    private List<MainModel> GenerateData()
    {
        List<MainModel> data = new List<MainModel>();
        for (int i = 0; i < 5; i++)
        {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            data.Add(mdl);
        }
        return data;
    }

    public class MainModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}