Buy now!


The NinjaGrid display a list of objects as a data grid table.

Sample 1 - Basic sample


To use NinjaCombo plugin, add those references into your website:



And the plugin files:


Call ninjaGrid method to initialize the plugin:



    url: null,                  //-- set the url to the ajax call. This property overrides the "dataSource" option.
    type: "GET",                //-- set the type of ajax call ["GET","POST"]
    model: {},                  //-- model used to send as parameter to ajax call
    dataSource: null,           //-- an array of objects to be used as datasource instead of an ajax call. 
    keyColumn: null,
    columns: null,              //-- an array og objetcs representing all the column configuration
                                //-- [{
                                //-- header: ""                                 //-- set the column header text
                                //-- property: ""                               //-- set the property of your object to be displayed
                                //-- width: 0,                                  //-- column size width
                                //-- align: "left",                             //-- column content alignment
                                //-- css: "",                                   //-- set custom css to the column
                                //-- sort: false,                               //-- set if it is sortable or not
                                //-- format: null,                              //-- set a function(vl, obj, td, tr){ } to customize the cell content or a mask name from ninjaCore settings
                                //-- customFormat: null,                        //-- set the name of a customized format function. [customFormat] function has priority over [format] functions
                                //-- totalize: {                                //-- set if this column should be totalized at the end
                                //--    condition: null,                        //-- set a function to define a condition to be totalized
                                //--    type: "count",                          //-- set the totalize type ["count", "sum", "avg"]
                                //--    align: "left",                          //-- set the totalize cell's text alignment
                                //--    format: null                            //-- set a function to customize the cell content
                                //--    }
                                //-- }],
                                //-- isCheckbox: false,                         //-- set if this column will be displayed as a checkbox, boolean type.
                                //-- autoCheck: false,                          //-- set if this column will be checked/unchecked automatically at row's click
                                //-- onChange: function(obj, td, tr){ },        //-- set a function to be called when the checkbox values is changed
                                //-- disabled: false,                           //-- set if the checkbox should be displayed as disabled
                                //-- readonly: false                            //-- set if the checkbox should be displayed as readonly

    width: "100%",              //-- set the grid width 
    minHeight: 150,             //-- set the grid min-height
    maxHeight: 0,               //-- set the grid max-height. 

    pageNumber: 1,              //-- set the initial page number
    pageSize: 15,               //-- set the initial page size
    sortColumn: null,           //-- set the initial sort column
    sortOrder: "asc",           //-- set the initial sort order

    autoLoad: true,             //-- set if the grid will load the datasource when initializated
    multiSelect: false,         //-- allow the user to select more than one row

    showPages: true,            //-- set the pagination buttons visibility
    showRefresh: true,          //-- set refresh button visibility
    showTotal: true,            //-- set the label total visibility
    showFooter: true,           //-- set the footer bar visibility

    lblFooterPages: "Page {0} of {1}",
    lblFooterTotal: "{0} records",
    lblFooterFirstPage: "First",
    lblFooterLastPage: "Last",
    lblFooterNextPage: "Next",
    lblFooterPrevPage: "Previous",
    lblLoading: " loading...",
    lblTotalizeRow: "Total",

    onCallback: null,                                       //-- set a function to be fired when the grid is loaded
    onRowClick: function (tr, obj) { },                     //-- set a function to be fired on row click
    onRowCreated: function (tr, obj) { },                   //-- set a function to be fired when a row is created
    customFormat: {                                         //-- set N custom functions to be used to format cells
        "myCustomFunctionName": (vl, obj, td, tr) { }
    buttons: {
        "edit": {
            text: '',                                       //-- set the button text
            css: 'nc-btn fa fa-pencil'                      //-- set the button css
        "delete": {
            text: "",
            css: "nc-btn fa fa-trash"
    roles: function (name, item) {                          //-- set a role function to check if a button should be displayed or not
        return true;
    events: {
        "edit": function (item, e) { console.error("function event not implemented."); },
        "delete": function (item, e) { console.error("function event not implemented."); }
    customize: function () {







Initialize the plugin to the specified selector.



Refresh the grid.



Add a new line in the grid.



Get a list with all selected rows data.



Refresh the totalization row.