[Solved] Order of events in hierarchical grids

[Sreenivas]

In my master-detail scenario, I am using two grids as shown in the following example:

@(Html.Telerik().Grid<EmployeeViewModel>()
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(140);
    })
    .ClientEvents(
		events => events.OnRowDataBound("employees_onRowDataBound");
		events => events.OnDetailViewExpand("employees_onDetailViewExpand");
      )
    .DetailView(details => details.ClientTemplate(
            Html.Telerik().Grid<OrderViewModel>()
                .Name("Orders_<#= EmployeeID #>")
                .Columns(columns =>
                {
                    columns.Bound(o => o.OrderID).Width(101);
                })
                .ClientEvents(
				events => events.OnRowDataBound("orders_onRowDataBound");
			)
                .DataBinding(dataBinding => dataBinding.Ajax()
                    .Select("_OrdersForEmployeeHierarchyAjax", "Grid", new { employeeID = "<#= EmployeeID #>" }))
                .Pageable()
                .Sortable()
                .Filterable()
                .ToHtmlString()
    ))
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_EmployeesHierarchyAjax", "Grid"))
    .Pageable(paging => paging.PageSize(5))
    .Scrollable(scrolling => scrolling.Height(580))
    .Sortable();

And here is the javascript code for the event handlers:

var expandedEmployeeId;
var isCurrentEmployee = undefined;

function employees_onDetailViewExpand(e) {
       alert("employees_onDetailViewExpand");
       var grid = jQuery(this).data('tGrid');
       var employeeData = grid.dataItem(e.masterRow);
       isCurrentEmployee = undefined;
       if (employeeData != undefined) {
           expandedEmployeeId = employeeData ['EmployeeId'];
       }
       jQuery.ajaxSetup({ async: false });
       jQuery.ajax({
           type: "POST",
           url: "IsCurrentEmployee",
           data: "{ 'employeeId' : '" + expandedEmployeeId + "' }",
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           success: function (result) {
               isCurrentEmployee = result;
           }
       });
       jQuery.ajaxSetup({ async: false });
   }


   function orders_onRowDataBound(e) {
       alert("orders_onRowDataBound");
       if (isCurrentEmployee == undefined) {
           jQuery.ajaxSetup({ async: false });
           jQuery.ajax({
               type: "POST",
               url: "IsCurrentEmployee",
               data: "{ 'employeeId' : '" + expandedEmployeeId + "' }",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (result) {
                   isCurrentEmployee = result;
               }
           });
           jQuery.ajaxSetup({ async: true });
       }
       if (isCurrentEmployee == 0) {
           jQuery(e.row).find('a.t-grid-delete').remove(); //remove Delete button
           jQuery(e.row).find('a.t-grid-edit').remove(); //remove Edit button
       }
   }

As you can see I need to know the id of the currently expanded employee (parent grid) in the handler for the row bound event for orders (child) so that I can disable/enable the edit and delete command buttons.  It works as expected the first time - parent detail view expand event fires, followed by child's row bound event.  However, the order reverses when I click on the UI to expand child row.  What is the right order?, and why is it not consistent?  I appreciate any insight in advance.  Thank you