How make focus on the last row of the Syncfusion Grid

[arnel]

Is there a way to make focus on the last row of the SFGrid during initial load and when a new record is added to the SfGrid?

My application has a lot of record to be loaded in the SfGrid. I have set the paging = 10 so the Grid has several pages. I want the SfGrid to select/focus to the last row.

[Prathap Senthil]

Hi Arnel,

Query:” When a new record is added to the SfGrid?”

Based on your query, we offer support for setting the Newrowposition to Bottom in grid editing to meet your requirement. Please refer to the documentation for more information.

Query:” Is there a way to focus on the last row of the SFGrid during initial load”

Before proceeding with the reporting of the problem, we require some additional clarification from your end. Please share the following details to proceed further on our end:

• Are you expecting to focus on the last row in the grid on the first page or the last page?
• Could you also share the grid code snippet along with the model class?

The details requested above will be very helpful in validating the reported query on our end and providing a solution as soon as possible. Thanks for your understanding.

Regards,
Prathap S

[arnel]

Good day  Prathap S.

My requirement is to set focus on the last record/row  on the last page of the SF Grid during initial load and when a record is added to the database the SF Grid should be updated/refreshed to load the record added and focus to that record. The sort order is based on Id which is the primary key of the database.

Thank you.

Arnel

[Prathap Senthil]

Based on your requirements, we have implemented the following approach using the Grid public methods GoToPageAsync and SelectRowAsync. You can utilize this to make modifications to the project on your end. Please refer to the code snippet below and the sample for your reference

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" >

    <GridEvents DataBound="DataHandler" TValue="Order"></GridEvents>

    <GridEditSettings AllowAdding="true"  NewRowPosition="Syncfusion.Blazor.Grids.NewRowPosition.Bottom"></GridEditSettings>

    -----------

</SfGrid>

 

@code {

    SfGrid<Order> Grid { get; set; }

 

    public List<Order> Orders { get; set; }

    public async Task DataHandler()

    {

        if (InitialRender) // to handled during the initial rendering of Grid

        {

            InitialRender = false;

 

            decimal pageSize = Grid.PageSettings.PageSize;

            int totalRecords = Orders.Count();

 

            int pageCount = (int)Math.Ceiling(totalRecords / pageSize);

 

            // Go to the last page

            await Grid.GoToPageAsync(pageCount);

 

            var CurrentViewRecord = Grid.GetCurrentViewRecordsAsync().Result.Count;

 

            int LastRowindex = CurrentViewRecord - 1;

            // Focus on the last row of the last page

            await Grid.SelectRowAsync(LastRowindex);

 

        }

    }

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            InitialRender = true;

        }

    }

}