<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="/stylesheets/rss.css"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
  <channel>
    <title>Synthesis: Ruby on Rails Data Grid Control</title>
    <link>http://synthesis.sbecker.net/articles/2005/07/10/ruby-on-rails-data-grid-control</link>
    <language>en-us</language>
    <ttl>40</ttl>
    <description>by Scott Becker</description>
    <item>
      <title>Ruby on Rails Data Grid Control</title>
      <description>&lt;p&gt;As far as I can tell, Ruby on Rails doesn&amp;#8217;t have a built in control for displaying tabular data in a grid. Not a rich one anyway, with paging/sorting/filtering capability built-in. I plan on attempting to create one. I&amp;#8217;m actually almost there. I&amp;#8217;m doing this instead of getting my actual projects done. :)&lt;/p&gt;


	&lt;p&gt;All parameters should have defaults to do the standard thing, with ability to further customize if so desired. Convention over configuration and all that.  It should be able to do sorting/paging on columns from associated tables as well. Here&amp;#8217;s the proposed syntax for how this might be called in a controller:&lt;/p&gt;


a simple example
&lt;div class="typocode"&gt;&lt;pre&gt;&lt;code class="typocode_ruby "&gt;&lt;span class="keyword"&gt;class &lt;/span&gt;&lt;span class="class"&gt;AgreementsController&lt;/span&gt; &lt;span class="punct"&gt;&amp;lt;&lt;/span&gt; &lt;span class="constant"&gt;ApplicationController&lt;/span&gt;

  &lt;span class="keyword"&gt;def &lt;/span&gt;&lt;span class="method"&gt;list_simple&lt;/span&gt;
    &lt;span class="ident"&gt;grid_view&lt;/span&gt;&lt;span class="punct"&gt;(&lt;/span&gt;&lt;span class="constant"&gt;Agreement&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt;
      &lt;span class="symbol"&gt;:columns&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="punct"&gt;['&lt;/span&gt;&lt;span class="string"&gt;title&lt;/span&gt;&lt;span class="punct"&gt;',&lt;/span&gt; &lt;span class="punct"&gt;'&lt;/span&gt;&lt;span class="string"&gt;active&lt;/span&gt;&lt;span class="punct"&gt;',&lt;/span&gt; &lt;span class="punct"&gt;'&lt;/span&gt;&lt;span class="string"&gt;amount&lt;/span&gt;&lt;span class="punct"&gt;',&lt;/span&gt; &lt;span class="punct"&gt;'&lt;/span&gt;&lt;span class="string"&gt;frequency&lt;/span&gt;&lt;span class="punct"&gt;']&lt;/span&gt;
    &lt;span class="punct"&gt;)&lt;/span&gt;
  &lt;span class="keyword"&gt;end&lt;/span&gt;

&lt;span class="keyword"&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

	&lt;p&gt;a more complex example:&lt;/p&gt;


&lt;div class="typocode"&gt;&lt;pre&gt;&lt;code class="typocode_ruby "&gt;&lt;span class="keyword"&gt;class &lt;/span&gt;&lt;span class="class"&gt;AgreementsController&lt;/span&gt; &lt;span class="punct"&gt;&amp;lt;&lt;/span&gt; &lt;span class="constant"&gt;ApplicationController&lt;/span&gt;

  &lt;span class="keyword"&gt;def &lt;/span&gt;&lt;span class="method"&gt;list_complex&lt;/span&gt;
    &lt;span class="ident"&gt;grid_view&lt;/span&gt;&lt;span class="punct"&gt;(&lt;/span&gt;
      &lt;span class="constant"&gt;Agreement&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt;
      &lt;span class="symbol"&gt;:columns&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="punct"&gt;[&lt;/span&gt;
        &lt;span class="punct"&gt;&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;Status&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;,&lt;/span&gt;
        &lt;span class="punct"&gt;&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;Company Name&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="punct"&gt;{&lt;/span&gt;
          &lt;span class="symbol"&gt;:dbcolumn&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="punct"&gt;&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;company_name&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;,&lt;/span&gt;
          &lt;span class="symbol"&gt;:filter&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="constant"&gt;true&lt;/span&gt;
        &lt;span class="punct"&gt;},&lt;/span&gt;
        &lt;span class="punct"&gt;&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;Category&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="punct"&gt;{&lt;/span&gt;
          &lt;span class="symbol"&gt;:dbcolumn&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="punct"&gt;&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;agreement.category_id&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;,&lt;/span&gt;
          &lt;span class="symbol"&gt;:filter&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="constant"&gt;true&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt;
          &lt;span class="symbol"&gt;:filter_type&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="symbol"&gt;:select&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt;
          &lt;span class="symbol"&gt;:filter_options&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="constant"&gt;Category&lt;/span&gt;&lt;span class="punct"&gt;.&lt;/span&gt;&lt;span class="ident"&gt;find_all&lt;/span&gt;&lt;span class="punct"&gt;.&lt;/span&gt;&lt;span class="ident"&gt;collect&lt;/span&gt; &lt;span class="punct"&gt;{|&lt;/span&gt;&lt;span class="ident"&gt;c&lt;/span&gt;&lt;span class="punct"&gt;|&lt;/span&gt; &lt;span class="punct"&gt;[&lt;/span&gt; &lt;span class="ident"&gt;c&lt;/span&gt;&lt;span class="punct"&gt;.&lt;/span&gt;&lt;span class="ident"&gt;name&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt; &lt;span class="ident"&gt;c&lt;/span&gt;&lt;span class="punct"&gt;.&lt;/span&gt;&lt;span class="ident"&gt;id&lt;/span&gt; &lt;span class="punct"&gt;]&lt;/span&gt; &lt;span class="punct"&gt;}&lt;/span&gt;
        &lt;span class="punct"&gt;},&lt;/span&gt;
        &lt;span class="punct"&gt;&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;Active&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="punct"&gt;{&lt;/span&gt;
          &lt;span class="symbol"&gt;:dbcolumn&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="punct"&gt;&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;agreement.active&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;,&lt;/span&gt;
          &lt;span class="symbol"&gt;:filter&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="constant"&gt;true&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt;
          &lt;span class="symbol"&gt;:filter_type&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="symbol"&gt;:select&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt;
          &lt;span class="symbol"&gt;:filter_options&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="punct"&gt;[[&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;Yes&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;,&lt;/span&gt; &lt;span class="number"&gt;1&lt;/span&gt;&lt;span class="punct"&gt;],&lt;/span&gt; &lt;span class="punct"&gt;[&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;No&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;,&lt;/span&gt; &lt;span class="number"&gt;0&lt;/span&gt;&lt;span class="punct"&gt;]]&lt;/span&gt;
        &lt;span class="punct"&gt;}&lt;/span&gt;
      &lt;span class="punct"&gt;],&lt;/span&gt;
      &lt;span class="symbol"&gt;:joins&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="punct"&gt;[&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;LEFT OUTER JOIN categories ON agreements.category_id = categories.id&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;,&lt;/span&gt;
                 &lt;span class="punct"&gt;&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;LEFT OUTER JOIN companies ON agreements.company_id = company.id&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;]&lt;/span&gt;
      &lt;span class="symbol"&gt;:alias_columns&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="punct"&gt;[[&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;companies.name&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;,&lt;/span&gt; &lt;span class="punct"&gt;&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;company_name&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;],[&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;categories.name&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;,&lt;/span&gt; &lt;span class="punct"&gt;&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;category_name&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;]],&lt;/span&gt;
      &lt;span class="symbol"&gt;:order_by&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="punct"&gt;&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;category_name, products.name&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;,&lt;/span&gt;
      &lt;span class="symbol"&gt;:per_page&lt;/span&gt; &lt;span class="punct"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="number"&gt;25&lt;/span&gt;
    &lt;span class="punct"&gt;)&lt;/span&gt;
  &lt;span class="keyword"&gt;end&lt;/span&gt;

&lt;span class="keyword"&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

	&lt;p&gt;The grid_view method will be at the application level, so you can call it from any controller. The presentation (view) will live in one &lt;code&gt;/shared/_grid_view.rhtml&lt;/code&gt; partial file and be 100% customizable. And because of that, it doesn&amp;#8217;t even have to be a table or look like a grid! The &lt;span class="caps"&gt;MVC&lt;/span&gt; pattern of rails allows this, and would make this far superior and easier to customize than say &amp;#8211; the &lt;span class="caps"&gt;ASP&lt;/span&gt;.NET data grid control, in my opinion. Here&amp;#8217;s one possible way such a beast might look like:&lt;/p&gt;


	&lt;p&gt;&lt;a href="http://www.sbecker.net/images/grid_view.gif"&gt;&lt;img src="http://www.sbecker.net/images/grid_view_small.gif" alt="" /&gt;&lt;/a&gt;&lt;/p&gt;</description>
      <pubDate>Sun, 10 Jul 2005 04:38:00 -0700</pubDate>
      <guid isPermaLink="false">urn:uuid:a7717f0a2930b54ff2b4c1c694c43b49</guid>
      <author>sbecker</author>
      <link>http://synthesis.sbecker.net/articles/2005/07/10/ruby-on-rails-data-grid-control</link>
      <category>Ruby on Rails</category>
      <category>Web Development</category>
    </item>
    <item>
      <title>"Ruby on Rails Data Grid Control" by https://redmine.wice.eu/wiki/wice-grid</title>
      <description>&lt;p&gt;Check this out &amp;#8211; &lt;a href="https://redmine.wice.eu/wiki/wice-grid"&gt;https://redmine.wice.eu/wiki/wice-grid&lt;/a&gt;&lt;/p&gt;</description>
      <pubDate>Tue, 18 Nov 2008 01:40:59 -0800</pubDate>
      <guid isPermaLink="false">urn:uuid:16bcd4b7-9dbc-4a9b-9eb0-5dbde4bd5243</guid>
      <link>http://synthesis.sbecker.net/articles/2005/07/10/ruby-on-rails-data-grid-control#comment-7928</link>
    </item>
    <item>
      <title>"Ruby on Rails Data Grid Control" by yatender</title>
      <description>&lt;p&gt;i would love if such a datagrid is availaible on rails&lt;/p&gt;</description>
      <pubDate>Thu, 28 Jun 2007 00:40:46 -0700</pubDate>
      <guid isPermaLink="false">urn:uuid:58e8f906-d047-4f87-aa26-9928b60e8565</guid>
      <link>http://synthesis.sbecker.net/articles/2005/07/10/ruby-on-rails-data-grid-control#comment-7459</link>
    </item>
    <item>
      <title>"Ruby on Rails Data Grid Control" by Nate</title>
      <description>&lt;p&gt;I&amp;#8217;m interested in this project as well. Any chance you will pick it up almost two years later?&lt;/p&gt;</description>
      <pubDate>Thu, 14 Jun 2007 14:23:42 -0700</pubDate>
      <guid isPermaLink="false">urn:uuid:4f33b941-c6a8-462b-a3a8-32c0b2e7a44d</guid>
      <link>http://synthesis.sbecker.net/articles/2005/07/10/ruby-on-rails-data-grid-control#comment-7441</link>
    </item>
    <item>
      <title>"Ruby on Rails Data Grid Control" by Stanly</title>
      <description>&lt;p&gt;Any progress in the project&amp;#8230;&lt;/p&gt;</description>
      <pubDate>Tue, 10 Apr 2007 05:23:06 -0700</pubDate>
      <guid isPermaLink="false">urn:uuid:ddbdd199-5e35-41a6-9edb-ac974fd05874</guid>
      <link>http://synthesis.sbecker.net/articles/2005/07/10/ruby-on-rails-data-grid-control#comment-7023</link>
    </item>
    <item>
      <title>"Ruby on Rails Data Grid Control" by dak AT itracker DOT com</title>
      <description>&lt;p&gt;I would use your Datagrid MANY times if it was going. I&amp;#8217;ve conerting my efforts from ASP and was using the DevExpress datagrid.
How about letting me know how it&amp;#8217;s going?
dak AT itracker DOT com&lt;/p&gt;</description>
      <pubDate>Sat, 03 Feb 2007 13:16:41 -0800</pubDate>
      <guid isPermaLink="false">urn:uuid:e4f6f898-0af9-42b6-9bd9-a108ec6c7ae1</guid>
      <link>http://synthesis.sbecker.net/articles/2005/07/10/ruby-on-rails-data-grid-control#comment-6995</link>
    </item>
    <item>
      <title>"Ruby on Rails Data Grid Control" by Marco Oechslin</title>
      <description>&lt;p&gt;Is there any source code available?
I would like to use a datagrid with it&amp;#8217;s data stored in a mysql database for my project. I need a possibility to add rows and sort colums and I need a Cell editing capability. First I googled through ajax solutions because I wanted editable cells by mouseclick, but I couldn&amp;#8217;t find a simple non commercial framework.&lt;/p&gt;</description>
      <pubDate>Tue, 15 Aug 2006 02:10:42 -0700</pubDate>
      <guid isPermaLink="false">urn:uuid:62763368-7125-4f73-a7c3-120c6d438ec4</guid>
      <link>http://synthesis.sbecker.net/articles/2005/07/10/ruby-on-rails-data-grid-control#comment-1497</link>
    </item>
    <item>
      <title>"Ruby on Rails Data Grid Control" by omer</title>
      <description>&lt;p&gt;still no progress? :(&lt;/p&gt;</description>
      <pubDate>Fri, 21 Jul 2006 04:31:04 -0700</pubDate>
      <guid isPermaLink="false">urn:uuid:1cf4344b-b674-42e4-8f02-3a14bcbec896</guid>
      <link>http://synthesis.sbecker.net/articles/2005/07/10/ruby-on-rails-data-grid-control#comment-456</link>
    </item>
    <item>
      <title>"Ruby on Rails Data Grid Control" by vegeta.z@gmail.com</title>
      <description>any progress? because i am really interested on this component, i would like to help you finishing it.
contact me plz.</description>
      <pubDate>Mon, 20 Feb 2006 20:23:39 -0800</pubDate>
      <guid isPermaLink="false">urn:uuid:</guid>
      <link>http://synthesis.sbecker.net/articles/2005/07/10/ruby-on-rails-data-grid-control#comment-31</link>
    </item>
  </channel>
</rss>
