Dynamically created datagrid inside ExpandoPane sizing issues

AdrianMarsden — Fri, 12 Jul 2013 08:09:25 GMT

OK, Here's what I have - I have a classic layout of expando panes. Left with TOC, main with map and bottom with other stuff.

The bottom pane starts collapsed.

I use this for a datagrid showing results of a find task. This datagrid will vary according to what layer is searched and is creadte fresh for each search. If a previous one exists it will be destroyed. This is the code that does that bit

        var w = dijit.byId("gridx");        if (w) {
            w.destroy();
        }
        //then we construct a new DOM node, gridx,
        require(["dojo/dom-construct"], function (domConstruct) {
            domConstruct.place(infotext, "xxx", "after");
        });
      //because we are using a DataGrid we need to run the dojo parser again to get the info on it
        //but just on the gridx object, totally re-ruunning it will fail as it will re-register existing items
        dojo.parser.instantiate([dojo.byId("gridx")]);

I then create the new datagrid here's the first line of that bit

 var infotext =          "<table data-dojo-type='dojox.grid.DataGrid' style='width: 97%; height: 120px;' style='overflow:auto' data-dojo-id='gridx'  id='gridx' ><thead><tr>";

I then expand the expandopane

        if (!dijit.byId("footer")._showing) {            dijit.byId("footer").toggle();


        }

Now the issue. The first time I run this the style of the datagrid as set above is ignored, resulting in a much bigger grid, any scroll bars are well off the visible screen.

Subsequent runs of this routine work.

I have created a dummy datagrid at the initial load that is the right size, but this doesn't do anything BUT, and this isn't 100%, if I expand the ExpandoPane straight after the initial load, with the dummy grid, that causes the size of the first real run to be correct. It seems to me to do with the fact that the ExpandoPane is collapsed. I have moved the expand routine to after I create the new datagrid within it, but that fails to.

I've spent nearly a day playing around with this! Any help would be much appreciated

ACM

PS as a work around I have set it so that as soon as the user starts the search process (hits a button and a dialog box appears for the parameters) this is when I expand the results pane. If no results it collapses again. This seems to work.

edit 2
Just noticed - once the datagrid is in the expandopane and correctly sized. I collapse the pane, then uncollapse it and the grid has all gone silly again.

So what exactly happens to the contents of the pane when it collapses? Do they all get a resize command? Here's the before collapse generated HTML

 <div hidefocus="hidefocus" role="grid" dojoattachevent="onmouseout:_mouseOut" tabindex="0" aria-multiselectable="true" class="dojoxGrid" id="gridx" align="left" widgetid="gridx" aria-readonly="true" aria-activedescendant="gridxHdr6" style="width: 97%; height: 120px;">
.
.

and after collapsing the expnadopane

 <div hidefocus="hidefocus" role="grid" dojoattachevent="onmouseout:_mouseOut" tabindex="0" aria-multiselectable="true" class="dojoxGrid" id="gridx" align="left" widgetid="gridx" aria-readonly="true" style="width: 1680px; height: 18px;">
.
.

So, even when hidden my data grid has been resized incorrectly!

Re: Dynamically created datagrid inside ExpandoPane sizing issues

PeggyCorey — Fri, 28 Aug 2020 17:46:38 GMT

Did you ever get this solved? I'm having similar issues with my DataGrid inside my ExpandoPane - where the sizing is not as expected. Any insights you can provide might be helpful... thanks!

topic Re: Dynamically created datagrid inside ExpandoPane sizing issues in ArcGIS JavaScript Maps SDK Questions

Dynamically created datagrid inside ExpandoPane sizing issues

Re: Dynamically created datagrid inside ExpandoPane sizing issues