Bootstrap 4

[cidmacedo]

Hello friend´s, i need help, my bootgrid does not running in Bootstrap4 and i don´t know how to convert this. I need some help

Thanks.

[matiaskusack]

Hi, try adding this (after adding jquer.bootgrid.js):

; (function ($, window, undefined) {
    "use strict";

    $.extend($.fn.bootgrid.Constructor.defaults.css, {
        search: 'table-search',
        actions: 'btn-group table-actions',
        iconRefresh: 'fa-sync',
        iconDown: 'fa-sort-down',
        iconUp: 'fa-sort-up',
        iconColumns: 'fa-th-list',
        paginationButton: 'page-link',
        icon: 'icon fa',
    });

    $.extend($.fn.bootgrid.Constructor.defaults.templates, {
        icon: '<i class="icon fa {{ctx.iconCss}}"></i>',
        search: `
                        <div class="btn-group {{css.search}}">
                            <div class="input-group mb-2">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">
                                        <i class="fas fa-search"></i>
                                    </div>
                                </div>
                                <input type="text" class="form-control {{css.searchField}}" id="inlineFormInputGroup" placeholder="{{lbl.search}}">
                            </div>
                        </div>`,
        actionButton: `
                        <button class="btn btn-light" type="button" title="{{ctx.text}}">
                            {{ctx.content}}
                            <span>{{ctx.text}}</span>
                        </button>`,
        actionDropDown: `
                        <div class="{{css.dropDownMenu}}">
                            <button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown">
                                <span class="{{css.dropDownMenuText}}">{{ctx.content}}</span>
                                <span class="caret"></span>
                                <span></span>
                            </button>
                            <ul class="{{css.dropDownMenuItems}}" role="menu"></ul>
                        </div>`,
        paginationItem: `
                        <li class="paginate_button page-item {{ctx.css}}">
                            <a data-page="{{ctx.page}}" class="{{css.paginationButton}}" href="javascript:void(0);">
                                {{ctx.text}}
                            </a>
                        </li>`,
        loading: `<tr><td colspan="{{ctx.columns}}" class="text-center"><i class="fa fa-sync fa-spin"></i></td></tr>`
    });
})(jQuery, window);