AnsweredAssumed Answered

Adding dgrids dynamically to a TabContainer with varying widths

Question asked by kenbuja on Jun 18, 2013
Latest reply on Sep 10, 2013 by geonetadmin

Like • Show 0 Likes0
Comment • 7

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]

geonetadmin Jul 25, 2013 12:20 PM

Correct Answer

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.

See the reply in context

Attachments

jsapp.png355.0 KB
headeroverlap.png14.1 KB
flexapp.png235.8 KB

No one else had this question

Outcomes

geonetadmin Jul 25, 2013 12:20 PM

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.

Actions

JUihlein-esristaff

Jul 30, 2013 9:50 AM

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.

Actions

geonetadmin Jul 30, 2013 10:56 AM

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.

Actions

kenbuja Sep 9, 2013 12:05 PM

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.

Actions

geonetadmin Sep 9, 2013 4:44 PM

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"

Actions

kenbuja Sep 10, 2013 5:03 AM

Thanks,

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

Actions

geonetadmin Sep 10, 2013 7:04 AM

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!

Actions

7 Replies

geonetadmin Jul 25, 2013 12:20 PM
Unmark Correct
Correct Answer
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.
Like • Show 0 Likes0
Actions
JUihlein-esristaff Jul 30, 2013 9:50 AM
Mark Correct
Correct Answer
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.
Like • Show 0 Likes0
Actions
geonetadmin Jul 30, 2013 10:56 AM
Mark Correct
Correct Answer
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.
Like • Show 0 Likes0
Actions
kenbuja Sep 9, 2013 12:05 PM
Mark Correct
Correct Answer
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.
Like • Show 0 Likes0
Actions
geonetadmin Sep 9, 2013 4:44 PM
Mark Correct
Correct Answer
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"
Like • Show 0 Likes0
Actions
kenbuja Sep 10, 2013 5:03 AM
Mark Correct
Correct Answer
Thanks,

In my final project, I did include the DijitRegistry in the dGrid declaration.
Like • Show 0 Likes0
Actions
geonetadmin Sep 10, 2013 7:04 AM
Mark Correct
Correct Answer
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!
Like • Show 0 Likes0
Actions

GeoNet

The Esri Community

Adding dgrids dynamically to a TabContainer with varying widths

Attachments

Outcomes

Related Content

Recommended Content