rstaib / jquery-bootgrid Goto Github PK
View Code? Open in Web Editor NEWNice, sleek and intuitive. A grid control especially designed for bootstrap.
Home Page: http://www.jquery-bootgrid.com
License: MIT License
Nice, sleek and intuitive. A grid control especially designed for bootstrap.
Home Page: http://www.jquery-bootgrid.com
License: MIT License
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!
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
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 ?
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!
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?
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.
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.
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]);
});
}
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]);
});
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?
As described in this issue title. For example, can I show or hide the search field configurablly?
Can you add features like this :column and row resizing ,moving and fixed column.
there is an option to make some columns not searchable
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.
Hello
When i use your plugin some css of bootstrap not working : label
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/
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.
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/)
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?
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 there a way to preserve links in the table cells?
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.
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!
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.
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?
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'
Is possible to have some columns do not changed by the script; example button cell, ...
Because i must rewrite all to reconstruct all buttons
Would it be possible to integrate x-editable (or something similar) in jQuery Bootgrid for inline editing? If so, any jsfiddle links out there?
As a user I want to be able to change the alignment of th
elements.
Could you add support for OData queries?
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??
sometimes i want to add filter filed facilities on grid and place it on the side search filed.
can i?
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.
Is it possible to to freeze Columns?
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.
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!
Hi,
EDIT: I could create the pull request :)
Best regards,
Mauro H. Leggieri
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.
is it possible to set a column width for each column?
Regards
peter
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
How can i use the plugin in a table with buttons?
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 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 is better if the plugin maintain selection after change filter text
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.