Flexigrid - Lightweight but rich data grid

[eluser]sabernar[/eluser]
Is there a way to dynamically filter the data in the table like http://www.krop.com - thanks.

[eluser]phplover[/eluser]
Hi,

here is the solution: The problem is the Content-Type which is send to the browser. With "application/xhtml+xml" you have the error I post before. But with text/html all works great!

phplover

[quote author="phplover" date="1218673111"]Hi guys,

I think there is a bug... either in jQuery or in Flexigrid. Here is the output of the firebug console:

Code:

[Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMNSHTMLElement[removed]]"  nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)"  location: "JS frame :: http://localhost/static/js/jquery.js :: anonymous :: line 22"  data: no]
http://localhost/static/js/jquery.js
Line 22

This error appears only with flexigrid during the initialization of a table.

I use jQuery 1.2.6 and flexigrid 1.0B3

Can someone help me?[/quote]

[eluser]unexpectedly[/eluser]
[quote author="sabernar" date="1218684185"]Is there a way to dynamically filter the data in the table like http://www.krop.com - thanks.[/quote]

Example #3 has the "sform" to handle this...

Here is what I did:

Code:

&lt;form id="sform" title="type (or clear) your search terms and hit ENTER"&gt;search:<br>&lt;input type="text" name="query" value="" autocomplete="off" /&gt;&lt;br>&lt;?
    $fields='pn,description,price';
        ?&gt;<select name="qtype">&lt;?
        foreach( explode(',', $fields) as $field ){
            ?&gt;<option value="&lt;?= $field ?&gt;">&lt;?= $field ?&gt;</option>&lt;?
        ?&gt;</select>&lt;?
?&gt;&lt;/form&gt;

BUT!! You will need to do some additional work on the post.php, as it's not exactly production-ready, though is more than a great starting point.

I haven't yet worked on having the grid "remember" what has been selected. This is not important for the end product I'm working on... I have implemented flexigrid only on the backend of our website.

Chris

[eluser]lancealtar[/eluser]
Hi Paulo,

I gotta say, Flexigrid is awesome! I really like the way it works and how functional you have made it.

I'm having a problem, and it probably has something to do with my code (n00b alert!). In IE7 & IE6 the flexigrid with ajax call I've written will not display. All of the headers display properly but, none of the data displays correctly. In FF2 & FF3, Safari 3, and Opera 9 everything works like a charm. I've looked through the forums here and tried dang near everything I could find. I've placed it on a page where you can take a look if you have time.

http://apps.bkprecision.com/flexigrid/invt_rpt_test.php
That one is pulling xml. I've tried xml, json and neither work in IE.

Plz, help. :-D

-Lance

[eluser]Volte[/eluser]
My post will get lost here in the some odd 57 pages, but in the slim chance you see it, I'd like to say this is quite impressive.

Once it matures a bit more, (and once I make up my mind whether I want to implement something like this or not) I'll probably be integrating it with CIMyAdmin

Cheers!

volte.

[eluser]Unknown[/eluser]
Hi, guys,
i´m a teacher and i´m trying to use flexigrid in my site. I would like to change the position of the actions buttons (you can see in http://mvsouza.net84.net) to activate a modal window to add, change and delete records. How can i do this? I work in PHP but still am a newbie in ajax. It´s usefull too activate a window with a double click in a record.
I would to use this modal window: http://dev.iceburg.net/jquery/jqModal/
ps.: brazilian not so good in english.

[eluser]ThanMan[/eluser]
Hi Paulo,

Really nice work !! Great Grid !

I'm working on using the Flexigrid combined with ASP.NET C#, with dynamic dataset.
The data is allready loaded in the flexigrid.

Now the thing is.
I'd like to get specific cell values based on the column name i'm giving.
This all should happen on row dblclick event.

The code I have now is :

Code:

.dblclick(
    function (e)
    {
        var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true;
    alert($(this)[0].id.substring(3));
    $(this).addClass('trSelected');
    }
)

This will give me the row id.

But I can't figure out how to get the value of a cell in the selected row of a specific column..

Could you please help me ?

Thanks

[eluser]daiyna[/eluser]
First of all, great job on the grid. Im using it on my struts project and it works great.
[quote author="TheJayL" date="1218566059"]I've noticed how the headers lag in both IE and FF3 behind the columns when horizontally scrolling. This is due to the function rePosDrag() being fired in the custom scroll function.To improve performance I changed the code where the bDiv is set to

Code:

$(g.bDiv)
        .css({ height: (p.height=='auto') ? 'auto' : p.height+"px"})
        .scroll(function (e) {g.scroll();})
    [b].mouseup(function(e){g.rePosDrag();})[/b]
        .append(t)

and took the rePosDrag call in scroll out.

This makes horizontal scrolling work much better as the function is not fired every time the slider moves, only when you are done scrolling. However, it will also trigger if the user does any other action now (like sorting, column moving, row selection, etc).

So I guess, does anyone have feedback as to the detriment to performance or mem usage. Makes scrolling much nicer, but makes the function fire off on any click in the bDiv.[/quote]

When I deleted

Code:

this.rePosDrag();

in scroll function

Code:

scroll: function() {
                    this.hDiv.scrollLeft = this.bDiv.scrollLeft;
                    this.rePosDrag();
            }

there was an obvious change in performance. it almost feels like a bug.

[eluser]TheJayL[/eluser]
^^^^^
I found out that the mouseup event only works for FireFox because IE does not recognize the scroll bar as part of the div. So my scroll function is:

Code:

scroll: function() {
                    this.hDiv.scrollLeft = this.bDiv.scrollLeft;
          if ($.browser.msie)
          {
                      this.rePosDrag();
          }
            },

So it is the way it is in IE.

however at mouseup on setting up the bDiv I added

Code:

.mouseup(function(e){if ($.browser.mozilla) g.rePosDrag();})

This greatly improves performance in FF browsers for me and leaves it unchanged in IE. I guess its whats more important to you, smoother quicker horizontal scrolling, or other actions like row selection taking a little bit longer. I went with smoother scrolling. What is the bug you are talking about though?

[eluser]unexpectedly[/eluser]
[quote author="ThanMan" date="1219263316"]
This will give me the row id.

But I can't figure out how to get the value of a cell in the selected row of a specific column..

Could you please help me ?

Thanks[/quote]

I took care of this by making the cell information part of the td's #id. The way I did it was using the field name and the cell's id and then I parse it in the javascript... but you can use both! Each cell can have an id like this: <td id="widget-34-46.50"> where "widget" is the field name, 34 is the ID of it in my database, and 46.50 is the "value" of the field. Then I split up the text string on the - character. You can use any char that's known to not be in your field info, like the right double quote.

Chris