dojo dgrid with horizontal scroll

There are a few CSS items needed to enable horizontal scrolling in your dojo/dgrid and OnDemandGrid. This isn’t currently documented on the dgrid help pages so I’m posting it here. For Dojo users reading this, I’m referring to the “new” dgrid beta currently hosted on github, and not the legacy dojox datagrid.

Basically, you need to assign a width to the dgrid, the cells within the dgrid, and potentially to any columnSets you may be using. Once you do that you should see the horizontal scroll bar show up. I’ve noted on some apps that use a grid width of 100% the horizontal scroll bar doesn’t show up until the user adjusts the screen size to be smaller.

I would provide a full example but there aren’t any public and free CDNs that I know of hosting the dgrid custom component right now:

<style>
/* Assign both height and width to the div that will hold the dgrid */
#grid1 {
    height: 375px;
    width: 750px;
}

/* Assign a default width for all grid cells */
.grid .dgrid-cell {
    width: 80px;
}

/* If you have one or more columnsets then assign them a width. */
.grid .dgrid-column-set-cell {
	width: 50%;
}

</style>

<div id="grid1" class="grid"></div>

2 thoughts on “dojo dgrid with horizontal scroll”

  1. Thanks for your help on this, Andy!

    I found I needed a couple more tweaks to get the desired result.

    First, I had to add “overflow: auto” to #grid1 before the horizontal scroll bar would appear. Then, my column headers weren’t showing past the scroll area, so I had to use “overflow: visible” on the dgrid-header. Finally, once I had the headers showing past the scroll area, the background wasn’t being applied them. So here is my final working css:

    #grid1
{
	width: 100%;
	height: 400px;
	overflow: auto;
}

.grid .dgrid-cell
{
	width: 80px;
}

#grid1-header
{
	background-color: rgb(238, 238, 238) ;
}

#grid1 .dgrid-header
{
	overflow: visible;	
}

    Hope that helps someone else! Thanks a lot for your help.

    ken.

Comments are closed.