Subgrids and dynamic fixDetailRowHeight

[WizPS]

I have sub-grids containing tabs and want to fix the DetailRowHeight dynamically. In my current solution I need to track the path to expanded sub-grid and revers to top grid and do fixDetailRowHeight. I fail trying and hope there is a better way. Below is my code example, please advise.

Code:

<div id="dg_main"></div>

<script type="text/javascript">

    function f_dg(iID, lev, oID) {
        
        if (!oID) {
            oID = {};
            lev = 0;
            iID = "";
        }
        var thislevel = Object.keys(oID).length;

        var fit = false;
        if (lev === 0) { fit = false; }
        lev++;
        var datagrid = {
            singleSelect: true
            , pagination: true
            , view: detailview
            , url: "static/home_data.aspx"
            , fit: fit
            , fitColumns: true
            , title: ":" + lev + iID
            , detailFormatter: function (index, row) {
                return "<div class='ddv' style='padding:5px 0'></div>";
            }
            , columns: [[
                { field: "itemid", title: "Item ID", width: 80 }
                , { field: "productid", title: "Product ID", width: 100 }
                , { field: "listprice", title: "listprice", width: 80, align: "right" }
                , { field: "unitcost", title: "Unit Cost", width: 80, align: "right" }
                , { field: "attr1", title: "Attribute", width: 220 }
                , { field: "status", title: "Status", width: 60, align: "center" }
            ]]
            , onExpandRow: function (index, row) {
                var zID = "_" + lev + iID + index;
                if (!$("#pan_" + zID)[0]) {
                    var ddv = $(this).datagrid("getRowDetail", index).find("div.ddv");
                    ddv.panel({
                        id: "pan_" + zID
                        , cache: false
                    })
                        .tabs({
                            tabHeight: 25
                            , showHeader: true
                            , tabPosition: "top"
                            , onSelect: function (title) {
                                var zdg = $("#g_" + zID + title);
                                if (!zdg.data("datagrid")) {
                                    $(zdg).datagrid(f_dg(zID + title, lev, oID));
                                }
                                else {
                                    zdg.datagrid({
                                        url: "static/home_data.aspx"
                                        , onLoadSuccess: function () {
                                            $("#dg_main").datagrid("fixDetailRowHeight", index);
                                        }
                                    });
                                }
                                $("#dg_main").datagrid("fixDetailRowHeight", index);
                            }
                        })
                        .tabs("add", { id: "tab1_" + index, title: "tab1", content: "<div id='g_" + zID + "tab1'>tab1_" + index + "</div>" })
                        .tabs("add", { id: "tab2_" + index, title: "tab2", content: "tab2_" + index + "" })
                        ;
                }
            }
        }
        return datagrid;
    }
    $("#dg_main").datagrid(f_dg());
</script>

[jarry]

You should call 'getParentGrid' method to get the parent datagrid component and then call 'fixDetailRowHeight' method to fix the row height. Please refer to this updated code.

Code:

, onSelect: function (title) {
    var pdg = $(this).datagrid('getParentGrid');
    var zdg = $("#g_" + zID + title);
    if (!zdg.data("datagrid")) {
        $(zdg).datagrid(f_dg(zID + title, lev, oID));
    }
    else {
        zdg.datagrid({
            url: "static/home_data.aspx"
            , onLoadSuccess: function () {
                pdg.datagrid("fixDetailRowHeight", index);
            }
        });
    }
    pdg.datagrid("fixDetailRowHeight", index);
}

[WizPS]

Now with 'getParentGrid' I got it to work better but it does not expand the list as I expect.
Now it looks like this: as_Is.png
And should look like this: should_be.png

I got the right format (should_be.png) by collapsing and expanding each row once going up to the highest level.
Here is the new code:

Code:

<div id="dg_main"></div>

<script type="text/javascript">

   function f_dg(iID, lev, oID) {

      if (!oID) {
         oID = {};
         lev = 0;
         iID = "";
      }
      var thislevel = Object.keys(oID).length;

      var fit = false;
      if (lev === 0) { fit = true; }
      lev++;
      var datagrid = {
         singleSelect: true
         , pagination: true
         , view: detailview
         , url: "static/home_data.aspx"
         , fit: fit
         , fitColumns: true
         , title: ":" + lev + iID
         , detailFormatter: function (index, row) {
            return "<div class='ddv' style='padding:5px 0'></div>";
         }
         , columns: [[
            { field: "itemid", title: "Item ID", width: 80 }
            , { field: "productid", title: "Product ID", width: 100 }
            , { field: "listprice", title: "listprice", width: 80, align: "right" }
            , { field: "unitcost", title: "Unit Cost", width: 80, align: "right" }
            , { field: "attr1", title: "Attribute", width: 220 }
            , { field: "status", title: "Status", width: 60, align: "center" }
            , { field: lev + iID, title: lev + iID, width: 60, align: "center" }
         ]]
         , onExpandRow: function (index, row) {
            var zID = "_" + lev + iID + index;
            if (!$("#pan_" + zID)[0]) {
               var ddv = $(this).datagrid("getRowDetail", index).find("div.ddv");
               ddv.panel({
                  id: "pan_" + zID
                  , cache: false
               })
                  .tabs({
                     tabHeight: 25
                     , showHeader: true
                     , tabPosition: "top"
                     , onSelect: function (title) {
                        var pdg = $(this).datagrid('getParentGrid');
                        var zdg = $("#g_" + zID + title);
                        if (!zdg.data("datagrid")) {
                           $(zdg).datagrid(f_dg(zID + title, lev, oID));
                        }
                        else {
                           zdg.datagrid({
                              url: "static/home_data.aspx"
                              , onLoadSuccess: function () {
                                 var p_grid = $(this).datagrid('getSelfGrid');
                                 fn_fix(p_grid, index);
                              }
                           });
                        }
                        var p_grid = $(this).datagrid('getSelfGrid');
                        fn_fix(p_grid, index);
                     }
                  })
                  .tabs("add", { id: "tab1_" + index, title: "tab1", content: "<div id='g_" + zID + "tab1'>tab1_" + index + "</div>" })
                  .tabs("add", { id: "tab2_" + index, title: "tab2", content: "tab2_" + index + "" })
                  ;
            }
         }
      }
      return datagrid;
   }

   function fn_fix(grid, index) {
      grid.datagrid("fixDetailRowHeight", index);
      var p1 = grid.datagrid("getParentGrid");
      if (p1) {
         p1.datagrid("fixDetailRowHeight", grid.datagrid("getParentRowIndex"));
         var p2 = p1.datagrid("getParentGrid");
         if (p2) {
            p2.datagrid("fixDetailRowHeight", p1.datagrid("getParentRowIndex"));
            var p3 = p2.datagrid("getParentGrid");
            if (p3) {
               p3.datagrid("fixDetailRowHeight", p2.datagrid("getParentRowIndex"));
            } 
         } 
      }
      $("#dg_main").datagrid("fixDetailRowHeight", 0);
   }
   $("#dg_main").datagrid(f_dg());
</script>

How can this be expanded automatically?
Thanks for help!