jqueryjqgrid-formatterjquery-bootgrid

JQuery.BootGrid data types and data formatters


What data types and data formatters are available with JQuery.BootGrid? Or are the data-type and data-formatter fields actutally JQuery DataTypes or some other property? If so what are the JQuery DataTypes? (I couldn't find documentation about that)

I want to set a column as currency (with a dollar sign to the left), how do I do that with JQuery.BootGrid?

But I want to understand the data-type/data-formatter in general. Do I have to understand jqGrid formatter for that, or is bootGrid a totally different product?


Solution

  • The Bootgrid data-type:

    Turns out data-type="numeric" is the only type supported:

    From results on a search on the bootgrid github I understand that there is only one explicit type supported: numeric, anything else is a javascript string.

    The numeric data-type is used with the internal "numeric" converter - to and from a string.

    (In the question I meant JQuery datatypes defined here (click on this), but as I just said, these have nothing to do with Bootgrid)

    Using the Bootgrid formatter

    I understand that the formatter is just any html with the use of "this" and the grid objects (see here in the Bootgrid docs then scroll down to "Formatters").

    So you can write code like this:

    // ... in continuation to the .bootgrid
    $("#grid").bootgrid({
        formatters: {
            dollarformatter: function (column, row){
                // "this" - is mapped to the grid instance
                return '$ ' + this.rows[row][column]; 
            },
            myformatter: function (column, row)
            {
                // "this" - is mapped to the grid instance
                // text - here is defined by the next column's content
                return '<button id=\"mybutton' + row + '\"'
                       + ' type=\"button\"'
                       + ' class=\"btn btn-primary\"'
                       + ' onclick=\"mybuttonclicked(' + row + ')\"'
                       + '>'
                       + this.rows[row][column + 1]
                       + '</button>';
            }
        }
    });    
    

    I'm not a front-end javascript expert, so if there's a clearer way to write those lines of code without all the escapes, please tell me about it here.

    Thank you.