Select row in Grid after edit or insert

[Ben Junior]

Searching for a way to be able to reselect the row in the grid, after insert or edit, I found this link here with your provided solution. It worked fine until I found that if the grid is sorted in one column (for example "Name")  whose cell value is edited (for example from "Anna" to "Zanna") forcing the row outside the initial page count it stays in an indefinite loop. It is easy to see that this is because the Grid.PageSettings.CurrentPage gives a number smaller than the real quantity of pages. On your code, for example,  it returns only 7 but the total pages according to the navigator at the botton is 13

  

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Buttons

<SfButton OnClick="DataHandler" Content="Navigate"></SfButton>

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

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

@code{

    SfGrid<Order> Grid { get; set; }

    public bool ContinuePaging = true;

    public bool InitialRender { get; set; }

    public int Value = 1015; // consider that value your querystring contains

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

    public async Task DataHandler()

    {

        var PageCount = Grid.PageSettings.PageCount - 1;

        ContinuePaging = true;

        var CurrentPage = Grid.PageSettings.CurrentPage;

        await Grid.GoToPage(CurrentPage);

        for (int i = 1; i <= PageCount; i++)

        {

            List<Order> Rows = await Grid.GetCurrentViewRecords(); // returns the current view data

            for (int j = 0; j < Grid.PageSettings.PageSize; j++)

            {

                if (j < Rows.Count && Rows[j].OrderID == Value)

                {

                    await Grid.SelectRow(j);

                    ContinuePaging = false; // prevent the default navigation

                    break;

                }

            }

            if (ContinuePaging)

            {

                if (i >= PageCount)

                {

                    i = 0;

                }

                await Grid.GoToPage(i + 1);

                await Task.Delay(200);

            }

        }

    }

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 150).Select(x => new Order()

        {

            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID", "Nancy", "Andrew", "Davolia", "Joseph", "Curten", "VINET", "TOMPS", "WELLI", "HANAR" })[new Random().Next(14)],

            Freight = 2.1 * x,

            OrderDate = (new DateTime[] { new DateTime(2010, 5, 1), new DateTime(2010, 5, 2), new DateTime(2010, 5, 3), })[new Random().Next(3)],

        }).ToList();

    }

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

}

[Vignesh Natarajan]

Hi Ben,  

Greetings from Syncfusion support.  

Query: “Searching for a way to be able to reselect the row in the grid, after insert or edit, I found this link here with your provided solution” 

We understand that you want to select the row or record after being editing or insert into Grid. By default edited / inserted record will be selected after completing the certain action while using Grid’s built-in CRUD action. We have ensured that behavior by preparing a sample using our latest version (18.2.0.54).  

Kindly download the sample from below  

Sample:  https://www.syncfusion.com/downloads/support/forum/157085/ze/BlazorApp1927686917  

If you not using Grid built_in CRUD method or facing issue with default selecting a record after these actions. Kindly share the following detail to validate the reported issue at our end.  

1. Share your Grid code example.  
2. Share details how you are updating and inserting a record in Grid.
3. Share your Syncfusion.Blazor Nuget package version.
4. If possible try to reproduce the reported problem in provided sample and revert  back to us

Above requested details will be helpful for us to validate the reported issue at our end and provide solution as early as possible. 

Regards, 

Vignesh Natarajan 

[Ben Junior]

Hi,

Thanks for your reply where it says that the record will be selected by default after completing edit/insert using the Grid's built-in CRUD actions. That was my preferred method at the beginning but, for reasons outside this scope, a lot of of our app forms must use the <EditForm><DataAnnotationsValidator><ValidationSummary> tags that conflict with the grid Edit Template, thus I had to abandon this excellent built in mechanism that the Grid offers and reinvent the wheel again, meaning write all the code to insert/edit/delete outside the ActionBegin, ActionEnd methods of the grid. That was successfully done and it works well, except for the fact that we  cannot re select the grid's row when the operation completes. After some research I came across your code example, as mentioned in the beginning of this tread. Your example works to an extend, but as I mentioned before, if the grid is sorted on a column, (not necessary the key column) it may not work. This happens (from what I understood) because "Grid.PageSettings.PageCount" returns a number that is always smaller than the total number of pages and after the sort, the record goes to one of the pages that is outside the smaller number selected, causing the endless loop.  To demonstrate this, I used your example and all I did on your code was to set Allow Sorting to true, in the grid. Please, see the attached video.   

Attachment: IMG_RowSelect_157085_fa564405.zip

[Vignesh Natarajan]

Hi Ben,  

 

Thanks for the update.  

 

Query:  “if the grid is sorted on a column, (not necessary the key column) it may not work. ” 

 

We have analyzed the reported query and able to reproduce the reported behavior at our end. This is because datasource provided for Grid is not static. We have modified the sample by defining a static datasource which do not change on refreshing and removed the TimeDelay.  

 

Now we are able to select the record based on primarykey value. Kindly refer the below modified code example.  

 

<SfNumericTextBox TValue="int" ShowSpinButton="false" Width="100" @bind-Value="@Value"></SfNumericTextBox> 

  

<SfButton OnClick="DataHandler" Content="Navigate"></SfButton> 

  

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

    <GridColumns> 

. . . . . . . . . . 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    public bool ContinuePaging = true; 

    public bool InitialRender { get; set; } 

    public int Value { get; set; } // consider that value your querystring contains 

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

protected override void OnInitialized(){    if (Orders == null)    {        Orders = Enumerable.Range(1, 75).Select(x => new Order()        {            OrderID = 1000 + x,            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID", "Nancy", "Andrew", "Davolia", "Joseph", "Curten", "VINET", "TOMPS", "WELLI", "HANAR" })[new Random().Next(14)],            Freight = 2.1 * x,            OrderDate = (new DateTime[] { new DateTime(2010, 5, 1), new DateTime(2010, 5, 2), new DateTime(2010, 5, 3), })[new Random().Next(3)],        }).ToList();    }}

 

 

Kindly download the modified sample from below 

 

Sample: https://www.syncfusion.com/downloads/support/forum/157085/ze/BlazorApp1-Static1890818538  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Ben Junior]

Hi,

From your last reply:

"We have modified the sample by defining a static datasource which do not change on refreshing and removed the TimeDelay"

I'm not sure if I got the correct link to the project/solution, cause it is still the same problem, and the only change that I notice is that now the endless loop runs faster because the TimeDelay has been removed from inside the loop but there is nothing regarding "a static datasource which do not change on refreshing" 

[Vignesh Natarajan]

Hi Ben, 

 

Query: “the only change that I notice is that now the endless loop runs faster because the TimeDelay has been removed from inside the loop” 

 

In the previous update we have provided the sample to select the record based on the value typed in NumericText box control. So by default value of Numeric text box control is 0. Hence on clicking the Navigate button goes into a indefinite loop. Now we have modified the solution to define the DefaultValue as 1070 for NumericTextBox control. So that if you click on Navigate button, it will select 1070 record. 

 

Please find the modified sample and video demonstration for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/forum/157085/ze/BlazorApp1858364639  

 

Video: https://www.syncfusion.com/downloads/support/forum/157085/ze/NAVIGA~1371595972  

 

Please get back to us if you have further queries.    

 

Regards, 

Vignesh Natarajan  

[Ben Junior]

Hi Vignesh Natarajan

Following the sample app that you provided, I was able to find and correct the problem in my code. Case closed.

Thanks so much

[Vignesh Natarajan]

Hi Ben,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan