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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

146229 Jul 26,2019 03:05 PM UTC Aug 8,2019 01:09 PM UTC Blazor 5
loading
Tags: Grid
Frangoudes Panikos
Asked On July 26, 2019 03:05 PM UTC

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 ?


Rahul Narayanasamy [Syncfusion]
Replied On 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 


Frangoudes Panikos
Replied On 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


Rahul Narayanasamy [Syncfusion]
Replied On 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 


Frangoudes Panikos
Replied On 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

Rahul Narayanasamy [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon