How to select row that is not on CurrentPage ?

[Mr Andrey Voronov]

grid.SelectRow(RowIndex) should also select page if  RowIndex is not on CurrentPage

[Renjith Singh Rajendran]

Hi Mr Andrey, 

  

Thanks for contacting Syncfusion support. 

  

We have analyzed your query. Enabling pager in grid will enable the load on demand concept in Grid. So, only the current page’s rows will only be generated in Grid. To select the row in the next page then you need to navigate to the particular page to generate the rows for that page and then select the row. 

  

Based on this, we suggest you to use the “GoToPage” method of Grid to navigate to the corresponding page you wish to select the row. And then use the “SelectRow” method of Grid to select the particular row by using the index (By default, each page has row index starting from value as 0). In the below code, we have selected the row in second page during initial rendering by using the methods inside “OnDataBound” event handler of Grid. We have prepared a sample based on this requirement, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SynfusionTest2048117191 

  

Please use the code below, 

  

  

<EjsGrid @ref="GridInstance" AllowSelection="true" AllowPaging="true" DataSource="@Orders" Height="315"> 

    <GridEvents OnDataBound="DataBoundHandler" TValue="Order"></GridEvents> 

    <GridSelectionSettings Mode="SelectionMode.Row"  Type="SelectionType.Multiple"></GridSelectionSettings>  @*By default the selection Mode will be Row*@ 

    ... 

</EjsGrid> 

  

@code{ 

    ... 

   public async void DataBoundHandler(BeforeDataBoundArgs<Order> args) 

    { 

        await Task.Delay(200); 

        this.GridInstance.GoToPage(2); 

        this.GridInstance.SelectRow(4); 

    } 

    ... 

} 

  

  

Note : We have already updated solution for the same query in forum #147367 dated September 11, 2019. If you are facing difficulties with the solution from the forum’s(#147367) update. Then, we request you to share those details to further proceed on this and provide you a solution as early as possible. 

  

Regards, 

Renjith Singh Rajendran. 

[Mr Andrey Voronov]

I am using v 17.2.0.50, grid has templated columns and POCO has reod-only properties

this.GridInstance.GoToPage(2) does select page but all templated columns remains blank 

[Mr Andrey Voronov]

Add templated column to the sample provided and page #2 no longer be selected :

    <GridColumns>

<GridColumn>

<Template>

<span>abc</span>

</Template>

</GridColumn>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" 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="yMd" 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>

[Vignesh Natarajan]

Hi Andrey,  

Query: “this.GridInstance.GoToPage(2) does select page but all templated columns remains blank” 

We can reproduce the reported issue while using the template column in Grid. We have modified our solution to select the record based on the index value calculated. During the initial rendering itself, we have calculated the CurrentPage where the required index is rendered using the PageSize property value.  

In the DataBound event we have selected the row based on Index value which has been calculated initially in OnInitialized method. 

Refer the below code example  

<EjsGrid @ref="GridInstance" ModelType="@Model" AllowSelection="true" AllowPaging="true" DataSource="@Orders"> 

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

    <GridPageSettings PageSize="@PageSize" CurrentPage="@CurrentPage"></GridPageSettings> 

    .           .          .                 .  

</EjsGrid> 

 

@code{ 

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

    EjsGrid<Order> GridInstance; 

    public int CurrentPage,RecordIndex,TotalPage; 

    public int PageSize = 5; 

    public Order Model = new Order(); 

    protected override void OnInitialized() 

    { 

.        .              .           .             ..  

        RecordIndex = 25 % PageSize; 

        TotalPage = 25 / PageSize; 

        CurrentPage = TotalPage + 1; 

 

    } 

    public async void DataBoundHandler() 

    {     

       this.GridInstance.SelectRow(RecordIndex); 

    } 

} 

 

We have also ensured the above solution with Column Template and POCO model which contains some read-only properties. For your convenience, we have attached the sample which can be downloaded from below  

Sample: https://www.syncfusion.com/downloads/support/forum/147491/ze/SynfusionTest-141940976  

Refer our UG documentation for your reference 

https://ej2.syncfusion.com/blazor/documentation/grid/events/#databound  

Please get back to us if you have further queries.    

Regards, 

Vignesh Natarajan.