Agile Toolkit manipulating Grid column content

Question

Just started using ATK4 and appreciating it very much so far, but not sure how to do this...

What I am trying to accomplish:

I am outputting a query's results to a grid, one of the fields is 'status', the data will either be '-1' or '1'. Instead of outputting -1 or 1 to the column, how do I output an HTML snippet (or whatever I need to to get what I want) instead that shows a different icon for each value? In short:

In column 'status':

if the value is -1, display iconDown.gif;
if the value is 1, display iconUp.gif

Code so far:

class page_showlist extends Page {
function init(){
    parent::init();

    $q=$this->api->db->dsql();
    $q->table('remote_system')
            ->join('customers.id','customer_id')
            ->field('customer_id')
            ->field('ip')
            ->field('nickname')
            ->field('name','customers')
            ->field('status')
    ;

    $grid = $this->add('Grid');

    $grid->addColumn('text','status')->makeSortable();
    $grid->addColumn('text','name')->makeSortable();
    $grid->addColumn('text','ip');
    $grid->addColumn('text','nickname');
    $grid->addButton('Reload Grid')->js('click',$grid->js()->reload());
    $grid->addQuickSearch(array('name'));
    $grid->setSource( $q );
    }

}

Any pointers/tips?

This can be accomplished with Grid formatters. You'll have to write your own formatter function. And one question - why you don't use Model? — DarkSide, Feb 05 '13 at 14:46
I have a CRUD on the admin side for maintaining the info, I intend for this to be a read-only version of the info. This *seemed* the most natural way to go, but as stated above, just getting started with ATK4 :) — Niek Klein Kromhof, Feb 06 '13 at 07:31

DarkSide · Accepted Answer · 2013-02-21T22:57:56.457

To add column with icons in Grid you can use custom template.

In one of my projects I do like this:

$url = $this->api->pm->base_url . $this->api->locateURL('template', 'images/');
$grid->addColumn('template', 'type', false)
    ->setTemplate('<img src="' . $url . 'icon_object_<?$type?>.png">');

It'll use model field named type (in your case use status) and show icons in that column. Icon source URL is generated dynamically and it'll search for image files in your template/images directory named icon_object_XXX.png where XXX value will be taken from field type value.

In my case type is like this: array('building','apartment','land','garage') etc.

And one more thing - you should start using Models whenever possible! That way you'll ease your life later when your project becomes bigger. Also can have extra security (conditions, etc.) with them.

In year 2013 when this answer was created template tag string was ` ... ?>`. Currently in ATK version 4.3 you have to use curly braces instead `{ ... }`. — DarkSide, Apr 08 '16 at 14:47

Agile Toolkit manipulating Grid column content

1 Answers1