nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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]

flexapp.png

jsapp.png

headeroverlap.png

Encontre mais publicações marcadas com

Accepted answers

Anonymous User

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.

All comments

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!

kenbuja

Thanks,

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

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

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: 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.

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 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.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.