OnDemandGrid row height question - sometimes truncates my data

[TracySchloss]

I have an OnDemandGrid which is getting populated from the attributes of the graphics in a featureLayer.  It's based on Select with Feature Layer | ArcGIS API for JavaScript  but I wanted to use county polygons and include as an output attribute a list of counties that the buffer overlaps.

I have my buffer generated and a list of the counties, along with summary statistics,  but I can't get the style of the row right.  I tried both a hard coded height on .dgrid-row as well as setting this to height: auto.

.dgrid-row {
height: 100px;
} 

Sometimes the list of names wraps and looks OK and other times it chops them off. The length of the list of county names will vary and I'd rather have it automatically resize as needed, rather than hard coding a specific height.  I have a ColumnResizer on this,so at least the user can stretch out the field to see all the contents, but I'd like to manage it with a style setting if I can.    I see there an autoHeight: true on the grid, but that seems to be for the entire grid and not individual rows within it.

I read this, which was helpful, but nothing I tried gives me the results I want:

| CSS Styling of dgrid | Blog | SitePen https://www.sitepen.com/blog/2012/05/03/css-styling-of-dgrid/

It looks like it word wraps when the county name is two words, but just truncates it mid-word if it's not

[TyroneBiggums]

Try messing with width properties, not height. For what it's worth, I have no idea what width properties are available to an OnDemandGrid.

Or,

You could limit the data itself to a character count that you've tested to be successful. If the data exceeds the limit, you could show an ellipse with the truncated text so it looks on purpose like:

Christian, Dade, Dallas, Dou...

Then, mouseover, you could display the full text in a tooltip.

[TracySchloss]

I've played with the width some, which you can style as

.dgrid .field-Counties {
  width: 300px;
  }

where Counties is the name of the field, but I don't want it to be as wide as the entire results, because that's just too much real estate to take up with one column.

I'll look into the tooltip.  I saw that I could add the ellipse, but not how I could make the tooltip show the full results.  It doesn't do it automatically.  The article I mentioned also says it's not supported in all browsers and we have some older versions of IE still installed.

[TyroneBiggums]

I would have to dig deep into the memory banks to remember the syntax. It's possibly going to be something custom. But, it's also pretty easy. If tooltip isn't supported on mouseover, I would create a div dynamically with the content being the full data of that field.

So, fuzzy pseudo code, if you will...

JavaScript:

onmouseover="document.createElement('<div class=whatever>'+ data + '</div>')"

CSS:

.whatever {

     // size it small with a border and background color so you can make it look like a tooltip
}

[thejuskambi · Accepted solution]

I assume you are generating the comma separated list of Counties. Cant you just add space between them?

In any case its not the row property which is causing the text to get hidden, but the column properties. try these css on the column

text-overflow:warp;

white-space: normal;

[TracySchloss]

It starts out as an array, which I switch to a comma delimited string using var coList = countyNameList.join();  I was able to add my own separator of (", ") and now my data is word wrapping and my row sizing the way I want.

I used the styles:

.dgrid-row {
  height:auto;
}

.dgrid .dgrid-scroller {
    position: relative;
    overflow: visible;
}

There wasn't anything I needed to have on the Counties column for a styling.  These two combined with a space after the comma did the trick.

UPDATE:  Don't use this style on the .dgrid .dgrid-scroller.   As I added more rows to my grid, instead of having a scrollbar appear, rows started disappearing.  It looks fine without it, so I commented it out of my stylesheet.

[KenBuja]

Here's what I have for the style on my dGrid (resultsGrid) to get a scrollbar:

    .resultsGrid .dgrid-scroller {

        position: relative;

        overflow: auto;

        max-height: 140px;

    }

[TracySchloss]

I have this is a contentPane with a splitter on it, so the height will vary, but at least there is a scrollbar when you add the max-height.

Of course it worked just fine for me without any scroller style, but I haven't tested it in all browsers yet.