Nitobi Grid on Rails - Part 1 
July 5th, 2007
Even though we’re doing a lot of work in Ruby on Rails, and we blog about it a lot, we don’t sell a back-end for it. So the question that people may ask is how do we use our Components with Rails?
Here’s some information on how I’m using Rails with the current version of Grid. In Rails, you can use Builder to create XML, so the first thing that I am going to create is a grid controller. In that grid controller, I define a getHandler method, which looks like this:
def getHandler
if params[:SortColumn].nil?
@tblcustomer_pages, @tblcustomers = paginate :tblcustomers, :per_page => params[:PageSize].to_i
else
@tblcustomer_pages, @tblcustomers = paginate :tblcustomers, :per_page => params[:PageSize].to_i , :order => params[:SortColumn] + ” ” + params[:SortDirection]
end
render :layout => false
end
What this does is use the paginate function to do some pagination of the table. We set the PageSize using the Nitobi Grid’s PageSize paramater, and we use the SortColumn and the SortDirection coming into the function from the grid to determine the column sorting.
I then have a view (rxml) that looks like this:
xml.instruct! :xml, :version => “1.0″
xml.root(:fields => “CustomerName|ContactName”, :keys => “CustomerName|ContactName”) {
for tblcustomer in @tblcustomers
xml.e(:a => tblcustomer.CustomerName,:b =>tblcustomer.ContactName, :xk => tblcustomer.CustomerID)
end
}
This is very basic. I’m just starting out with builder, so I don’t have the Error Handler here. I suppose that I should have that there, but I don’t know what will happen if its nil. (I suspect it will break). That’s definitely something I’m going to have to ask around about.
And, I make sure that I have the getHandler set in the Grid Definition like this:
gethandler=”getHandler/”
Of course, I make sure to include grid and toolkit. Once this is all done, I have a grid that can load. I still have to get the savehandler working on Rails, but this should be enough to get started with Rails. If I find any interesting interactions with Grid, Toolkit and Prototype, I’ll post them here.
Posted in Grid, Rails, UI | 1 Comment »
Cool Grid Hacks Part 1 - Dynamic Listbox
April 25th, 2007
Juan Carlos Pontaza at Fidelity has created something that a lot of people have been asking about on the forums recently, and that is the Dynamic Listbox. There are a lot of people who wish to have something similar to the Master/Detail Combo example for two listboxes on the same row. This was finally achieved by the Dynamic Listbox, which was included in a modified version of Grid 3.41.
Basically, a standard listbox consists of keys and values. Below is the sample for a Listbox defined with an XML island:
<ntb:textcolumn label=”Lookup” xdatafld=”ProductCategoryID” width=”150″>
<ntb:listboxeditor
datasourceid=”lookupCategoryDataSource”
displayfields=”ProductCategoryName”
valuefield=”ProductCategoryName” >
</ntb:listboxeditor>
</ntb:textcolumn>
<!- then, outside the <ntb:columns> tag… ->
<ntb:datasources>
<ntb:datasource id=”lookupCategoryDataSource”>
<ntb:datasourcestructure
id=”lookupCategoryDataSource”
Keys=”ProductCategoryID”
FieldNames=”ProductCategoryID|ProductCategoryName”>
</ntb:datasourcestructure>
<ntb:data id=”lookupCategoryDataSource”>
<ntb:e a=”1″ b=”Cleaners” xi=”0″></ntb:e>
<ntb:e a=”2″ b=”Solvents” xi=”1″></ntb:e>
<ntb:e a=”3″ b=”Adhesives” xi=”2″></ntb:e>
<ntb:e a=”4″ b=”Fuels” xi=”3″></ntb:e>
<ntb:e a=”5″ b=”Waxes” xi=”4″></ntb:e>
<ntb:e a=”6″ b=”Dyes” xi=”5″></ntb:e>
<ntb:e a=”7″ b=”Paints” xi=”6″></ntb:e>
<ntb:e a=”8″ b=”Sealants” xi=”7″></ntb:e>
</ntb:data>
</ntb:datasource>
</ntb:datasources>
In this example, The column is being bound to a ProductCategoryID field and you are getting the ProductCategoryName from the datasource value that matches the ProductCategoryID to be able to render the correct text.
In his case with the dynamic loader, we do not need to display the value, because the datasource will be different per row, so at renderer time we need the description value to write it on the cell. To solve this, the developer has to provide that other column too. For example:
<ntb:textcolumn label=”Lookup” xdatafld=”ProductCategoryID” xdisplayfld=”ProductCategoryName” width=”150″>
<ntb:listboxeditor
datasourceid=”lookupCategoryDataSource”
displayfields=”ProductCategoryName”
valuefield=”ProductCategoryName” >
</ntb:listboxeditor>
</ntb:textcolumn>
<ntb:textcolumn xdatafld=”ProductCategoryName ” visible=”false”> </ntb:textcolumn>
<ntb:datasources>
<ntb:datasource id=”lookupCategoryDataSource”>
<ntb:datasourcestructure
id=”lookupCategoryDataSource”
Keys=”ProductCategoryID”
FieldNames=”ProductCategoryID|ProductCategoryName”>
</ntb:datasourcestructure>
<ntb:data id=”lookupCategoryDataSource”>
</ntb:data>
</ntb:datasource>
</ntb:datasources>
Now we don’t any problem rendering the values because we have the column that is providing the description (make sure that visible is false, otherwise you will show that other column).
The only thing that is still needed is the url for the loader, for this we are using the dynamicloader attribute.
<ntb:textcolumn label=”Lookup” xdatafld=”ProductCategoryID” xdisplayfld=”ProductCategoryName” width=”150″>
<ntb:listboxeditor
datasourceid=”lookupCategoryDataSource”
dynamicloader=”loader.jsp”
displayfields=”ProductCategoryName”
valuefield=”ProductCategoryName” >
</ntb:listboxeditor>
</ntb:textcolumn>
<ntb:textcolumn xdatafld=”ProductCategoryName ” visible=”false”> </ntb:textcolumn>
<ntb:datasources>
<ntb:datasource id=”lookupCategoryDataSource”>
<ntb:datasourcestructure
id=”lookupCategoryDataSource”
Keys=”ProductCategoryID”
FieldNames=”ProductCategoryID|ProductCategoryName”>
</ntb:datasourcestructure>
<ntb:data id=”lookupCategoryDataSource”>
</ntb:data>
</ntb:datasource>
</ntb:datasources>
Now everything is ready. If you notice it, i still have the datasource object, because we are using it to initialize and bind the component to it. Now when the cell gets activated the bind method will get fired, the dynamicloader will get called adding the row values as parameters and populating the new combobox. And when you change the value on that cell both columns will get updated.
Here you have an example:
Note: I obscured his e-mail because I don’t like people getting spammed. So this is the cool modfication that was added. If I manage to get time in the next few days, I will try to get this code ready for the latest version of Grid. If you have any cool Grid modifications that you did, that you think other people may like, please either post them to the forums, or send them to [email protected], and we will make sure that they are posted for others to see.
Thanks again to Juan Carlos Pontaza at Fidelity for sending us this nice addition to Grid.
Posted in General, Grid | 2 Comments »
Entries (RSS)
and