How to select elements in a grid?

Thursday, April 22nd, 2010|Beginner tips, Version 3|by Romans

Let’s say you want user to be able and select multiple elements in a grid. This can’t be done directly, because grid is supposed to list elements, it shouldn’t be built to intact with it. However grid can be extended and joined with the functionality of the Form to do what’s required.

You can see a working example here: http://atk4.agiletech.ie/grid/selectable.html

First, you’ll need a grid and a form with a recent version of ATK4:

        $g=$this->add('Grid')
            ->setStaticSource($this->api->sample_grid_data)
            ->addColumn('text','name','Name')
            ->addColumn('text','surname','Surname')
            ->addColumn('text','email','Email')
            ;
        $f=$this->add('Form')
            ->addField('line','selected')
            ;

Form’s field is supposed to hold the data of selected entries in JSON format. You normally do not need it. So you should probably hide it with JS:

$f->getElement(‘selected’)->js(true)->hide();

next you will need this:

        $g->addSelectable($f->getElement('selected'));

This will add checkboxes on the left side of the grid. It will also make grid elements “selectable” so that you can use jQuery UI lasso and select items with mouse grad. Logic behind this can be found in ui.atk4_checkboxes.js

You can further improve results by making custom template for your grid and inserting it into Form’s “form_body” tag, so that it appear between fields.

5 Comments

jancha
Posted April 23, 20107:43 am

addSelectable – is this only for enabling selection?

romaninsh
Posted April 26, 20102:43 pm

yes. Our main policy is to keep main classes simple. So grid shouldn’t do what might not be necessary. There are other classes to extend grid functionality – Paginator, Quicksearch, Filters. Also javascript can be used to further enhance grids. Do you think anything is missing?

Svetlozar Kondakov
Posted April 27, 20103:44 pm

WOW … this is a long awaited feature. I used to write similar things for DC grids. However this seems a lot easier and straightaway.

I hope this is also easily editable, since I needed to disable some checkboxes in some rows sometimes … but I suppose it will be with jQuery on board:)

romaninsh
Posted April 28, 20101:42 am

exactly. You can do anything with jQuery. If javascript is turned off, user will see list of elements and then form and field where they need to list IDs. This probably is a bit inconvenient, however still usable.

Grid Documentation (ATK) | Agile Toolkit news
Posted October 20, 20104:41 am

[...] Call this and pass it Form_Field object. It will add checkboxes to the grid. Selected checkbox value will appear in the field in JSON format. (See http://blog.atk4.com/how-to-select-elements-in-a-grid/) [...]