Flexigrid - Lightweight but rich data grid

[eluser]Xiomay[/eluser]
[quote author="paulopmx" date="1208493472"][quote author="Xiomay" date="1208458167"][quote author="Xiomay" date="1208441282"]thanks for the quick reply but it unfortunately doesnt work.

what kind of parameters i should so set within this brackets?

Code:

var flex = $('#table-1').flexigrid({set parameters here});

shall put these codes in the flexigrid.js? or in my own js-script file?

and this code brings error:

Code:

flex.grid.switchCol(7,5);

this method

Code:

switchCol: function(cdrag,cdrop) { //switch columns
...
}

is to swap the columns table, am i right?[/quote]
Now i did it .. but i can only mov the <tbody>, the <thead> still remains at the same position


its like this:

Code:

function swapCol(id){
    var flex = $('#'+id).flexigrid({});
    flex.moveColumn(1,9);
}
$.fn.moveColumn = function(c1,c2) { // function to test
     return this.each( function() {
     if (this.grid) this.grid.switchCol(c1,c2);
     });
}; //end test

[/quote]

Great Effort Xiomay! Try adding this:

Code:

$.fn.moveColumn = function(c1,c2) { // function to test
     return this.each( function() {

                            if (c1>c2)
                                $('th:eq('+c2+')',this.grid.hDiv).before($('th:eq('+c1+')',this.grid.hDiv));
                            else
                                $('th:eq('+c2+')',this.grid.hDiv).after($('th:eq('+c1+')',this.grid.hDiv));
                            

     if (this.grid) this.grid.switchCol(c1,c2);
     });
};

[/quote]

AWESOME it works!
thanks a lot man.

[eluser]dah[/eluser]
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/fle...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. )

[eluser]Unknown[/eluser]
I am moving over from ExtJS. I really like what you have done. I like the way the search comes up and the way you can select sorting, etc. Great work! I have one problem though. I have a grid set up and working on FF 2 Mac but I get an error in IE7 XP. The error is occurring on line 664 of the 1.0b2 source:

if (this[removed]=='') this[removed] = '&nbsp;';

I've checked my JSON data and it is valid with no extra commas. I somewhat confused because according to Visual Web Developer 2008 'this' is a valid TD element. Any ideas?

Thanks.

[eluser]paulopmx[/eluser]
[quote author="cgriffin" date="1208568698"]I am moving over from ExtJS. I really like what you have done. I like the way the search comes up and the way you can select sorting, etc. Great work! I have one problem though. I have a grid set up and working on FF 2 Mac but I get an error in IE7 XP. The error is occurring on line 664 of the 1.0b2 source:

if (this[removed]=='') this[removed] = '&nbsp;';

I've checked my JSON data and it is valid with no extra commas. I somewhat confused because according to Visual Web Developer 2008 'this' is a valid TD element. Any ideas?

Thanks.[/quote]

Hi cgriffin,

Its easier for me to detect the error if I can see the app running, can you give me a link.

Paulo

[eluser]paulopmx[/eluser]
[quote author="dah" date="1208567077"]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/fle...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. )[/quote]

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

[eluser]Unknown[/eluser]
i try the "CodeIgniter example",it stops at "processing please wait",no data shows

[eluser]Unknown[/eluser]
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:

Code:

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

[eluser]dah[/eluser]
[quote author="paulopmx" date="1208581171"][quote author="dah" date="1208567077"]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/fle...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. )[/quote]

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[/quote]


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.

[eluser]slothy[/eluser]
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.

[eluser]slothy[/eluser]
Hi Paulo, may i suggest a fix

The behaviour in previous post seems to persist.

Digged into code and found the cause

Current code

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

Code:

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 :)
            
            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