SQLFORM.grid and ractive

[weheh]

Anybody ever try to get an SQLFORM.grid(...) to render within a ractive template? I'm having trouble getting it to work. SQLTABLE works OK, but grid seems to bundle a script that causes ractive to choke.

[Leonel Câmara]

What problem are you getting? What do you do in the controller? I'm asking because it probably has something to do with the way the grid manages itself redirecting and putting signatures and other things in the URL.

I think the easiest way is for you to put the grid in another controller and then use LOAD with ajax=True to put it in the ractive enabled view.

[weheh]

The problem, reported by FireBug, is 

Uncaught SyntaxError: Unexpected token ILLEGAL

and appears to be caused by a script being output by the SQLFORM.grid.

[Leonel Câmara]

Can you pack a simple example application for me to test?

[weheh]

Yes, I will do it this week. 

First, I like grid. It's powerful and convenient.

But, grid isn't formatted for bootstrap, which I use and the rest of web2py supports. This inconsistency causes trouble when I use the ui="web2py" argument to grid. I don't normally even load web2py.css for my app because I don't use any of its features in my ractive templating. So I have to create a separate template for the page that uses the grid. web2py.css interferes with bootstrap css, so the custom template page comes out with inconsistent formatting from the rest of the site. Altogether, makes using the template difficult.

One last gripe about grid is the search function. It's powerful, but overkill for what I want, which is an autocomplete function than narrows my search as I type. 

So grid has some really great capability, but in practice, hard to integrate into my production design. Any thoughts about getting it to work for me?

[Niphlod]

without search capabilities, grid is just a keyed edit form for each record. 

Is it really that hard to display a view-edit-delete link next to a table ?

PS: the scaffolding app works fine with grids AND bootstrap.

[Anthony]

But, grid isn't formatted for bootstrap, which I use and the rest of web2py supports. This inconsistency causes trouble when I use the ui="web2py" argument to grid.

The "web2py" ui includes the following CSS classes:

            ui = dict(widget='',
                      header='',
                      content='',
                      default='',
                      cornerall='',
                      cornertop='',
                      cornerbottom='',
                      button='button btn btn-default',
                      buttontext='buttontext button',
                      buttonadd='icon plus icon-plus glyphicon glyphicon-plus',
                      buttonback='icon leftarrow icon-arrow-left glyphicon glyphicon-arrow-left',
                      buttonexport='icon downarrow icon-download glyphicon glyphicon-download',
                      buttondelete='icon trash icon-trash glyphicon glyphicon-trash',
                      buttonedit='icon pen icon-pencil glyphicon glyphicon-pencil',
                      buttontable='icon rightarrow icon-arrow-right glyphicon glyphicon-arrow-right',
                      buttonview='icon magnifier icon-zoom-in glyphicon glyphicon-zoom-in',
                      )

Which of the above classes are causing problems for your display?

Of course, you can simply provide your own classes by passing a custom dictionary as the "ui" argument.

One last gripe about grid is the search function. It's powerful, but overkill for what I want, which is an autocomplete function than narrows my search as I type. 

You can customize both the search widget displayed on the page as well as the search function that generates the database query. The former is handled via the "search_widget" argument, and the latter by providing a function as the "searchable" argument (it takes the list of searchable fields and the "keywords" variable from the search form and must return a Query object).

Note, if you just want a single text box for search, rather than creating a custom search widget, it might be easier to keep the default widget and simply disable its Javascript functionality via:

    search_input = grid.element('#w2p_directory_keywords')
    search_input and search_input.attributes.pop('_onfocus')

You could also handle that via Javascript on the client.

Anthony

[weheh]

No, this is super easy, and I've done it already. But I still need the search in some cases and grid would be convenient.