Title: Subgrids and dynamic fixDetailRowHeight
Post by: WizPS on April 07, 2019, 09:39:37 AM
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. <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>
Title: Re: Subgrids and dynamic fixDetailRowHeight
Post by: jarry on April 08, 2019, 12:13:39 AM
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. , 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); }
Title: Re: Subgrids and dynamic fixDetailRowHeight
Post by: WizPS on April 09, 2019, 03:51:34 AM
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: <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!
|