Highlight Child Row after Update/Insert.

[gc_0620]

Using Asp.net Ajax. Below is the prototype.

 

https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/insert-update-delete-hierarchy/defaultcs.aspx

 

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.

 

 

 

 

[Attila Antal]

Hi,

 

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) {
                        $(dataItem.get_element()).addClass('highlight');
                        break;
                    } 
                }
            }
        </script>

 

 

CSS - style

 

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

 

 

Kind regards, Attila Antal
Progress Telerik