Highlight Child Row after Update/Insert.

2 posts, 0 answers
  1. gc_0620
    gc_0620 avatar
    246 posts
    Member since:
    Feb 2008

    Posted 09 Aug Link to this post

    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.

     

     

     

     

  2. Attila Antal
    Admin
    Attila Antal avatar
    376 posts

    Posted 14 Aug Link to this post

    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

    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.
Back to Top