Shane O'Sullivan's technical blog… really ties the room together

Nice column move and resize effects added to Dojo Grid

Posted by Shane O'Sullivan on March 31, 2009

The Dojo Grid is a very cool widget, with many handy features.  However, one thing it definitely lacked was an attractive way of moving and resizing columns.  When resizing columns, the size of the header would change as you dragged it, and when the mouse button was let go, the column width would snap to the same size.  This gave the impression that the widget was slow, when it was not.

I submitted a patch a while ago (too late to make it into v1.3) to instead show a vertical line the same height as the grid which moves as you resize the column, with the header and body columns being resized at the same time.  This has been now been committed to the Dojo source (and will be available in the Dojo nightly code drops from tonight, March 31st 2009).

When moving columns, it was difficult to tell where the new column would be placed, as there was not much in the way of indication.  The patch I submitted places an arrow above and below the point of insertion, making it easy to see where the column in going.

The video below shows these changes in the Tundra CSS theme, and you can see it in any of the Grid test files, e.g.

6 Responses to “Nice column move and resize effects added to Dojo Grid”

  1. Nathan Toone said

    Nice patch, by the way…sorry it couldn’t get in for 1.3…

  2. Thanks Nathan, hopefully I’ll be sending in some more in the future 🙂

  3. Chris Mitchell said

    Very nice feature for usability of the grid. Thanks for contributing this!

  4. Mike Addesa said

    Really nice work Shane. This widget keeps getting better and better!

  5. Johnny Fugaban said

    Great job! Under 1.3, the grid header does not line up with the grid data. Are you aware of any workaround on this bug?
    It’s already noted in Ticket #8641 (new defect). Thanks

  6. @Johnny, sorry, I don’t know of a workaround for it. You could try emailing the dojo-interest mailing list about it.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: