Thread

i try the “CodeIgniter example”,it stops at “processing please wait”,no data shows

Hi guys,
paulopmx, your flexigrid is great!
But I have one question about it. I want to make an automatic grabbing of column names from the database and create a loop in colModel, but I’m not sure how to insert the data to colModel:[].
For example:

function get_column_names(){
var col_mod = Array();
for(var i=0; i<cols_arr.length; i++){
        col_mod<i> = '{display: \''+cols_arr<i>+'\', name : \''+cols_arr<i>+'\', width : 40, sortable : true, align: \'center\'}';
    }
return col_mod;
}

My question is, how to insert an array col_mod to colModel:[]?

Sorry if my English is not perfect 😊

OK, i know I am probably going to take heat for this, but here we go. For reasons I’d rather not get into,  I am using both Mootools and jQuery in the development of an app.

check it out:

http://impact.accountbuilder.com/AB2/flexigrid/index.html?moo=y

there is a link at the bottom to turn off the Mootools and see the Flexigrid work without the “undefined” issues.
Anyone have a work around for this? Is it as simple as changing some $eventw or $ refs in flexigrid.js? Any ideas?

(oh and i just found the whole thing, mootools or not doesn’t load in PC Firefox. The Flexgrid i have behind the firewall is working the same as the IE, I don’t know why the link above on PC Ff doesn’t work.)

Thanks everyone!

(if you intend to just suggest I only use one framework, I know, I get it. )

jah,

jquery seems to be not loading properly with mootools or otherwise. It could be a comment thing, can you try removing the comments?

Paulo

i removed the comments and it is still “undefined”. is this one of the many namespace issues i have read about?

thanks for looking at this with me.

Hi Paulo,

Nice work!!

Had a look through posts and couldnt see a solution (assuming there is one)

I just implemented a model…i have 2 tables and i would like to use paging on both the tables.

However, the 2 paging boxes seem to interact. Although the data in each table is properly redisplayed with each paging, when you change a page BOTH page numbers are changed….

ie if you go from Page 1 to Page 2 on 2nd table, the Page no on 1st table changes to a 2 too.

They dont apppear to be independent…or have i not included some parameters?
is this work-roundable?

Thx in advance 😊

Again, nice work.

Hi Paulo, may i suggest a fix 😊

The behaviour in previous post seems to persist.

Digged into code and found the cause

Current code

buildpager: function(){ //rebuild pager based on new properties
            
            $('.pcontrol input').val(p.page);
            $('.pcontrol span').html(p.pages);
            
            var r1 = (p.page-1) * p.rp + 1; 
            var r2 = r1 + p.rp - 1; 
            
            if (p.total<r2) r2 = p.total;
            
            var stat = p.pagestat;
            
            stat = stat.replace(/{from}/,r1);
            stat = stat.replace(/{to}/,r2);
            stat = stat.replace(/{total}/,p.total);
            
            $('.pPageStat',this.pDiv).html(stat);
            
            },

and i changed to

buildpager: function(){ //rebuild pager based on new properties
            
            $('.pcontrol input',this.pDiv).val(p.page);     //fixed here
            $('.pcontrol span',this.pDiv).html(p.pages);   // fiexed here

// just reference to parent el needed to be included :blush:
            
            var r1 = (p.page-1) * p.rp + 1; 
            var r2 = r1 + p.rp - 1; 
            
            if (p.total<r2) r2 = p.total;
            
            var stat = p.pagestat;
            
            stat = stat.replace(/{from}/,r1);
            stat = stat.replace(/{to}/,r2);
            stat = stat.replace(/{total}/,p.total);
            
            $('.pPageStat',this.pDiv).html(stat);
            
            },

Hope it helped 😊

Hi Paulo, may i suggest a fix 😊

The behaviour in previous post seems to persist.

Digged into code and found the cause

Current code

buildpager: function(){ //rebuild pager based on new properties
            
            $('.pcontrol input').val(p.page);
            $('.pcontrol span').html(p.pages);
            
            var r1 = (p.page-1) * p.rp + 1; 
            var r2 = r1 + p.rp - 1; 
            
            if (p.total<r2) r2 = p.total;
            
            var stat = p.pagestat;
            
            stat = stat.replace(/{from}/,r1);
            stat = stat.replace(/{to}/,r2);
            stat = stat.replace(/{total}/,p.total);
            
            $('.pPageStat',this.pDiv).html(stat);
            
            },

and i changed to

buildpager: function(){ //rebuild pager based on new properties
            
            $('.pcontrol input',this.pDiv).val(p.page);     //fixed here
            $('.pcontrol span',this.pDiv).html(p.pages);   // fiexed here

// just reference to parent el needed to be included :blush:
            
            var r1 = (p.page-1) * p.rp + 1; 
            var r2 = r1 + p.rp - 1; 
            
            if (p.total<r2) r2 = p.total;
            
            var stat = p.pagestat;
            
            stat = stat.replace(/{from}/,r1);
            stat = stat.replace(/{to}/,r2);
            stat = stat.replace(/{total}/,p.total);
            
            $('.pPageStat',this.pDiv).html(stat);
            
            },

Hope it helped 😊

Great job guys. Thanks.

Me again Paulo…

same with using a Search tool on a table with multiple tables on page 😖

The search tool behaviour (ie opening and closing) is duplicated in other tables

Same fix as before i guess… just need to hard-wire referencing

I noticed that in firefox the column headers were slightly smaller causing them to be left shifted…

Using firebug I was able to see that the div inside of td’s had an offset of 1, Where the div’s inside of the th’s did not…

I’m not really sure why the issue is only in firefox but adding a margin seemed to give it that 1px it needed to line back up…

.flexigrid div.hDiv th div { margin:1px; }

Although I don’t think this is a good solution.

It would be good to have bot the th’s and td’s both have the same properties…

Any ideas?

I can provide some pictures if you want to see the issue…

P.S.

Why is a second table used for the headers ?  Just Wondering…

Great job!

Hello Paulo,

Don’t know if it was suggested, but is it possible to implement in the next release key combos like CTRL + CLICK selects the elements and if you click the first element click SHIFT + CLICK the last element it selects all? Much like windows explorer behavior.

Thanks

Me again Paulo…

same with using a Search tool on a table with multiple tables on page 😖

The search tool behaviour (ie opening and closing) is duplicated in other tables

Same fix as before i guess… just need to hard-wire referencing

Thanks again slothy. just change this

$('.pSearch',g.spDiv)

to this

$('.pSearch',g.pDiv)

Hello Paulo,

Don’t know if it was suggested, but is it possible to implement in the next release key combos like CTRL + CLICK selects the elements and if you click the first element click SHIFT + CLICK the last element it selects all? Much like windows explorer behavior.

Thanks

Actually there is a shift+drag feature to select/deselct on the current release. Surprise 😊.

I might change this behavior, i’m still observing how people use my grid.

I noticed that in firefox the column headers were slightly smaller causing them to be left shifted…

Using firebug I was able to see that the div inside of td’s had an offset of 1, Where the div’s inside of the th’s did not…

I’m not really sure why the issue is only in firefox but adding a margin seemed to give it that 1px it needed to line back up…

.flexigrid div.hDiv th div { margin:1px; }

Although I don’t think this is a good solution.

It would be good to have bot the th’s and td’s both have the same properties…

Any ideas?

I can provide some pictures if you want to see the issue…

P.S.

Why is a second table used for the headers ?  Just Wondering…

Great job!

sure send me some shots.

Seems like Flexigrid has now become a better option for people looking for js data grids as Ext recently announce that it was moving to GPL 3.0

I noticed that in firefox the column headers were slightly smaller causing them to be left shifted…

Using firebug I was able to see that the div inside of td’s had an offset of 1, Where the div’s inside of the th’s did not…

I’m not really sure why the issue is only in firefox but adding a margin seemed to give it that 1px it needed to line back up…

.flexigrid div.hDiv th div { margin:1px; }

Although I don’t think this is a good solution.

It would be good to have bot the th’s and td’s both have the same properties…

Any ideas?

I can provide some pictures if you want to see the issue…

P.S.

Why is a second table used for the headers ?  Just Wondering…

Great job!

sure send me some shots.

To note I’m using html 4.0 strict where all examples I have seen people have used xhtml…

Is this an issue?

Here are the photos…
http://picasaweb.google.com/mr.danielaquino/Temp/photo#5192437596347091074

Is there anyway I could have flexigrid have a height of 100% just like the unspecified width goes to 100% ?