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
close icon

when a new record is added in the grid how to made it as the current selected row

Using the internal editing of the grid with  the toolbar Toolbar="@(new List<string>() { "Add", "Edit" , "Delete" , "Cancel" , "Update" })" when i add anew record I would like to have the ability to make as the selected record and show it in the visible  part of the grid. I can't find a way to find out which is the last added record. Can you help me please ?


5 Replies

RN Rahul Narayanasamy Syncfusion Team July 29, 2019 01:36 PM UTC

Hi Frangoudes, 

Greetings from Syncfusion. 

Query: when a new record is added in the grid how to made it as the current selected row 

We have analyzed your requirement in our current implementation, we have added a new record at the end of the grid. From your query, we have understood that you need to add new record at the top of the current page(a newly added record at current page suppose your current page is 2)  and you want to select the same record in the grid. 

Could you please confirm whether this is your requirement or not. If this is not your requirement, then provide more details about your requirement. 

Regards, 
Rahul 



FP Frangoudes Panikos July 29, 2019 02:08 PM UTC

Hello Rahul ,
thank you for your reply.

My requirement is as follows:

After Adding a new row (record) in the grid either at the top or at the bottom to have a way of selecting(highlight) the new inserted row.

The grid might be in a sorted state by any column.

I think what is actually is needed is a property indicating the row index of the new inserted row. 

Best regards
Panikos Frangoudes



RN Rahul Narayanasamy Syncfusion Team July 30, 2019 12:54 PM UTC

Hi Frangoudes, 
 
Thanks for your update. 
 
Query: After Adding a new row (record) in the grid either at the top or at the bottom to have a way of selecting(highlight) the new inserted row. 
 
From your provided information, you have applied sorting for one of the columns in the grid, so while adding a new record, grid will get refreshed and render the current page data based on the sorted column order. In this case the newly added record  may not be displayed in the current page and it takes any index position and placed in any page(if you have enabled paging). It is feasible to select/highlight the record only when it is visible in the DOM(current page). This is the default behavior. 
 
We suspect that you need to know what are all the records are newly added in the existing grid and need to highlight those records for your reference.  

We have achieved your requirement(highlight the newly inserted record) by using OnActionBegin and RowDataBound event of the grid. Please find the below code example and sample for your reference. 
 
Note: If you have enabled paging, then the inserted record is placed in second page for instance you can highlight that newly record when you move to the corresponding page(page 2) using the below way. 
 
[code example] 
... 
@{ 
    List<SortDescriptorModel> SortedColumns = new List<SortDescriptorModel>(); 
    SortedColumns.Add(new SortDescriptorModel() { Field = "CustomerID", Direction = SortDirection.Ascending }); 
} 
 
<EjsGrid @ref="@grid" AllowSorting="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" OnActionBegin="@ActionBeginHandler" RowDataBound="@RowDataBoundHandler"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 
    <GridSortSettings Columns="@SortedColumns"></GridSortSettings> 
    <GridPageSettings PageCount="2"></GridPageSettings> 
    <GridColumns> 
        ... 
   </GridColumns> 
</EjsGrid> 
 
@functions{ 
 
   EjsGrid grid; 
 
    List<int?> ids = new List<int?>(); 
 
    public List<Order> 
    Orders 
    { get; set; } 
 
    public void ActionBeginHandler(ActionEventArgs args) 
    { 
        if (args.RequestType.ToString() == "Save") 
        { 
            var data = JsonConvert.DeserializeObject<Order>(JsonConvert.SerializeObject(args.Data)); 
            ids.Add(data.OrderID); 
        } 
    } 
 
    public void RowDataBoundHandler(RowDataBoundEventArgs args) 
    { 
        if (ids.Contains(JsonConvert.DeserializeObject<Order>(JsonConvert.SerializeObject(args.Data)).OrderID)) 
        { 
            args.Row.AddClass(new string[] { "green" }); 
        } 
    }    ... 
} 
 
<style> 
 
    .green { 
        background-color: lightgreen; 
    } 
</style> 
 
 
 
                                             https://ej2.syncfusion.com/aspnet-core-blazor/documentation/grid/events/#rowdatabound  

If the provided solution does not meet your requirement, then please share more details about what is the need/use case of highlighting the newly added record in grid and some more information about your use case. Based on the provided information we will analyze your requirement and update you the response as early as possible 

Regards, 
Rahul 



FP Frangoudes Panikos August 7, 2019 07:53 AM UTC

Hello Rahul ,

thank you for your reply.

Though your proposed solution is great, it will be used in other cases, it does not respond to my requirement which is as follows:
The grid uses the CRUD Toolbar.
The insertion of the new record can be either at the top or at the bottom of the grid.
The grid can be sorted by any one of its columns.
The grid can be in Allow pages=true or Allow pages=false.


Once  the save button is clicked then a new record is inserted,  I would like the grid to scroll to the inserted record and make it selected, so the user will always see the newly inserted row  and that row will be in a selected state.



Thank you very much for your interest
Best regards
Panikos Frangoudes


RN Rahul Narayanasamy Syncfusion Team August 8, 2019 01:09 PM UTC

Hi Panikos, 
  
Thanks for your update. 
  
Query: Once  the save button is clicked then a new record is inserted,  I would like the grid to scroll to the inserted record and make it selected, so the user will always see the newly inserted row  and that row will be in a selected state. 
  
As per your request, we have achieved your requirement by using OnActionBegin and OnDataBound event of the grid. We have selected the record by using SelectRow method of the grid after performing add operation. Please find the below code example and sample for your reference. 
  
Note: It is feasible to select the record only when it is visible in the DOM(current page). So it is not possible to select the added records when you have enabled paging. 
  
[code example] 
... 
  
@{ 
    List<SortDescriptorModel> SortedColumns = new List<SortDescriptorModel>(); 
    SortedColumns.Add(new SortDescriptorModel() { Field = "CustomerID", Direction = SortDirection.Ascending });    //initial sorting 
} 
  
<EjsGrid @ref="@grid" AllowSorting="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    <GridEvents OnDataBound="DataBoundHandler" OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 
    <GridSortSettings Columns="@SortedColumns"></GridSortSettings> 
    <GridPageSettings PageCount="2"></GridPageSettings> 
    <GridColumns> 
        ... 
   </GridColumns> 
</EjsGrid> 
  
@functions{ 
  
    EjsGrid<Order> Grid; 
    public static int? Pkey { get; set; } 
    public bool Initial { get; set; } = true; 
    ... 
    public void ActionBeginHandler(ActionEventArgs<Order> args) 
    { 
        if (args.RequestType.ToString() == "Save") 
        { 
            Pkey = args.Data.OrderID;           //get primary key value of newly added record 
        } 
    } 
  
    public async void DataBoundHandler(BeforeDataBoundArgs<Order> args) 
    { 
        if (!Initial) { 
            await Task.Delay(100); 
            var Idx = await this.Grid.GetRowIndexByPrimaryKey(Convert.ToDouble(Pkey));   //get index value 
            this.Grid.SelectRow(Convert.ToDouble(Idx));       //select the added row by using index value of the record 
        } 
        Initial = false; 
    } 
  
    ... 
} 
  
  
  
Note: We have created the above sample with latest NuGet version(17.2.0.40-beta) and latest source(17.2.40). 
  
  
Please get back to us if you need further assistance. 
  
Regards, 
Rahul 


Loader.
Live Chat Icon For mobile
Up arrow icon