Flexigrid - Lightweight but rich data grid

[eluser]adwin[/eluser]
[quote author="swhitlow" date="1210500885"]Hello. First I have to say - what an incredible control! This is absolutely great!

Second, what would be the easiest way for me to call an onclick event to show the current id of the row?

I am basically just needing a quick alert box displaying the current row that has been clicked.

Thanks![/quote]

It would be easier if you assign onclick using ajax processing.
I won't rely on flexigrid api for assigning it.

[eluser]swhitlow[/eluser]
[quote author="adwin" date="1210531188"][quote author="swhitlow" date="1210500885"]Hello. First I have to say - what an incredible control! This is absolutely great!

Second, what would be the easiest way for me to call an onclick event to show the current id of the row?

I am basically just needing a quick alert box displaying the current row that has been clicked.

Thanks![/quote]

It would be easier if you assign onclick using ajax processing.
I won't rely on flexigrid api for assigning it.[/quote]

adwin - thanks for the reply! Could you provide a quick example of this? I had tried to do this with just a

$("#flexigrid").click( function() {
alert("test");
});

But, it did not seem to work. Any help would be greatly appreciated! Thanks!

[eluser]adwin[/eluser]
[quote author="swhitlow" date="1210538373"]
adwin - thanks for the reply! Could you provide a quick example of this? I had tried to do this with just a

$("#flexigrid").click( function() {
alert("test");
});

But, it did not seem to work. Any help would be greatly appreciated! Thanks![/quote]

I won't use that way ... I prefer to render the onclick directly like this

Code:

<?php
....
$counter = 0
foreach($results as $data){
.... // do whatever you want here ...
$links = "&lt;a href='#' class='myclass' onclick='dosomething($counter);'&gt; test </a>";
... // do anything else .. produce json data ?
$counter++;
}
...
?&gt;

but if you still prefer the jquery event style ... i would recommend you to use attr.

Code:

<?php
// change above with
$links = "<a href='#' class='myclass' callerid='$counter'> test </a>";
?&gt;

and use jquery like this
$(".myclass").click( function() {
     alert($(this).attr('callerid'));
});

I won't mess the flexigrid.js library because when it updated I don't want to change my codes

[eluser]adwin[/eluser]
Another way ... tested
#flex1 = is my table id ($('#flex1').flexigrid()

Code:

$('.flexigrid #flex1 tr').each(
function(x){
$(this).bind('click',function(){alert($(this).attr('id'));});
});

or ... getting more fun ?

Code:

$('.flexigrid #flex1 tr').each(
    function(x){
        $(this).bind('click',
            function(){
                className = $(this).attr('class');              
                if(className.indexOf('trSelected') != -1){
                    alert('selected on id ' + $(this).attr('id'));
                } else
                {
                    alert('unselected on id ' + $(this).attr('id'));
                }
            });
});

the code has bug, if the class is empty, attr() will return undefined .... weird ?
jquery's bug or it just a common ?

[eluser]Roberto Miguez[/eluser]
Hey, I need a help!

I have a database that returns a xml response to populate the grid. Works fine on IE but I got an error on Firefox. I saw that I receive the answer from database correctly (I put an alert in addData function) but the data doesn't show on table. I receive this message: "Displaying NaN to NaN of undefined items".

The structure of my table is JSON and the data that comes from database is XML. Anyone know how to solve this? I tried but I don't know what to do more.

Thank you!

[eluser]somemilk[/eluser]
Paulo, if you read this, don't you think it would be better to use "button" tag for the "clear" in quick search instead of input type="button"? That would make it easier to style buttons and input fields separately.
Anyway thanks for the great control!

[eluser]Unknown[/eluser]
Hi Paulo,
Much qudos for this widget. I have a couple of needs and I wonder if you are scheduled to implement them.
I need the ability to select columns (like in excel) the default action is to sort by that column but it would be great to select the column, not sure if you could add a checkbox to the header.
Another need is the ability to have static columns. Not just fixed width but static so that when the grid scrolls from left to right the columns stay put. This of course would mean a complete redesign of the html output for the grid as you could no longer have one large table.
If anyone has attempted a similar thing it would be great to see an implemntatio, if not I guess my fingers are gonna have to get dirty!!!

Cheers

[eluser]Unknown[/eluser]
I notice the 'json' required for flexigrid is very non standard... (the xml too)

Code:

{
page: 1,
total: 239,
rows: [
{id:'AD',cell:['AD','ANDORRA','Andorra','AND','20']},
{id:'AE',cell:['AE','UNITED ARAB EMIRATES','United Arab Emirates','ARE','784']},
{id:'AF',cell:['AF','AFGHANISTAN','Afghanistan','AFG','4']},
{id:'AG',cell:['AG','ANTIGUA AND BARBUDA','Antigua and Barbuda','ATG','28']},
{id:'AI',cell:['AI','ANGUILLA','Anguilla','AIA','660']},
{id:'AL',cell:['AL','ALBANIA','Albania','ALB','8']},
{id:'AM',cell:['AM','ARMENIA','Armenia','ARM','51']},
{id:'AN',cell:['AN','NETHERLANDS ANTILLES','Netherlands Antilles','ANT','530']},
{id:'AO',cell:['AO','ANGOLA','Angola','AGO','24']},
{id:'AQ',cell:['AQ','ANTARCTICA','Antarctica','','']},
{id:'AR',cell:['AR','ARGENTINA','Argentina','ARG','32']},
{id:'AS',cell:['AS','AMERICAN SAMOA','American Samoa','ASM','16']},
{id:'AT',cell:['AT','AUSTRIA','Austria','AUT','40']},
{id:'AU',cell:['AU','AUSTRALIA','Australia','AUS','36']},
{id:'AW',cell:['AW','ARUBA','Aruba','ABW','533']}]
}

any way to get it to take a more normal format? Like what JSONObject.java outputs as suggested from json.org?


http://json.org/object.gif
json example


EDIT:

I'm able to generate json format like the above, BUT I have built this into a portlet (LifeRay) and for some reason when I call this code behind as a struts action it wraps my result with a <DIV> tag that makes the grid not work... any help on making flexigrid ignore the div wrapper and just process the json result inside?

Thanks.

[eluser]frantic[/eluser]
First off, I've started using Flexigrid a while ago, and am very impressed. Great job Paulo!

I am currently trying to customize it in a unique way, and was wondering if anyone could give me some advice.

So, this is the situation... I am calling a dynamic XML file via AJAX to populate the grid. The XML looks something like the sample below. The output can sometimes include links. However, right now all I get is the values of the 'uri' and 'name' nodes as text.

My question is, how do I create a link based on my XML file? (I would really appreciate any hints that involve only changing flexigrid.js and/or the addition of jQuery code.)


Thanks.





XML file

Code:

<grid>

    <row>

        <cell>
            &lt;link&gt;
                <name>test</name>
                <uri>test/testing.index</uri>
            &lt;/link&gt;
        </cell>

    </row>

</grid>

[eluser]Unknown[/eluser]
Hi Forum,

I'm new to the whole CI and has downloaded the flexigrid. It's is awesome. I been playing around with it and wondering how do I get my text wrap within the cell. I have a long text in some of my database fields and would like the text to wrap within the cell. Any help would be greatly appreciated.

Thanks