This is a migrated thread and some comments may be shown as answers.

Highlight Child Row after Update/Insert.

1 Answer 76 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
gc_0620 asked on 09 Aug 2019, 04:41 PM

Using Ajax. Below is the prototype.


My question is that I would like to high light the Last edited/inserted row in Child Table's. Refer to attached.


Thanks a lot.





1 Answer, 1 is accepted

Sort by
Attila Antal
Telerik team
answered on 14 Aug 2019, 09:23 AM



This behavior is beyond RadGrid's capabilities but it is possible to be implemented.  I happen to have a VB sample (see attachments) without hierarchy, but the same approach can be used with hierarchy. See the following short video: RadGrid Highlight last inserted item


You can use the following example a starting point and adjust the project further to make it meet the requirements.

Depending on the Data Binding technique, (Advanced Data Binding, Declarative DataSource) you may need to choose the right event where you will have access to the ID of the last inserted row.

Here are some instructions:

  1. Once the DataSource is updated, rebind the grid
  2. Set the current page Index to the last page
  3. Add a custom attribute containing the last inserted item's ID as value
  4. Wire up the GridCreated client-side event to the Grid
  5. In the GridCreatedEvent handler, verify that the custom attribute exists
  6. Loop through the GridItems of the current page and check the one that has the same ID as the one stored in the custom attribute
  7. If the Item is found, add a custom CSS class name to the row element.
  8. Use CSS Style to highlight the row that has the custom CSS class

Code Snippets

VB - InsertCommand



Protected Sub RadGrid1_InsertCommand(sender As Object, e As GridCommandEventArgs)
        '' code to insert data into the datasource

        RadGrid1.Rebind() '' rebind the Grid
        RadGrid1.CurrentPageIndex = RadGrid1.PageCount '' change the page to last page
        RadGrid1.Attributes.Add("data-lastInsertedId", newRow("OrderID")) '' add custom attribute
    End Sub



JavaScript - GridCreated event handler:


        <script type="text/javascript">
            function OnGridCreated(sender, args) {
                var lastInsertedId = $telerik.$(sender.get_element()).data().lastinsertedid;

                if (!lastInsertedId) return;

               var grid = sender;
                var masterTable = grid.get_masterTableView();
                var dataItems = masterTable.get_dataItems();

                for (var i = 0; i < dataItems.length; i++) {
                    var dataItem = dataItems[i];

                    if (dataItem.getDataKeyValue("OrderID") == lastInsertedId) {



CSS - style


    <style type="text/css">
        .RadGrid .rgMasterTable tbody tr.highlight td {
            background-color: aquamarine;



Kind regards, Attila Antal
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question