1. Home
  2. Forum
  3. Blazor
  4. How to select a row programmatically or bind selection to model?

How to select a row programmatically or bind selection to model?


Hello,

In the docs it's described how to get the selected cells.

Also it's written how to select a single value on initialization.

I'd like to select multiple values on initialization.

I tried to bind the CheckBox to a bool of my model like this:

 <GridColumn Type="ColumnType.CheckBox" Field=@nameof(GroupMemberView.IsSelected) Width="50"></GridColumn>

This is working (not documented (?)), but the RowSelected event is fired on initialization, which is not usable in my case.
I need something like UserSelectedRow or I need the information whether a user selected it or not.

Also I tried to use the Grid.SelectCells(object) method, to set the values manually, after the grid is loaded.

1. How to select multiple cells based on the model?

2. How to use this method?:  Grid.SelectCells(object);


regards Manuel




6 Replies
RS Renjith Singh Rajendran Syncfusion Team September 9, 2019 11:58 AM UTC

Hi Manuel, 

Thanks for contacting Syncfusion support. 

Query 1 : I'd like to select multiple values on initialization. && Also I tried to use the Grid.SelectCells(object) method, to set the values manually, after the grid is loaded. 
We have analyzed your requirement. We suggest you to use the “SelectCells” method of Grid inside the “OnDataBound” event handler of Grid, and pass the object value as parameter for the SelectCells method as like the below code. Please use the code below, 

 
    <EjsGrid @ref="gridInstance" AllowSelection="true" DataSource="@Orders" Height="315"> 
        <GridEvents OnDataBound="DataBoundHandler" TValue="Order"></GridEvents> 
        ... 
   </EjsGrid> 
 
    public async void DataBoundHandler(BeforeDataBoundArgs<Order> args) 
    { 
        await Task.Delay(200); 
        string myDynamicJSON = "[{rowIndex: 0, cellIndexes:[1]},{rowIndex: 2, cellIndexes:[2,3]}]"; 
        this.gridInstance.SelectCells((IEnumerable<object>)JsonConvert.DeserializeObject(myDynamicJSON)); 
    }  


We have also prepared a sample based on this requirement. Please download the sample from the link below, 
 
Query 2 : RowSelected event is fired on initialization, which is not usable in my case.I need something like UserSelectedRow or I need the information whether a user selected it or not. 
We would like to inform you that, the RowSelected and RowSelecting events will be triggered each time you perform select a row in Grid either manually or programmatically. If you want to restrict the actions defined in your “RowSelected” handler at initial loading, then we would suggest you to use the below way. Define a flag variable, and use the “OnLoad” event as like the below code. 

 
<EjsGrid AllowSelection="true" ...> 
    <GridEvents OnLoad="OnLoad" RowSelected="RowSelected" TValue="Order"></GridEvents> 
    ... 
</EjsGrid> 
 
@code{ 
    ... 
    public bool flag = false; 
   public void OnLoad() 
    { 
        this.flag = true; 
    } 
   public void RowSelected(RowSelectEventArgs<Order> args) 
    { 
        if (this.flag) 
        { 
            //perform actions during initial load selection 
            this.flag = false;    
        } 
        else 
        { 
            //perform actions after loading during manual selection  
        } 
    } 
    ... 
} 


And also we suggest you the “GetSelectedRows” method which fetches the details of already selected rows in Grid. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


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

But how to select row on specific page ? Suppose page size is 20 and I would like to select the first row on second page: 

public async void DataBoundHandler(BeforeDataBoundArgs<Order> args) 
    { 
        await Task.Delay(200); 
        this.gridInstance.GoToPage(2); 
        await Task.Delay(200); 
        this.gridInstance.SelectRow(40); 
    }

This code works for page #1 only  

MR Manuel Reinacher September 10, 2019 05:50 PM UTC

Hello ;)

Thanks for your answer.

1.

I have to say that an an selection by index is not really usable for me, because I don't know how to get the index of row x which represents the model with primary key y.
(I'm using the odatav4 provider)
And what happens when I change the page, disable paging etc?

Also I think handling with indexes should be the job of the control and not of the user who uses the control.
We may have different opinions about this topic, but I think you should add methods like this:

Grid.SelectRowsByPrimaryKey(new[] {primaryKey1, primaryKey2});

Grid.GetSelectedPrimaryKeys();

or something simiar.
The information in these example is about the model and not how it's displayed. - And in my opinion the control cares how the model is displayed based on my configuration.

When I use the GetSelectedRows method, I don't know how to get the model (or primary key) from that DOM object.
Also I don't really want to manage the DOM of your control, because you know, how to handle it.

This is just an suggestion and my opinion - I'm happy anyway, because I use syncfusion for free and 
I think complaining about something which is free is just stupid :P


2.

I did a small test and it looks like it's working. If I notice an issue I'll mention it. - Thank you!


regards Manuel

RS Renjith Singh Rajendran Syncfusion Team September 11, 2019 10:30 AM UTC

Hi Mr Andrey/Manuel, 
  
Thanks for your updates. 
  
Query 1 : But how to select row on specific page ? 
We have analyzed the reported problem, and we are not able to reproduce this problem. We suggest you to ensure the Selection Mode for your Grid(the sample which we have shared in previous update has selection mode as Cell). If the selection mode is cell then “SelectRow” method won’t be selecting the specified row in the specified page. We have prepared a sample based on this requirement, please download the sample form the link below, 
  
  
Please ensure the below code in your application, 
  
<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 : The first row in each page has an index as 0. So if you want to select the first row in your second page you need to pass 0 as parameter for SelectRow. 
 
Query 2 : I have to say that an an selection by index is not really usable for me, because I don't know how to get the index of row x which represents the model with primary key y. 
Based on this requirement, we suggest you to use the “GetRowIndexByPrimaryKey”  method of Grid. With this method you can fetch the Row index for a Grid based on the Primary key value, and then use this fetched index to select a row by using the “SelectRow” method. Please use the code below, 
  
  
    public async void DataBoundHandler(BeforeDataBoundArgs<Order> args) 
    { 
        await Task.Delay(200); 
        var PrimayIndex = await this.GridInstance.GetRowIndexByPrimaryKey(1006);   //Based on primarykey value fetch index 
        this.GridInstance.SelectRow(PrimayIndex);   //Use the index to select row 
    } 
  
  
  
Query 3 : When I use the GetSelectedRows method, I don't know how to get the model (or primary key) from that DOM object. 
We suggest you to use the “GetSelectedRecords” method of Grid. With this method you can fetch the selected row’s model/primary value. Please refer the code below, 
  
  
    public async void click()   //As an example, we have used the button click to call GetSelectedRecords method 
    { 
        var SelectedRecords = await this.gridInstance.GetSelectedRecords();     //Fetch the selected records 
        var FirstRowPrimaryValue = SelectedRecords[0].OrderID;                  //Here you can fetch the primary key value of your selected row. 
    } 
  
  
  
We have prepared a sample by combining the requirement in Query 2 and Query 3. Please download the sample form the link below, 
  
Please get back to us if you need further assistance. 
  
Regards, 
Renjith Singh Rajendran. 
  


MR Manuel Reinacher September 13, 2019 12:32 PM UTC

Hello Renjith Singh Rajendran,

Thank you very much for your detailed explanation.
Now i can use it!

regards Manuel

VN Vignesh Natarajan Syncfusion Team September 16, 2019 03:39 AM UTC

Hi Manuel,  

Thanks for the update.  

We are glad to hear that you are able to achieve your requirement using our solution.  

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 


Loader.
Up arrow icon