We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to select row that is not on CurrentPage ?

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


4 Replies

RS Renjith Singh Rajendran Syncfusion Team September 13, 2019 07:06 AM UTC

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



MA Mr Andrey Voronov September 13, 2019 08:19 AM UTC

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 


MA Mr Andrey Voronov September 16, 2019 10:57 AM UTC

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>



VN Vignesh Natarajan Syncfusion Team September 17, 2019 05:13 AM UTC

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  

Refer our UG documentation for your reference 


Please get back to us if you have further queries.    

Regards, 
Vignesh Natarajan. 


Loader.
Live Chat Icon For mobile
Up arrow icon