A PropertyGrid in Ruby on Rails

Using JQuery UI and minimal Javascript to create a dynamic server-side property grid editor control that can be initialized in a fluid programming style or with a minimal DSL.

Get the code: git clone https://github.com/cliftonm/property_grid_demo

Features:

  • Collapsable groups
  • Support fo jQuery UI controls
  • Easily extensible to support new control types
  • “Fluid” programming of grid groups and properties
  • Don’t like a “fluid” approach?  A minimal DSL is provided
  • Minimal javascript, most of which is auto-generated
  • Control is generated on the server-side

screenshotI needed a general purpose property grid editor that supported some fancy things like date/time pickers, color pickers, etc., based on record fields known only at runtime (this is ultimately a part of my next installment of the “Spider UI” article series.)  There’s a snazzy Javascript-based property grid here, but I wanted something that was minimally Javascript and more Ruby-on-Rails’ish.  I also wanted a server-side control that could interface well with record field types and that would dynamically generate the grid based on schema information like table fields.

I have put together is a set of classes to facilitate building the content of a property grid control on the server-side.  You will note that I opted for actual classes and a “fluid” programming style, but if you don’t like the way the actual implementation looks using a “fluid” technique, I have also put together a very minimal internal Domain Specific Language (DSL) that you can use instead — basically just method calls that hide (using static data) the internal management of building the property grid instance.

As in my previous articles, I will be using Sass and Slim scripting for the CSS and HTML markup.

…  The rest of this article is forthcoming!

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s