How to do offline sorting in bootgrid?

Question

Suppose I fetched the data from api and during sort, don't want to hit the api please help if it is possible in bootgrid like datatable.

I have this function for bootgrid load can please help on this.

function generateBootGrid(pd) {
$(pd.gridId).bootgrid({
    ajax: true,
    rowSelect: true,
    navigation: 0,
    sort: true,
    search: false,
    post: function ()
    {
        /* To accumulate custom parameter with the request object */
        return getCustomPramas();
    },
    url: baseUrl + pd.fireUrl+'?get_of_year='+$('#get_of_year').val(),
    templates: {
        search: ""
    },
    responseHandler: function (data) {
        console.log(data);
        $(pd.totalPriceId).html(data.totalCost);
        return data;
    },
    formatters: {
        "commands": function (column, row)
        {
            return "<button type=\"button\" class=\"btn btn-xs btn-default " + pd.editButtonClass + "\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> ";
        }
    }
})

requiredBootGridParms = {
    gridId: "#educational-expenses",
    fireUrl: "/pedagogical-action/get-educational-expenses/",
    totalPriceId: "#totalEduCost",
    editButtonClass: "command-edit",
};

generateBootGrid(requiredBootGridParms);

This is the html for this grid

 <table id="educational-expenses" class="table table-condensed table-hover table-striped" width="60%" cellspacing="0" >
        <thead>
            <tr>
                <th data-column-id="account_number" data-type="numeric" data-identifier="true">Account Number</th>
                <th data-column-id="account_name"  data-order="desc">Account Name</th>
                <th data-column-id="amount">Amount</th>
            </tr>
        </thead>
    </table>
    <button type="button" class="btn btn-xs btn-primary" id="command-add" data-row-id="0">
        <span class="glyphicon glyphicon-plus"></span></button>
    <span class="text-danger float-right">Total educational costs - A:  <span class="text-danger" id="totalEduCost">00.00</span></span>

Thanks

Alisson Reinaldo Silva · Accepted Answer · 2018-01-31T09:28:14.457

It's possible. You need to do an ajax request by yourself, then populate the bootgrid manually. You also need to configure bootgrid not to use ajax.

function generateBootGrid(pd) {

    var grid = $(pd.gridId).bootgrid({
        ajax: false,
        rowSelect: true,
        navigation: 0,
        sort: true,
        search: false,
        templates: {
            search: ""
        },
        formatters: {
            "commands": function (column, row)
            {
                return "<button type=\"button\" class=\"btn btn-xs btn-default " + pd.editButtonClass + "\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> ";
            }
        }
    });

    return grid;

}

function loadData(pd, grid) {
    var url = baseUrl + pd.fireUrl+'?get_of_year='+$('#get_of_year').val();
    var data = getCustomPramas();
    $.post(url, data)
    .done(function (data) {
        console.log(data);
        data = JSON.parse(data);
        $(pd.totalPriceId).html(data.totalCost);

        grid.bootgrid('clear');
        grid.bootgrid('append', data.rows);
    });
}

requiredBootGridParms = {
    gridId: "#educational-expenses",
    fireUrl: "/pedagogical-action/get-educational-expenses/",
    totalPriceId: "#totalEduCost",
    editButtonClass: "command-edit",
};

var grid = generateBootGrid(requiredBootGridParms);
loadData(requiredBootGridParms, grid);

The API method should return something like this:

public IHttpActionResult Get()
{
    var model = new ExpensesViewModel();
    model.totalCost = 1000.53;
    model.rows = new List<ItemViewModel>();
    model.rows.Add(new User("John"));
    model.rows.Add(new User("Darin"));
    model.rows.Add(new User("BalusC"));
    return Ok(model);
}

I used C# Web.API as example, but you may use any backend as you wish.

...and the data returned by your API should be something like this json:

{
    totalCost: 1000.53,
    rows: [
        { id: 1, cost: 50 },
        { id: 2, cost: 130 },
        { id: 13 cost: 25 }
    ]
}

With this approach, bootgrid will do sort, pagination and search on the client, without sending requests automatically to the API.

However, take note this approach works only if the API is returning all the data you need in the grid. So if you had 100 rows, your API should return those 100 rows once (and the same applies for DataTable).

@UmashankarSaw I edited my answer. Let me know if it helps you. — Alisson Reinaldo Silva, Jan 25 '18 at 15:17
@ Alisson how will get the grid variable in loadData function? — Umashankar Saw, Jan 29 '18 at 13:26
@UmashankarSaw see my edited code. Now, the `generateBootGrid` returns the grid. Where we call `generateBootGrid()`, we get the grid returned by the function, and pass it as a parameter to `loadData` function. That's one way of solving it. — Alisson Reinaldo Silva, Jan 29 '18 at 13:31
@UmashankarSaw is this the output of `console.log(data);`??? Please, edit your answer and share the HTML of your table. — Alisson Reinaldo Silva, Jan 29 '18 at 15:20
I have edit the question. Yes, this json get in console.log(data) { "current": 1, "rowCount": 1, "total": 1, "rows": [{ "account_number": "234231", "account_name": "testa", "amount": "1520" }, { "account_number": "234232", "account_name": "dsfads", "amount": "234" }], "totalCost": "1520.00" } — Umashankar Saw, Jan 30 '18 at 06:25
@UmashankarSaw inside your bootgrid, did you change ajax to false like `ajax: false` and removed the `url` parameter? — Alisson Reinaldo Silva, Jan 30 '18 at 09:35
One console error showing "TypeError: a is undefined [Learn More] jquery.bootgrid.min.js:6:17686" — Umashankar Saw, Jan 31 '18 at 05:00
Now got the error just have to add this line in your loadData function data = JSON.parse(data); after done, please edit the answer, Thanks a lot. — Umashankar Saw, Jan 31 '18 at 05:37
@UmashankarSaw it's nice to hear you discovered what was missing. I edited my answer as you suggested. Also, you can mark my answer as accepted. — Alisson Reinaldo Silva, Jan 31 '18 at 09:29

How to do offline sorting in bootgrid?

1 Answers1