The current post variable is not the same for next/prev links and the page number links. Clicking page 2 results in sending current variable as 2 (which is ok) but when clicking next link while on page 1 results in sending 11. This makes server-side processing impossible since we have 2 different values 2 and 11. Can you please fix this.

In default, Bootgrid render header in above and footer in below grid, but i want to render in another place in my page. is it possible?

on selecting a particular date range and clicking a button "populate" a ajax call populates the grid.
But if I changes the date range and click populate the grid doesn't get reinitialize. The data on the grid shows the records of the previous data range.
Grid doesn't get reinitialize.
How to do reinitialize the grid??

Thanks for your grid.

It would be possible to capture dobleClick event on grid?

Actually, there are two events captured, the selected and click event, but not dobleclick.

It may be interesting

Is possible to have some columns do not changed by the script; example button cell, ...
Because i must rewrite all to reconstruct all buttons

Currently there is no way for bootgrid to consume other data formats. I've added the following code to the $.post callback:

            if (this.option.reader)
            {
                response = this.option.reader.call(this, response);
            }

This allows me to pass in a reader to convert my data format to what bootgrid is expecting. I'm not sure if that is inline with your vision for this plugin, but this works well for my needs. Great work with this, I'll be using the heck out of it.

Hi I was trying the command sample from your website but I ran into an error saying that "rows is undefined

if (rows.length > 0)" from firebug its on line 565

all I did was this

           <th data-column-id="sender" data-order="asc">Fullname</th>
           <th data-column-id="username">Email Address</th>
           <th data-column-id="lvl" >Role</th>
           <th data-column-id="status" >Status</th>
           <th data-column-id="date-reg" >Date Registered</th>
           <th data-column-id="last-log" >Last Login</th>
           <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
       </tr>
   </thead>
 </table>

<script>$("#grid-data").bootgrid({
 ajax: true,
 post: function ()
        {
        /* To accumulate custom parameter with the request object */
        return {
        id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
        };
        },
    url: "fetchdata.php",
formatters: {
commands: function (column, row)
    {
    /* "this" is mapped to the grid instance */
    return "<i class='fa fa-pencil'></i><button type=\"button\" class=\"btn btn-xs btn-default suspends\" data-row-id='"+row.id+"'><i class='fa fa-warning'></i></button>";
    }
}
}).on("loaded.rs.jquery.bootgrid", function() {
    $("#grid-data").find(".suspends").on("click", function(e)
        {
        alert("You pressed edit on row: " + $(this).data("row-id"));
        });
});</script>

the php file looks something like this

while($r = $user->fetch()) {
$rows[] = $r;
}
print json_encode($rows);

did I do something wrong here? please help thanks

sometimes i want to add filter filed facilities on grid and place it on the side search filed.
can i?

My users wanted the page size changing to save their last selected page size. (basically set/read a cookie to preserve their last page size selection)

I was able to work around this by slipping their saved value into a custom page size list, but this isn't a great solution, as it almost guarantees a duplication of options. Would be much cleaner to specify the selected page size with the bootgrid() constructor.

Hi rstaib,

When I use the append method to add a new row to a jquery-bootgrid in IE, if the column contains $0.00 it displays as {{ctx.content}}.00. Note: this only occurs in IE (tested with IE 11). FF and Chrome display correctly.

Example:

$("#my-grid").bootgrid("append", [{
"id": 1,
"amount": "$0.00"
}]);

Am I doing something incorrect or is this a bug?

Thanks and regards,
Ali

I think is better if the plugin maintain selection after change filter text

Hi,

EDIT: I could create the pull request :)

Best regards,
Mauro H. Leggieri

How can i use the plugin in a table with buttons?

I am new to jquery-bootgrid ,i want to know how to call its mehod
i use grid.reload();
but i got an error: Uncaught TypeError: Object [object Object] has no method 'reload'

Can you add features like this :column and row resizing ,moving and fixed column.

When I click on a row I get:
Unhandled exception at line 666, column 21 in http://localhost:58239/Scripts/jquery.bootgrid.js
0x800a138f - JavaScript runtime error: Unable to get property 'from' of undefined or null reference
I changed row-id to data-row-id to match your DOM. No change. Your grid is fantastic. Am I doing something wrong. I'm following your command buttons example in MVC 5. Thanks

tbody.off("click" + namespace, "> tr")
.on("click" + namespace, "> tr", function(e)
{
e.stopPropagation();

            var $this = $(this),
                id = that.converter.from($this.data("data-row-id")),
                row = (this.identifier == null) ? that.currentRows[id] : 
                    that.currentRows.first(function (item) { return item[that.identifier] === id; });

            if (selection && that.options.rowSelect)
            {
                if ($this.hasClass(that.options.css.selected))
                {
                    that.deselect([id]);
                }
                else
                {
                    that.select([id]);
                }
            }

            that.element.trigger("click" + namespace, [that.columns, row]);
        });
}

This feature enables native access to subproperties of a field (see example below).

...
<th data-column-id="person.id">Person ID</th>
<th data-column-id="person.age">Age</th>
...

Here person is actually one field. But instead of being a value like number or string it's an object that has properties which are holding the content we're interested in (e.g. age, id and so on). See the example object below.

{
    ...
    rows: [
        ...
        {
            ...
            person: { id: "p-01", age: 55 }
        }
    ]
}

Many thanks to Mohammed Riyad El Khoudary for conceptional work.

Is there a way to preserve links in the table cells?

As described in this issue title. For example, can I show or hide the search field configurablly?

Hello
When i use your plugin some css of bootstrap not working : label

To click on a row produces "Uncaught TypeError: Cannot read property 'from' of null" in Chrome and "TypeError: r.converter is null" in Firefox. You can test it in basic example or data example.

How can I hard code a button? If I just write:

<td><div><button class='btn btn-primary btn-xs'>Click Me</button></div></td>

It does not work. Do I really have to use a formatter?

tbody.off("click" + namespace, "> tr")
.on("click" + namespace, "> tr", function(e)
{
e.stopPropagation();

            var $this = $(this),
                id = that.converter.from($this.data("data-row-id")),
                row = (this.identifier == null) ? that.currentRows[id] : 
                    that.currentRows.first(function (item) { return item[that.identifier] === id; });

            if (selection && that.options.rowSelect)
            {
                if ($this.hasClass(that.options.css.selected))
                {
                    that.deselect([id]);
                }
                else
                {
                    that.select([id]);
                }
            }

            that.element.trigger("click" + namespace, [that.columns, row]);
        });

Hi Rafael,
great script, thanks a lot! I just have one problem where I hope you could help me because you are also experienced with c# and asp.net : I've added your script on a gridview in asp.net and it works great. But I have a problem with the SELECT-column because in my gridview user should be able to select a single row (not using checkboxes but a direct 'select'-link). I've tried several ways, e.g. auto-creation of select-column, template column with button field etc. None of them were successfull :-(
Do you have any idea how to use bootgrid with a gridview in asp.net having a select-link on each row?
Thanks a lot!

Could you add support for OData queries?

I have a situation where I need to display HTML links in a table cell. I've experimented with using a formatter like your commands example. The problem is that I need to check user permissions as I build the links, so I need to build the HTML on the backend instead of in the js. Any suggestions?

It seems sometimes your resolve method returns a char array in IE8/9, which causes problems (error: Unable to get property 'ownerDocument' of undefined or null reference)
https://github.com/rstaib/jquery-bootgrid/blob/master/src/extensions.js#L74
Adding toString() to this line seems to fix it, but I don't know if that will break anything else?

if (typeof value === "object")
                {
                    var keys = (prefixes) ? $.extend([], prefixes) : [];
                    keys.push(key);
                    result = result.resolve(value, keys).toString();
                }

Is it possible to to freeze Columns?

My users wanted the page size changing to save their last selected page size. (basically set/read a cookie to preserve their last page size selection)

I was able to awkwardly tie into the dropdown menu option click, but it would be much easier to subscribe to an event that tells me the page size has changed.

As a user I want to be able to change the alignment of th elements.

Hi,

'DATA-ORDER' on column wont retain On destroy & re init . Any idea?

This issue happens when you initialize your grid & you want to destroy it & re initialize it.
$("#grid-basic").bootgrid();
$("#grid-basic").bootgrid('destroy');
$("#grid-basic").bootgrid();

jsfiddle link -> http://jsfiddle.net/bne877up/

Loving this package --thanks!

Today I wanted to remove my "commands" column from the columnSelection dropdown, and found it unnecessarily difficult: $('.actionBar input[name=commands]').closest('li').remove();

Would you consider adding a CSS class like "bootgrid-column-selection-dropdown" to the columnSelection drop-down to make this sort of thing cleaner?

Throughout this package, it seems like a few more bootgrid-* classes would be welcome for easier customization.

Thanks again for an awesome package!

It would be nice to have that feature build-in. Currently when I'm sending JSON as string from requestHandler, the contentType is set to "application/x-www-form-urlencoded", which cannot be interpreted correctly on server-side.

First of all thanks for all the hard work out in to create this awesome plugin!

While Bootstrap is very popular and widely used, there are other UI frameworks that are used largely as well. I just wanted to see if is practical and ok with your plans for this plugin, to make it more flexible so that it could be used with other UI frameworks easily. I m happy to contribute in that case. (Currently I heavily use http://getuikit.com/)

is it possible to set a column width for each column?
Regards
peter

I have used bootgrid for a long time,it works well.But now i have a requiement.
Is it possiable to add a right context menu?

We have data that has up to 20 columns, we want to hide some of them on initialization but have them available in the drop down. How do I do that?

I am not sure if this is in your roadmap but it'll be nice to have support for in-place cell editing.

It seems that bootgrid lacks the i18n support, at least on first glance. Currently the labels variable contains all the strings that need to be localized.

A sample of zh-CN localization (it works on 1.0.0) might be as follows:

(function ($) {
    "use strict";

    $.extend($.fn.bootgrid.Constructor.defaults.labels, {
        all: "全部",
        infos: "共{{ctx.total}}条记录，本页为{{ctx.start}}—{{ctx.end}}条记录",
        loading: "载入中……",
        noResults: "找不到记录！",
        refresh: "刷新",
        search: "搜索"
    });
})(jQuery);

I don't make pull request because one might need some extra designs on the code structure when formally taking locale into consideration. I will be grateful if bootgrid can add formal i18n support.

If the contents of a column are images, it seems that this column can't be sorted, but, each image has a image id asociated it, and the image id is not suitable for diaplay, but suitable for sorting the image. Is there any method can solve this issue? Thanks for your great work!

I notice that the table of the basic demo is sorted asc by the "Sender" column, but each cell of the column have the same value. So, it is reasonable also can be sorted by other column. So, I try to click the first column head to sort the table row by ID, but it failed.
Hoping for your reply, thanks!

I think the decision to use POST to submit page and search parameters to the server is not only incompatible with REST (see here for a discussion http://restcookbook.com/HTTP%20Methods/put-vs-post/), it also makes it awkward to design a decent REST service and worst of all it breaks caching.

I would like for example my bootgrid to query my service at /stuff/ and when I want to add to stuff I can just POST to /stuff/. Right now, even though this is feasible, I need to differentiate based on the POST body, which is far from ideal.

Is there a chance to revert the decision and use GET at all times when bootgrid reads data ?

Hi,
It would be very useful if we could trigger AJAX call to update table data and set some additional filters in the request to the server, e.g.:

{
    "current" : 1,
    "rowCount" : 5,
    "sort" : {
        "fullDate" : "desc"
    },
    "searchPhrase":"",
    "filters" : [
        {
            "property" : "dateFrom",
            "operator" : ">",
            "value" : "2014-10-01"
        },
        {
            "property" : "dateTo",
            "operator" : "<",
            "value" : "2014-10-03"
        },
        {
            "property" : "type",
            "operator" : "=",
            "value" : "SOME_TYPE"
        }
    ]
}

Is it doable with current implementation? If not, I will most probably add such functionality on my side so I can share code after that.

$("#my-table").bootgrid({
    (...)
}).on("click.rs.jquery.bootgrid", function (e, cols, row) {
    console.log("CLICKED/");
    console.log(e);
    console.log(cols);
    console.log(row);
});

This triggers also when table header is clicked (which also sorts the table). cols and row are undefined then.

there is an option to make some columns not searchable

Would it be possible to integrate x-editable (or something similar) in jQuery Bootgrid for inline editing? If so, any jsfiddle links out there?

It would be nice to be able to style columns in CSS/JS by their data-column-id, but the data-column-id is only put on TH's, not TDs. Ideal would be an actual class, but replicating data-column-id on TD would be better than nothing. Thanks!

Just wanted to point out that you are requesting people ask questions on StackOverflow and tag their requests with jquery-bootgrid, but that isn't yet a tag on S.O.. It requires a reputation of 1500 or higher to create a new tag, and I'm not even close to that, so I couldn't create the tag, but I do need to ask a question. I ended up prefixing my question with 'jquery-bootgrid'. I hope you can find it. Please create the tag, and then everyone can use it to post questions. Thanks!