CODEWITHSUNDEEP
jqueryjquery-bootgrid
Kobus Myburgh
Kobus Myburgh

Reputation: 1202

jQuery Bootgrid - conditional formatter

Looking to create a conditional formatter/row action with jQuery Bootgrid. For example, if a certain value in the PHP data is set, then the formatter is shown, otherwise not. I can't find any documentation or previous stackoverflow questions that address this.

EDIT:

My current way of doing this in my controller is like this:

$actions = array(
    'override' => array(
        'icon' => 'flare red',
        'link' => '/edit',
        'perm' => 'Edit',
        'title' => '...',
        'condition_and' => array(
            'status' => array(
                'column' => 'status !=',
                'value' => 'Suspended'
            ),
            'registered' => array(
                'column' => 'reg ==',
                'value' => 'Yes'
            )
        ),
        'disabled_icon' => 'flare grey',
        'disabled_title' => '...'
    )
);

In the function that I then generate the grid, I interpret these settings when I loop through the data. The only part that is still hacky in my opinion is where I loop through the data using PHP, and then build up a JS string to match the condition:

if (!empty($vv['condition_and']))
{
    $check_cond = '+(';
    foreach ($vv['condition_and'] as $conk => $conv)
    {
        $check_cond .= '(row.' . $conv['column'] . ' ' . $conv['operator'] . ' "' . $conv['value'] . '") && ';
    }
    $check_cond = rtrim($check_cond, ' && ');
    $out .= '"\
        "' . $check_cond . ' ? "\
            <a style=\"margin-right: 8px\" href=\"' . base_url() . $vv['link'] . '/" + row.id + "\"><i title=\"' . $vv['title'] . '\" class=\"zmdi zmdi-hc-lg zmdi-' . $vv['icon'] . '\"></i></a>" : "\
            <i style=\"margin-right: 8px;\" title=\"' . $vv['disabled_title'] . '\" class=\"zmdi zmdi-hc-lg zmdi-' . $vv['disabled_icon'] . '\"></i>")+"\
    " + ';
}

But if there is no clear way to do this better, I will just stick with that for now.

Upvotes: 1

Views: 1054

Answers (1)

Alisson Reinaldo Silva
Alisson Reinaldo Silva

Reputation: 10695

You can check that in the own formatter function, using properties in the json data:

$("#grid-data").bootgrid({
    ajax: true,
    url: "/api/get-data",
    formatters: {
        "paymentButton": function(column, row)
        {
            if (row.HasPayment)
                return '<button class="btn btn-primary" data-id="' + row.PaymentId + '" title="Check payment details"><i class="fa fa-money"></i></button>';
            return "";
        }
    }
});

In that case, the column which used that paymentButton formatter would display a button only for the rows where the HasPayment property was true, or displays nothing when it was false.

You can return whatever data you want from your backend PHP API and check them inside the formatter function.

The formatter function is called regardless of the way you load data.

Upvotes: 1

Related Questions