1

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.

Kobus Myburgh
  • 1,114
  • 1
  • 17
  • 46
  • So you may use the formatter for one row, but not use for other rows? Or do you want to just disable a formatter for all rows according to this value? Can you provide an example of how you set this value from PHP in some HTML tag? – Alisson Reinaldo Silva Jun 19 '18 at 11:17
  • @Alisson, I want to use it for one row and not for another, your understanding is correct. – Kobus Myburgh Jun 20 '18 at 11:41
  • How are you loading your data? Are you using ajax and calling some API, or are you using PHP to create the HTML (e.g the `` and ``) using a loop? – Alisson Reinaldo Silva Jun 20 '18 at 12:26
  • Yes, loading data with Ajax and generating content using a loop. I have found a way to do what I want, but it seems hacky. My initial attempt was actually hardcoded, but I managed to make it reusable, so I am happy for now, unless someone comes up with a real solution. Not sure if I should post my solution as an answer. – Kobus Myburgh Jun 20 '18 at 20:25
  • 1
    So you're not using the bootgrid's built-in ajax way of loading data, you are making an ajax request by yourself and looping throung the result and manually adding data to bootgrid? I'll try to post different ways to achieve what you want, for each different way of loading data. – Alisson Reinaldo Silva Jun 21 '18 at 11:01

1 Answers1

1

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.

Alisson Reinaldo Silva
  • 10,009
  • 5
  • 65
  • 83
  • Hi Allison, thanks for your answer. The reason why I loop through the data is because I want it re-usable in the sense that I do not have to edit the grid generation JS for every different grid I make. I have written a helper function in PHP which builds up the conditions of the formatters depending on the actions that I need to generate for the particular crud view, but it is currently a bit hacky. I will refine it somewhat, and see if I can post an answer that could somehow help others too. Your way, while it will work, means I need to generate a new ajax call script for each different grid. – Kobus Myburgh Jun 22 '18 at 17:14
  • @KobusMyburgh as I said, this solution works even if you are looping through the data and appending it manually to bootgrid, because the formatter function will be called. You just need to return whatever properties you need to check your conditions in the formatter function (e.g HasPayment property). If you could share part of your code so I can understande better how you are using PHP to build these conditions, maybe a I could give a better example, but my solution should work regardless of the way you load data into the grid. – Alisson Reinaldo Silva Jun 22 '18 at 18:55
  • The way you do it means I need to edit the JS for each instance of the grid with different columns. I use a helper file with a re-usable function to do the grid, hence it is not 100% what I had in mind. The code I have is around 400 lines of code in total, and it works for what I have in mind now, but it does appear to be hacky to me, but I can share it somewhere if you would like to look at it. At least I can in my CodeIgniter controller specify conditions specific to the instance I want to create that builds up the custom actions accordingly. – Kobus Myburgh Jun 24 '18 at 14:08
  • @KobusMyburgh it would be nice if you could share just part of the code (the most relevant parts). If I understood correctly, you have many different grids which use the same data to populate rows, but the columns may not be the same. – Alisson Reinaldo Silva Jun 25 '18 at 10:42
  • @KobusMyburgh just a side note, you should never sacrifice readibility just to have fewer lines in your code. Your code should be cohesive, if your instincts tell you it's hacky, it's almost certain that it is, you should rethink your design. You should also avoid using your controller to mess up with javascript/jquery (or whatever is your frontend framework), it's not their responsibility. Controllers should at most select the proper views to be rendered and get the right data for said view. If by `specify conditions specific to the instance` you mean setting flags in your data, it's fine. – Alisson Reinaldo Silva Jun 25 '18 at 10:47
  • 1
    Seems like I can't put formatted code in a comment. I will edit question to give current state of the code briefly. I do not sacrifice readability ever. I just want to ensure that my code is not hacky. – Kobus Myburgh Jun 26 '18 at 13:06