Flexigrid - Lightweight but rich data grid

[eluser]paulopmx[/eluser]
[quote author="danielaquino" date="1208976747"][quote author="paulopmx" date="1208926483"][quote author="danielaquino" date="1208913679"]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![/quote]

sure send me some shots.[/quote]


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

I'm afraid xhtml strict is required. I can't support too many standards, because supporting xhtml alone requires me to handle differences in opera, ie6, ie7, safari, and firefox. supporing html as well might multiply that to 2.

[eluser]paulopmx[/eluser]
[quote author="danielaquino" date="1208977116"]Is there anyway I could have flexigrid have a height of 100% just like the unspecified width goes to 100% ?[/quote]

Right now nope.

[eluser]danielaquino[/eluser]
[quote author="paulopmx" date="1208977207"][quote author="danielaquino" date="1208976747"][quote author="paulopmx" date="1208926483"][quote author="danielaquino" date="1208913679"]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![/quote]

sure send me some shots.[/quote]


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

I'm afraid xhtml strict is required. I can't support too many standards, because supporting xhtml alone requires me to handle differences in opera, ie6, ie7, safari, and firefox. supporing html as well might multiply that to 2.[/quote]

Ok I switched over to xhtml and even created a little mock example. For some reason I'm still seeing this issue when I don't see it on your main page, or in other examples...

https://dev.ispbx.com/dan/flexigrid/

[eluser]paulopmx[/eluser]
[quote author="danielaquino" date="1208983402"]

Ok I switched over to xhtml and even created a little mock example. For some reason I'm still seeing this issue when I don't see it on your main page, or in other examples...

https://dev.ispbx.com/dan/flexigrid/[/quote]

Your target element is a div, it should be a table.

[eluser]Unknown[/eluser]
Hi guys, I found flexigrid a few days ago, and I think it's great. I had been wondering if it were possible to make it select only 1 row at a time, and I saw that many other people were asking for this functionality. So, I sat down this afternoon and worked out a solution that seems to work (IE7/8, and FF2).
First, add a new property to the

Code:

p = $.extend({
selOne: true,
...

array (line 19).

Then, I added this method:

Code:

selNone: function() {
//go through each row in the table, and make sure it is not selected
                $('tbody tr',this.bDiv).each(
                    function() {
                        $(this).removeClass('trSelected');    
                    }
                    );
                return true;
            },

to line 95 right before the fixHeight method.

Lastly, inside the `addRowProp` method, there is a click handler, add:

Code:

if (p.selOne)
                                        {
                                            if (!$(this).hasClass('trSelected'))
                                            {
                                                g.selNone();
                                                $(this).toggleClass('trSelected');    
                                            } else {
                                                g.selNone();
                                            }
                                        } else {
                                            $(this).toggleClass('trSelected');
                                        }

after

Code:

var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true;

(line 718)
Then, change the mousedown handler to

Code:

.mousedown(
                                function (e)
                                    {
                                        if (!p.selOne)
                                        {
                                            if (e.shiftKey)
                                            {
                                            $(this).toggleClass('trSelected');
                                            g.multisel = true;
                                            this.focus();
                                            $(g.gDiv).noSelect();
                                            }
                                        }
                                    }
                            )

(Line 727)
I think that I got all my changes on here. Try it out and tell me what you think.

--Andrew

[eluser]davgino[/eluser]
[quote author="trmbne2000" date="1209026695"]Hi guys, I found flexigrid a few days ago, and I think it's great. I had been wondering if it were possible to make it select only 1 row at a time, and I saw that many other people were asking for this functionality. So, I sat down this afternoon and worked out a solution that seems to work (IE7/8, and FF2).
First, add a new property to the

Code:

p = $.extend({
selOne: true,
...

array (line 19).

Then, I added this method:

Code:

selNone: function() {
//go through each row in the table, and make sure it is not selected
                $('tbody tr',this.bDiv).each(
                    function() {
                        $(this).removeClass('trSelected');    
                    }
                    );
                return true;
            },

to line 95 right before the fixHeight method.

Lastly, inside the `addRowProp` method, there is a click handler, add:

Code:

if (p.selOne)
                                        {
                                            if (!$(this).hasClass('trSelected'))
                                            {
                                                g.selNone();
                                                $(this).toggleClass('trSelected');    
                                            } else {
                                                g.selNone();
                                            }
                                        } else {
                                            $(this).toggleClass('trSelected');
                                        }

after

Code:

var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true;

(line 718)
Then, change the mousedown handler to

Code:

.mousedown(
                                function (e)
                                    {
                                        if (!p.selOne)
                                        {
                                            if (e.shiftKey)
                                            {
                                            $(this).toggleClass('trSelected');
                                            g.multisel = true;
                                            this.focus();
                                            $(g.gDiv).noSelect();
                                            }
                                        }
                                    }
                            )

(Line 727)
I think that I got all my changes on here. Try it out and tell me what you think.

--Andrew[/quote]
Super Andrew.

[eluser]Unknown[/eluser]
Hi Paolo.

First of all, congratulations for your hard work, your plugin is awesome :wow: .

I'd like to use it in my current project, which is a track&trace;interface for a transporter. It's a web based java application witch uses Struts/hibernate with an AS400 database. I use the DWR library for AJAX calls.

So i'd like to know if i can use your plugin in some JSP's to retrieve the initial datas, and then DWR calls to refresh it?

Has someone tried to do something similar?

PS: Excuse me in advance for my english

[eluser]noon[/eluser]
I can't seem to find a way for regular HTML tables to be sortable. Or are only JSON tables sortable?

[eluser]Roberto Miguez[/eluser]
This grid is really amazing. Thank you!

I got the code that Synergiq made to use with asp (http://jamesowers.co.uk/asp-tutorials/57...-with-asp/) but unfortunately, I'm getting an error when I execute it on IE. I'm using the example code without modifications. The error that I got stay below:

Line: 403
Char: 8
Error: 'id' is null or not an object
Code: 0

And my grid stay blank without the data from the database. I checked the test.asp (file with the response from the database) and works perfectly. On firefox all file works perfectly and I see my grid working with data inside. And when I try to change the sortname: "id" to firstname or lastname, my IE freeze and needs to restarted. Could someone help me with this issue, please?

My test page stay at http://www.robertomiguez.com.br/flexgrid/default.asp

Thank you and best regards,
Roberto Miguez

[eluser]Roberto Miguez[/eluser]
Ok, James Owers gave me the necessary corrections. It is working now. Thank you James!