RowCommand event on a nested grid does not fire. I tried to attach a event using $addHandler in the rowDatabound event but it does fire any event in the neested grid. The example is below.

Any reason why the events dont fire. Is it because I am creating a new row dynamically to the parent and replacing the content from the NestedGrid?

Thanks

Rakesh

 <!-- Master Grid -->
             <AjaxData:GridView ID="grdOrders" runat="server"  SortOrder="Descending"   CellSpacing="-1" CellPadding="3"  SortOrderAscendingImageUrl="~/Images/up.gif" SortOrderDescendingImageUrl="~/Images/dn.gif"  RowDataBoundEvent="gridOrders_onRowDataBound" RowCommandEvent="gridOrdersRowCommand"
             >
            <AlternatingRowStyle CssClass="AlternatingRowStyle" />
            <RowStyle CssClass="RowStyle"/>
            <HeaderStyle CssClass="HeaderStyle"/>
           
            <Columns>
             <AjaxData:GridViewButtonColumn CommandName="show" ButtonType="Image"
               ImageUrl="~/Images/plus.gif" AllowDragAndDrop="False" ColumnID="1"/>
            <AjaxData:GridViewBoundColumn DataField ="Order_No" HeaderText="Order No" ColumnID="6" ></AjaxData:GridViewBoundColumn>
            <AjaxData:GridViewHyperLinkColumn DataTextField="Main_Item" HeaderText="Item" DataNavigateUrlFields="Item" DataNavigateUrlFormatString="ProcessJobs.aspx?item={0}" SortField="SalesOrderNo" ControlStyle-CssClass="asphyperlink"  ></AjaxData:GridViewHyperLinkColumn>
            <AjaxData:GridViewBoundColumn DataField="Item_Description" HeaderText="Item Description" SortField="Item_Description" ColumnID="1"></AjaxData:GridViewBoundColumn>
            <AjaxData:GridViewBoundColumn DataField ="Qty_Ordered" HeaderText="Qty Ordered" ColumnID="2"></AjaxData:GridViewBoundColumn>
            </Columns>
            <EmptyDataTemplate>
             No Orders Found For This Work Center...
            </EmptyDataTemplate>
            </AjaxData:GridView>
            
     <!-- Nested Template -->       
             <div id="nested" style="display:none">
                <AjaxData:GridView ID="grdorderlines" runat="server" CellSpacing="-1" RowDataBoundEvent="getOperations_DataBound" RowCommandEvent="getOperations_RowCommand"> 
            <AlternatingRowStyle CssClass="RowStylewithGrid" />
            <RowStyle CssClass="RowStylewithGrid"/>
            <HeaderStyle CssClass="HeaderStyle"/>
            <Columns>
           <AjaxData:GridViewButtonColumn CommandName="text" ButtonType="Button" Text=" T "
                    AllowDragAndDrop="False" ColumnID="2" > 
                 <ControlStyle CssClass="frmbuttonsmall" />
                </AjaxData:GridViewButtonColumn>           
            <AjaxData:GridViewBoundColumn DataField="Operation" HeaderText="Operation" ></AjaxData:GridViewBoundColumn>
            <AjaxData:GridViewBoundColumn DataField="WorkCenter" HeaderText="Work Center" ></AjaxData:GridViewBoundColumn>
            <AjaxData:GridViewBoundColumn DataField="WC_Description" HeaderText="Description" ></AjaxData:GridViewBoundColumn>
          
            </Columns>
                <EmptyDataTemplate>No Order Lines Found for this Work Order.</EmptyDataTemplate>
</AjaxData:GridView>
             </div>

     <!-- Script for Master-->       

function gridOrdersRowCommand(sender, e)
    {

    if (e.get_commandName() == "show")
         {
            var tr = e._row.get_container();
            var divID = "nested" + e._row._dataItem.Order_No;
            if (!$get(divID))
            {
                ShowOrderResultData(e._row);
                tr.childNodes[0].childNodes[0].src = "Images/minus.gif";
            }
            else
            {
                //Data already fetched from server so just show and hide the div.
                var datadiv = $get(divID);
                //debugger;
                if (datadiv.style.display == "block")
                {
                    datadiv.style.display = "none";
                    tr.childNodes[0].childNodes[0].src = "Images/plus.gif";
                }
                else
                {
                    datadiv.style.display = "block";
                    tr.childNodes[0].childNodes[0].src = "Images/minus.gif";
                }
            }
        }

    }

function ShowOrderResultData(row)
    {
  
    var key = row._dataItem;
    var Context = new Object;
    var tr = row.get_container();
    Context.rowidx = tr.rowIndex;
    Context.Key = key.Order_No;
    Context.Qty = key.Qty_Ordered;
    Context.Item = key.Main_Item;
   
    Services.GetMulitOrderLines(key.Order_No,"",0, onLoadOrderDetailsSuccess, onFailure, Context);
   
    }
    function onLoadOrderDetailsSuccess(result,Context)
    {
     
       // Binds the nested grid
        onLoadOperationItemsSuccess(result);
       
   
    //
    var tableRef = $get('<%= grdOrders.ClientID %>');
    var idx = Number(Context.rowidx) + 1;
    //alert(tr.rowIndex);

    var newRow = tableRef.insertRow(idx);

    // Insert a cell in the row at index 0
    var newCell0 = newRow.insertCell(0);
    var newCell = newRow.insertCell(1);

    newCell.colSpan = _gridorders.get_columns().length - 1;
    var newDiv = document.createElement("DIV");
    newDiv.id = "nested" + Context.Key;
    newDiv.style.display = "block";
    newDiv.innerHTML = $get("nested").innerHTML;
   
//    alert(newDiv.innerHTML);
    newCell.appendChild(newDiv);
   
    }

<!-- Nested Grid Scripts -->

var _grdorderlines = null;
    function InitiailizeOperations()
    {  
            _grdorderlines = $find('<%= grdorderlines.ClientID %>');
    }

function onLoadOperationItemsSuccess(result)
    {
         if(_grdorderlines == null )
            InitiailizeOperations();
   
        _grdorderlines.set_dataSource(null);
        _grdorderlines.set_dataSource(result.Table.rows);
        _grdorderlines.dataBind();
    }

//Note: Data Bound event fires
    function getOperations_DataBound(sender, e) {
        debugger;
        var row = e.get_row();
        var tr = row.get_container();
        if (row.get_isDataRowType()) {
            if (row._dataItem.Opr_Text != "")
                tr.childNodes[0].childNodes[0].style.display = "block";
            else
                tr.childNodes[0].childNodes[0].style.display = "none";

        }

    }

//Does not fire
    function getOperations_RowCommand(sender, e) {
        if (e.get_commandName() == "text") {
            alert(e._row._dataItem.Opr_Text);
        }
    }

Rakesh does it work before you start adding rows dynamically?

I think that you are approaching this wrong. You should not replace the div with the innerHTML of the grid to display a hierarchy. Take a look at this nested example:

http://ajaxdatacontrols.codeplex.com/SourceControl/changeset/view/46291#183643

Let me know if you find it difficult to implement.

I had tried this approach before but the nested grid was shown under one column of the parent grid and it looked very odd. So I had to do this approach.

There are 2 things that I want to implement

1) Nested data should be on demand

2) The nested grid should occupy the entire space.

How do I create a template column in the parent grid that would expand 100% width. 

I will give it a try and see how it goes.. if you have any ideas then please let me know.

Can I attach a file to the post? if yes how?

Thanks

Rakesh 

 Ok Its working now.. Just a small change in the above code...

Instead of using a UserControl.. I took the $create.. function and used it to create the child grid dynamically. I am creating a table element inside the div at runtime and then using the $create function to create the nested grid.

Thanks Sonu..

 var ttable = document.createElement("table");
        ttable.id = "nestTable" + Context.Key;
        newDiv.appendChild(ttable);
        var tt = $find(ttable.id);
        tt = $create(AjaxDataControls.GridView, { "alternatingRowStyle": new AjaxDataControls.TableItemStyle('', '', '', '', 'RowStylewithGrid', new AjaxDataControls.FontInfo('', '', '', '', ''), '', '', '', '', '', true), "columns": [$create(AjaxDataControls.GridViewButtonColumn, { "allowDragAndDrop": false, "buttonType": AjaxDataControls.GridViewColumnButtonType.Button, "columnID": 2, "commandName": "text", "controlStyle": new AjaxDataControls.Style('', '', '', '', 'frmbuttonsmall', new AjaxDataControls.FontInfo('', '', '', '', ''), '', '', ''), "text": " T " }, null, null), $create(AjaxDataControls.GridViewBoundColumn, { "allowDragAndDrop": true, "columnID": 2, "dataField": "Operation", "headerText": "Operation" }, null, null), $create(AjaxDataControls.GridViewBoundColumn, { "allowDragAndDrop": true, "columnID": 3, "dataField": "WorkCenter", "headerText": "Work Center" }, null, null), $create(AjaxDataControls.GridViewBoundColumn, { "allowDragAndDrop": true, "columnID": 4, "dataField": "WC_Description", "headerText": "Description" }, null, null), $create(AjaxDataControls.GridViewBoundColumn, { "allowDragAndDrop": true, "columnID": 5, "dataField": "Op_stat", "headerText": "Status" }, null, null), $create(AjaxDataControls.GridViewBoundColumn, { "allowDragAndDrop": true, "columnID": 6, "dataField": "Task", "headerText": "Task" }, null, null), $create(AjaxDataControls.GridViewBoundColumn, { "allowDragAndDrop": true, "columnID": 7, "dataField": "Qty_to_Make", "headerText": "Qty to Make" }, null, null), $create(AjaxDataControls.GridViewBoundColumn, { "allowDragAndDrop": true, "columnID": 8, "dataField": "Remaining_Time", "headerText": "Remaining Time" }, null, null), $create(AjaxDataControls.GridViewBoundColumn, { "allowDragAndDrop": true, "columnID": 5, "dataField": "Next_Opr", "headerText": "Next Opreration" }, null, null)], "emptyDataTemplate": "No Order Lines Found for this Work Order.", "headerStyle": new AjaxDataControls.TableItemStyle('', '', '', '', 'HeaderStyle', new AjaxDataControls.FontInfo('', '', '', '', ''), '', '', '', '', '', true), "rowStyle": new AjaxDataControls.TableItemStyle('', '', '', '', 'RowStylewithGrid', new AjaxDataControls.FontInfo('', '', '', '', ''), '', '', '', '', '', true) }, { "rowCommand": getOperations_RowCommand, "rowDataBound": getOperations_DataBound }, null,ttable);
       
        tt.set_dataSource(result.Table.rows);
        tt.dataBind();

Great to see that you got it working. Thanks for the followup and posting the solution.