How to select elements in a grid?

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.