direct-fuel-injection / bbgrid Goto Github PK

How do you set a row as selected outside of click event? Say I want to make a row selected by default or set a row as selected.

I saw the closed issue regarding support for Bootstrap 3, but I wondered if you have any plans to port. Thanks!

the thing is when u have a big number of selections(fields) for search drop down, it could go out off screen. in the top, if the table has not so many lines.

it would be grate to add auto drop up/down.

something like this :
dropup = function() {
$(".dropdown-toggle").each(function(){
par=$(this).parents('.btn-group');
dropl=par.find('ul');
otop=$(this).offset().top+$(this).height()-$(window).scrollTop();
ulh=dropl.height();
obot=$(window).height()-$(this).height()-$(this).offset().top+$(window).scrollTop();
if ((obot < ulh) && (otop > ulh)) {
par.addClass('dropup');
} else {
par.removeClass('dropup');
}
});
}
$(window).load(dropup);
$(window).bind('resize scroll touchstart touchmove mousewheel', dropup);


Hi,
i'm impressed with the performance !
i'm looking for some pointers to implement inline edit functionality.
Any suggestions ??

I would be great to add support for bootstrap 3. tb3 is still in RC.

I have a collection of objects with child properties:

blah: {
id: 7,
details: {
name: 'something'
}
}

How can I render blah.details.name in my grid?

Hi,

I would like to make grid cells editable, that is when one of them is clicked, I would like to be able to edit the content of that cell. Is there a way to do it?

Thanks

TypeError: Cannot read property 'length' of undefined
bbGrid/bbGrid.js:449

seting if (self.view.searchList.length) {

to

if (self.view.searchList) {

works, but i don't know is it a good ideea?

My grid code:
http://pastebin.com/2SL8qr8g

Screenshot:
https://dl.dropbox.com/u/642264/Screen%20Shot%202013-03-12%20at%2010.30.15.png

Hi Dude,

Need a Basic Example for Implementing this BBGrid.

var MyGrid = new bbGrid.View({
container: $('#bbGrid-container'),
collection: MyCollection,
colModel: [{ title: 'ID', name: 'id', sorttype: 'number' },
{ title: 'Full Name', name: 'name' },
{ title: 'Company', name: 'company' },
{ title: 'Email', name: 'email' } ]
});

with this code.

1. how can i achieve grid.
2. How to fill the data in grid.

Алексей,

1. How to extend Cell with View? I mean how to set my view in particular cell.

There is such possibility in In Backgrid to extend cells:

var MyRow = Backgrid.Row.extend({
...
Backgrid.MyCell = Backgrid.Cell.extend({
...

Extending cells is what wee need in Backbone.

However Backgrid is very poor concerning selection. Your solution is much better.

1. Is there function like AddRow. I would like to add rows using such scenario:.

fetch collection
collection.each(function (c) {
grid.insertRow(c);
});

Hi, i have this error :
Uncaught TypeError: Object function (){return i.apply(this,arguments)} has no method 'on' bbGrid.js:41

so i'm used require JS, Backbone, Jquery,bbGrid

my code view:

define(['jquery', 'underscore', 'backbone',
        'text!templates/mes_comptes/compte_courant/dernieres_transactions.html',
        'models/mes_comptes/compte_courant/dernieres_transactions','bbGrid'
],
function($, _, Backbone, htemplate, model_compte_courant,bbGrid) {

    var Library = Backbone.Collection.extend({
        model: model_compte_courant
    });
    console.log(bbGrid);
    var gridview = new bbGrid.View({
        container: $('#banks'),
        collection: Library,
        colModel: [{
                title: 'Lib',
                name: 'lib',
                sorttype: 'string',
                filter: true, filterType: 'input'
            }, {
                title: 'Date',
                name: 'date'
            }, {
                title: 'Montant',
                name: 'montant'
            }
        ]       
    });
    var dernieres_transactions = Backbone.View.extend({
        template: _.template(htemplate),
        render: function() {
            Viewgrid= new gridview();
            this.$el.append(this.template());
            return this;
        },
        initialize: function() { },
        
    });
    return dernieres_transactions;
});

my code model:

define(['jquery', 'backbone', 'underscore'], function($, Backbone,_){
    var dernier_transac = Backbone.Model.extend({ 
        defaults: {
            lib: "",
            date : "",
            montant:"",         
        },
        
    });
    return dernier_transac;
});

I was trying to figure out why the bbGrid that I downloaded from here (http://direct-fuel-injection.github.io/bbGrid/) does not work with the examples on the very same page.

I just found out why and I want to share this with anybody else who might be experiencing the same issue.

The problem is this line:

        _.extend(this, _.pick(options, _.union(viewOptions, _.values(options.events))));

The issue is that if that if options.events is undefined (as it is in the examples), then _.values(undefined) gives the error:

Uncaught TypeError: Object.keys called on non-object 

I noticed that the most recent version on github does not have this issue:
https://github.com/direct-fuel-injection/bbGrid/blob/master/bbGrid.js

I think that the download link should be updated to avoid confusion for other users in the future.

Hi, i am using bbgrid in c# MVC development.
The problem i get is, the Date(xxxx) the json data gets back from the server is not rendered as date in the grid.

I am trying to find a way to solve it.

By the way, i have added a couple of events in the bbgrid code, like such

       ContentListGrid.bind('sort', function (event) {
            //console.log(event);
            $('.confirm-delete').on('click', enableDeleteButton);
        });
        ContentListGrid.bind('aftersort', function () {
            $('.star').on('click', onHighlight);
            $('.confirm-delete').on('click', enableDeleteButton);
        });
        ContentListGrid.bind('afterfilter', function () {
            $('.star').on('click', onHighlight);
            $('.confirm-delete').on('click', enableDeleteButton);
        });
        ContentListGrid.bind('afterpageChanged', function () {
            $('.star').on('click', onHighlight);
            $('.confirm-delete').on('click', enableDeleteButton);
        });

to help sustain some events after the page changes or sorting is commenced.
If you would like me to submit up to branch, will do so :)

Great library,

But is it possible to load dynamic data from the server, based on pagination, order and filters?

Something like this, that will return a JSON:

App._exampleCollection = Backbone.Collection.extend({
        url: 'examples.php?page=1&order=id&filter=foo'
});

As a developer, I would like an option to auto-escape fields that are passed to bbgrid.

I had a question about how to set bbGrid so that it would only sort the column if an actual icon was clicked but I figured it out. There is a portion of the code where it has an event for 'click th'. I am thinking about trying to change the code a little bit to fix that. Feel free to delete this thread!

Only two type of data (integer, string) sorting and filtering functionality are available in bbGrid right now. But I need DATE data type sorting and filtering functionality. So can you please suggest the way, how to extend the core bbGrid to achieve this?

Hi all, im try to get the selected model via onClick button event. I have the multiselect option set as true, and when select an item an click the button, the selected model is undefined.

// psuedo var this is the view, not works with this.view (as the doc says).
var models = this.getSelectedModels();
console.log(models);

My model and collection are defined as follows:

var Model = Backbone.Model.extend();

var ModelsCollection = Backbone.Collection.extend({
model: Model,
url: Routing.generate('usuarios_retrieve')
});

Any ideas ?

I edited following conditions :

<li<%if (page === cntpages ||(cntpages===0)) {%> class="active"<%}%>>\
                <a class="right"><i class="icon-forward"/></a>\
</li>\
<li<%if (page === cntpages ||(cntpages===0)) {%> class="active"<%}%>>\
                <a class="last"><i class="icon-step-forward"/></a>\
 </li>\

Hey - awesome project. Thanks for sharing.
This is exactly what I need, but I am missing filtering functionality.

What are your planes in terms of filtering?

How do I change the background and font color of a selected row with CSS?

This here is for mouse over only:
.bbGrid-grid tbody tr.bbGrid-row:hover td{
background-color:#e21a2c;
color:#FFF;
}

Hey,
the sort function in ver 0.8.1 seems not to work properly.
In bbGrid.js 0.6.4 (the one you use for the examples) the bug doesn´t appear.
The problem seemed to be the scoope of THIS in rsortBy (view) and stringComparator (collection).

I get it to work properly by changing "this.sortName" to "this.collection.sortName" in rsortBy .

I'm so sorry but I'm a complete noob trying to learn this stuff.

The examples you gave don't specify how to add the data? How do I format my table?

Basically, can you upload the html files that you used for the examples so I can study them?

Hi,

after a quick check of main demo site, I found that it is OK with IE8, but on 8.5 version,

https://github.com/direct-fuel-injection/bbGrid/blob/master/bbGrid.js#L77
Fails with entitled error.

Hi everybody,

I have tried every thing but i think, wrong somewhere. :(
Could you send me a sample in html?

Thank you,

How to reload content of grid and get new version of json data ? Is there any way to do this by this plugin ?

It can be useful to programtically set some row selection before displaying the grid. This can be used to display the grid a second time to show a previous selection.

Thanks.

It's not clear this functionality works. It appears the functionality only works when actions is not null, but I tried with and without actions, with and without names, and the className I provide does not end up in the grid (on the TD). Does this functionality work only on selection?

Hi,

We are trying to implement bbGrid on our project and we are getting this error inspite of passing the name of the BB Collection (which has the URL param hooked up) :

A "collection" property must be specified

We are using jquery-1.10.2.min.js, Bootstrap v3.1.0. Can you suggest what might be the problem?

Thanks!

How can i filter on the dates using a calender. type works fine. But having a calender will be cool.

see comment in issue #44

Hi,

I am exploring BBGrid but having issues with strange characters showing up in the table footer and pagination. Can you guide me on how to turn on the English version of those messages.

thx
-Malay

Please, im needing urgently know how to use Bbgrid, cos ive tried for hours to set this, but nothing is working, the grid is not appearing on my page, someone can help me please?
Give me your e-mail, so ill send my project for you to check it, i dont know what to do, and my boss is crazy!!! Please help meeeeeee!!!

How to create header grouping?

Is to possible to show the rows as lists. I am working in building an lists of locations to visits and I want the list to be switchable in grid or list.

Hello,
First of all, this library is amazing and I think one of the best backbone grid libraries that exists, thank you for providing such a library!

I am trying to use the filter option using a select box using bbGrid 0.8.2. When I select a filter (i.e. 'open') and then attempt to sort by clicking on a thead, my filter resets to 'All' and does not stick, and not all the models are shown ('open' filter is still applied, but filter select box does not say 'open'). I noticed in your example in your documentation that this issue is not there. I am using jquery 1.8.3, backbone 1.0.0, and bootstrap 2.3.2. I have made some minor modifications to my bbGrid.js in order to fit into my require.js architecture, and have made it AMD compatible. Have you seen this issue before?

Thanks,
Rohit

EDIT: I noticed that in your documentation, you are using bbGrid 0.6.4. When I revert to 0.6.4 in my app, the filter sticking is not an issue. Please have a look at this, Thanks!

Edit #2: Sorry for the continuous edits. I poked at the code a little bit and I noticed the issue is fixed when I make the following modification in the last line of the bbGrid.View onSort() function:

Change: this.renderPage();
to: this.renderPage({silent: true});

Please let me know if there are any issues with this. Thanks!

Is it possible to have a clickable text link within a table cell? When I place a link, link, the default onRowClick handler takes over and the link does not work.

Is there a way to trigger row expand event, e.g ( grid.expand(rowid); )

and nice work by the way.

from your webpage:
Buttons
Example code:

App.ButtonsExampleGrid = new bbGrid.View({
...
buttons: [{
title: 'Show selected',
onClick: function(){
var models = this.view.getSelectedModels();
if( !.isEmpty(models)) {
alert(.first(models).get('name'));
} else {
alert('Nothing');
}
}
}]
});

error:
TypeError: Cannot call method 'getSelectedModels' of undefined
http://direct-fuel-injection.github.io/bbGrid/javascripts/main.js:59

when pressing "show selected"

Hi all, im testing your bbGrid lib, and i have a problem trying to set a input filter.
I define this code an the grid works fine:

var grid = new bbGrid.View({
container: $("#datagrid"),
collection: myCollection,
colModel: [
{title: 'ID', name: 'iduser'},
{title: 'Apellido', name: 'apellido'},
{title: 'Nombre', name: 'nombre'}
],
autofetch: true
});

But, when i put: 'enableSearch: true'. The view not render with error message:
Uncaught TypeError: Cannot read property 'length' of undefined

Any ideas ?

Line 944 should be:

if (option !== undefined)

instead of:

if (option)

Please a need a basic example at how to implement Bbgrid in my application.
Do i have to create a table at first?
I'm putting this code above between the <script language="javascript"></script>:

var myGrid = new bbGrid.View({
container: $('#bbGrid'),
rows: 25,
rowList: [5, 25, 50, 100],
collection: new Backbone.Collection,
colModel: [
{ title: 'Name', index: true, name: 'name', filter: true, filterType: 'input' },
{ title: ' ', index: true, name: 'links', filter: false, filterType: 'input', width: '110px' }
],
onRowClick: function (model) {
$(location).attr('href', '/somepath/' + model.id + '/');
}
});

and i have a div with bbGrid ID, but i can't see the grid on my page, it's not showing up,
What's wrong?
I'll be very thankful by the help.
Thanks in adivance!!

In my bbgrid I am using multiselect flag as true; allow user to select more than one rows. I am also having onRowClick function implemented as shown below. Now when I do double-click on checkbox (created because of multiselect: true), the grid should select the checkbox first and then deselect it! rather it is triggering double click event (treating as row dblclick) hence calling the onRowClick!

new bbGrid.View({
container: '#someid',
collection: someData,
colModel: [....],
multiselect : true,
onRowClick : function() {
// This is called even if I am doing dblClick on checkbox!!!
}
});

Hello,
I have some problems with sorting integers and strings with polish signs.
Anybody have solution for this ?

Keep well,

Exact Version: 9.08112.16421

Tested on two separate machines. None of the grids load on http://direct-fuel-injection.github.com/bbGrid/