If you have a problem with the big idea behind gridlist/scrollbar/dropdown then try playing around with the MTA dx functions until you get something done that converges against the idea of the UI elements that you have. I have yet to see any code from you.
To give you a hint about the math, a layout engine is typically based around the following concept: each UI element is a box with position (x,y) and a size (w,h). Children can be placed inside each element with an offset (ox,oy) so their "screen"/absolute position would be (x+ox,y+oy). This system does form a tree of UI elements.
Helpful ideas for UI element layouts:
A gridlist is a 2D matrix of rows and columns with the top row typically used for details. The rows are consecutive on the y-axis, the columns consecutive on the x-axis.
A scrollbar is a box with another box inside of it. It can be layed-out vertically or horizontally. By clicking the inner box you can move it either horizontally or vertically inside the outer box.
A dropdown is a 1D array of rows which are layed out consecutively on the y-axis.