Adding dgrids dynamically to a TabContainer with varying widths

[KenBuja]

I'm rewriting an application I developed in Flex that allows a user to identify the features of all the visible layers and puts the result in a tab container, with each tab containing the results of each visible layer. This application can be viewed here.

[ATTACH=CONFIG]25337[/ATTACH]

I've gotten the new application to the point where I have populated the tab containers with the grids, but some of the grids are not showing all the fields. The issue is that there are varying number of fields to be shown...from two to 100. However, all the grids are the same width, so the grid for layer 224 is only showing 7 of the 97 fields. I've created a Fiddle that shows this issue.

This is what it's looking like now in JavaScript

[ATTACH=CONFIG]25340[/ATTACH]

A couple of things with the Fiddle. It isn't rendering the tabs correctly, but clicking on the numbers at top will show the different tabs. Also, the CSS section contains a couple of different files merged together, but the styles for the dgrid that I'm using are at the bottom of the list, setting the default size of the dgrid and the width of the fields (50px for all except the OJBECTID field).

Finally, the Fiddle should be showing one other issue I'm having with the dgrid. Sometimes the first row of the data overlaps the header.

[ATTACH=CONFIG]25341[/ATTACH]

[Anonymous User · Accepted solution]

Original User: kenbuja

I figured out how to accomplish this by using the addCssRule method to dynamically size the grids.

dataGrid.addCssRule("#" + dataGrid.id, "width: " + newsize + "px");

I have updated the Fiddle to show this, although it's still sometimes shoving the grid content into the header.

[JonathanUihlein]

Even though you've marked this thread as answered, I'm not sure you've fixed your dgrid header issue.

https://github.com/SitePen/dgrid/issues/285#issuecomment-8655324

https://github.com/SitePen/dgrid/issues/249

What it comes down to is you are probably starting up your grid(s) at the wrong time (usually too early).

You could start them up after manually calling the parser.

Something like:

require([ "dojo/ready","dojo/parser"], function (ready, parser){
 // Other Code
 parser.parse();
 ready(function (){
  // dataStore = new Memory ({data});
  yourGrid.set("store", dataStore );
  yourGrid.startup();
  // Other Code
 });
});

There are other valid options listed in the two threads I linked above.

[Anonymous User]

Original User: kenbuja

I'm still having an intermittent problem with the grid content overlapping the header. I have tried the adding the resize into the onShow event, but that doesn't make a difference either. I've discovered that since the grid has the ColumnHider extension, if I change the visibility of one of the columns, the content no longer overlaps the header.

[KenBuja]

I was able to solve the content/header overlap by firing the "datagrid.renderArray(data)" command after adding the dgrid to the ContentPane and firing "cp.startup". This version of the Fiddle shows the correct syntax.

[Anonymous User]

Original User: gsimpson4

It might also help to add DijitRegistry to your declare:

var dataGrid = new(declare([Grid, Selection, ColumnHider,DijitRegistry]))

Also add this to your require:

"dgrid/extensions/DijitRegistry"

[KenBuja]

Thanks,

In my final project, I did include the DijitRegistry in the dGrid declaration.

[Anonymous User]

Original User: kenburcham

Oh man, this is so great to know.  I ended up doing css things because I couldn't figure it out.  Nice!