ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Flexigrid - Lightweight but rich data grid

March 28, 2008 10:13am

Subscribe [82]
  • #556 / Aug 12, 2008 10:34am

    TheJayL

    18 posts

    I’m no JSP expert, but wouldn’t it be just any way you get the POST data?

    like,

    request.getParameter("nameOfParam");

    on a completely seperate note:

    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

    $(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.

    Also, in IE (i hate you MS) it seems that the scroll bar is considered outside the bDiv as the function is not being fired on a scroll, but is on any other bDiv click or mouseup function, anyone know of a cure to this?

  • #557 / Aug 13, 2008 11:26am

    flexiUser

    1 posts

    Hi,

    I am trying to send some additional data along with the JSON for populating the grid but I am unsure how to access that additional data.  The returned JSON looks a bit like the following:

    "page": 1,  
    "total": 5,  
    "active": 45,  <-- this is the additional data being sent back to the page from the server
    "rows": [    
    {"id": "200",      "cell": [ ...

     

    Is there a way to access that additional data…preferably in the OnSuccess handler?

  • #558 / Aug 13, 2008 4:18pm

    phplover

    2 posts

    Hi guys,

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

    [Exception… "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMNSHTMLElement[removed]]"  nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)"  location: "JS frame :: <a href="http://localhost/static/js/jquery.js">http://localhost/static/js/jquery.js</a> :: anonymous :: line 22"  data: no]
    <a href="http://localhost/static/js/jquery.js">http://localhost/static/js/jquery.js</a>
    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?

  • #559 / Aug 13, 2008 5:43pm

    sabernar

    2 posts

    When you click on a row, it highlights.  When you click on another row, it highlights while leaving the first row highlighted.  Is there an easy way to only allow one row at a time be highlighted?  Thanks.

  • #560 / Aug 13, 2008 6:10pm

    TheJayL

    18 posts

    ^^^^^
    Yep, he added

    Single Rows Select just use { singleSelect: true } in the options

    in the latest release.

  • #561 / Aug 13, 2008 7:23pm

    sabernar

    2 posts

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

  • #562 / Aug 14, 2008 4:24am

    phplover

    2 posts

    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

    Hi guys,

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

    [Exception… "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMNSHTMLElement[removed]]"  nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)"  location: "JS frame :: <a href="http://localhost/static/js/jquery.js">http://localhost/static/js/jquery.js</a> :: anonymous :: line 22"  data: no]
    <a href="http://localhost/static/js/jquery.js">http://localhost/static/js/jquery.js</a>
    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?

  • #563 / Aug 14, 2008 5:37am

    unexpectedly

    9 posts

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

    Example #3 has the “sform” to handle this…

    Here is what I did:

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

    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

  • #564 / Aug 15, 2008 2:27pm

    lancealtar

    3 posts

    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

  • #565 / Aug 15, 2008 4:44pm

    Volte

    21 posts

    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.

  • #566 / Aug 18, 2008 4:59pm

    mvdesouza

    1 posts

    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.

  • #567 / Aug 20, 2008 12:15pm

    ThanMan

    3 posts

    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 :

    .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

  • #568 / Aug 20, 2008 3:00pm

    daiyna

    3 posts

    First of all, great job on the grid. Im using it on my struts project and it works great.

    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

    $(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.

    When I deleted

    this.rePosDrag();

    in scroll function

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

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

  • #569 / Aug 20, 2008 3:17pm

    TheJayL

    18 posts

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

    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

    .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?

  • #570 / Aug 20, 2008 6:20pm

    unexpectedly

    9 posts

    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

    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

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases