Ajax Settings

Ajax request settings that shall be used for server-side communication.

All setting except data, error, success and url can be overridden. For the full list of settings go to jQuery.ajax.

Example

The following example shows how to override ajax settings.

$("#grid").bootgrid({
    ajaxSettings: {
        method: "GET",
        cache: false
    }
});

Search Settings

General search settings to configure the search field behaviour.

Example

The following example shows how to override search settings.

$("#grid").bootgrid({
    searchSettings: {
        delay: 100,
        characters: 3
    }
});

Status Mappings

Specifies the mapping between status and contextual classes to color rows.

Example

The following example shows how to extend the status mappings.

$("#grid").bootgrid({
    statusMappings: {
        4: "wrong"
    }
});

Converters

Built-in converters for a better sorting experience and localization.

Example for custom converter

It´s very simple to create a custom converter. The converter consists of two methods: from and to. from converts a String to a desired type. to instead converts a type into a representational String.

In the example below you can see how easy it is to integrate Moment.js for better datetime visualization and sorting.

$("#grid").bootgrid({
    converters: {
        datetime: {
            from: function (value) { return moment(value); },
            to: function (value) { return value.format("lll"); }
        }
    }
});

Keep in mind when using Moment.js to select one of the ISO-8601 datetime formats recommended here when populating jQuery Bootgrid in order to avoid strange behaviour.

Formatters

Formatters are perfect to manipulate the visualization of data cells. They´re fast and easy to implement, but see yourself in the example below.

How to create a formatter

A formatter is nothing else than a Function that gets invoked on data cell rendering. this is mapped to the current Bootgrid instance. The formatter return a HTML String. Use the loaded.rs.jquery.bootgrid event to bind custom events to your controls rendered by a formatter.

$("#grid").bootgrid({
    formatters: {
        commands: function (column, row)
        {
            /* "this" is mapped to the grid instance */
            return "html code";
        }
    }
});

Be creative by adding your own templates, labels or styles.

Labels

All labels can be set and overridden on initialization respectively.

Example

See in the following example how to override default label values or see it here in action.

$("#grid").bootgrid({
    labels: {
        noResults: "where are my results"
    }
});

Styling

All CSS classes can be set and overridden on initialization respectively.

Templates

All templates can be set and overridden on initialization respectively.

Dynamic Placeholder

As you may already have noticed, some templates and labels contain strange content parts like {{ctx.icon}}. These are dynamic placeholders which will be replaced upon rendering. There are three different types of placeholders. ctx is a dynamic context-sensitive container, whereas css (CSS container) and lbl (label container) are more or less static containers (they are linked directly to the CSS and label settings).

Due to technical constraints CSS and label settings should not be nested because it would lead to strange indication errors.