Flexigrid - Lightweight but rich data grid

[eluser]danielaquino[/eluser]
In my opinion it would be nice to have flexigrid packaged as a self containing folder. Currently I go through the flexigrid download and reconfigure the paths so it looks like this:

flexigrid/
- js/
- css/
- images/

This way flexigrid is a self containing package that I drop into my site...

Much more practical than css/images and what not!!

Perhaps even another idea could come about so that flexigrid styles can be put into packages...

Something like...

flexigrid/
- js/
- styles/
-- default/
--- css/
--- images/
-- black/
--- css/
--- images/

etc...

Just a thought !

[eluser]Unknown[/eluser]
Hi paulopmx,
This is great! I've tried the CI example from http://flexigrid.eyeviewdesign.com/. But it seems not to
display the data from the country table. My database settings are correct. Have you experienced the same thing? Looking forward for your reply.

Thanks!

[eluser]Martin_[/eluser]
Hi Paulo,

thanks for your fantastic plugin! Great Job!

I need Flexigrid to work with ASP.NET and for testing purposes I set up a response page that always sends out the same response, no matter what the client requests. I set up the response just like Synergiq´s which can be found here

For Flexigrid I used

Code:

$("#flex1").flexigrid
            (
            {
            url: 'TestResponse.aspx',
            dataType: 'json',
            colModel : [
            {display: 'ID', name : 'id', width : 50, sortable : true, align: 'left'},
            {display: 'First Name', name : 'firstname', width : 100, sortable : true, align: 'left'},
            {display: 'Last Name', name : 'lastname', width : 100, sortable : true, align: 'left'},
            {display: 'Color', name : 'color', width : 100, sortable : true, align: 'left'},
            {display: 'Height', name : 'height', width : 100, sortable : true, align: 'left'},
            {display: 'Middlename', name : 'middlename', width : 100, sortable : true, align: 'left'},
            {display: 'Age', name : 'age', width : 100, sortable : true, align: 'left'},
            {display: 'Sex', name : 'sex', width : 100, sortable : true, align: 'left'},
            {display: 'Address 1', name : 'address1', width : 100, sortable : true, align: 'left'},
            {display: 'Address 2', name : 'address2', width : 100, sortable : true, align: 'left'},
            {display: 'Address 3', name : 'address3', width : 100, sortable : true, align: 'left'},
            {display: 'Address 4', name : 'address4', width : 100, sortable : true, align: 'left'},
            {display: 'Address 5', name : 'address5', width : 100, sortable : true, align: 'left'},
            {display: 'Country', name : 'country', width : 100, sortable : true, align: 'left'},
            {display: 'Region', name : 'region', width : 100, sortable : true, align: 'left'},
            {display: 'Is Dead', name : 'is_dead', width : 100, sortable : true, align: 'left'}
                ],
            buttons : [
                {name: 'Add', bclass: 'add', onpress : test},
                {name: 'Delete', bclass: 'delete', onpress : test},
                {separator: true}
                ],
            searchitems : [
                {display: 'ID', name : 'id', isdefault: true},
                {display: 'First Name', name : 'firstname'}
                ],
            sortname: "id",
            sortorder: "asc",
            usepager: true,
            title: 'Contacts',
            useRp: true,
            rp: 15,
            showTableToggleBtn: true,
            width: 800,
            height: 200
            }
            );
            
            function test(com,grid)
            {
                if (com=='Delete')
                    {
                        confirm('Delete ' + $('.trSelected',grid).length + ' items?')
                    }
                else if (com=='Add')
                    {
                        alert('Add New Item');
                    }            
            }

        $('b.top').click
        (
            function ()
                {
                    $(this).parent().toggleClass('fh');
                }
        );

The problem I´ve got now is that Flexigrid says "Processing, please wait..." forever as if it could not retrieve data from the response page, which works fine if you open it manually.

What am I doing wrong? Anybody else have similar problems?

Thanks in advance.
Martin

[eluser]noon[/eluser]
yeah martin, your JS code looks fine. Check your TestResponse.aspx a few times. I recommend installing firebug for firefox. In the console tab you can expand information from POST requests and see what parameters are being sent and what is being received. Setting some defaults in TestResponse.aspx for the variables being sent by POST and debugging until your output is a good JSON object would probably fix any issue youre having. List your POST vars and response text here if youre still having problems.

Some things to note:
- multi-line strings will not work unless you use a continuation character ("\")
- there mustn't be anything besides your JSON object
- sending headers is not required
- anything that must be escaped inside a JS string must be escaped inside any strings in your object

hth

[eluser]Martin_[/eluser]
Thanks noon,

I will check this out asap and let you know!

Martin

[eluser]Martin_[/eluser]
Hi All,

problem solved, my JSON response had an invalid character in the response text.... shame on me!

Another thing:

Is it possible to toggle the Flexigrid between two "modes"? I would like to be able to show two tables, only one at a time. When I create two tables and show/hide them, Flexigrid shows two tables but only the grid gets hidden/shown.

Thanks in advance!

Martin

EDIT: I helped myself creating a DIV around two different Flexigrids and then hiding/showing them.

[eluser]Charles Bandes[/eluser]
Is it possible to make the rows clickable so that I can attach an action to the row? (Ferinstance, click a name, run an ajax call to bring up data in another div)

[eluser]danielaquino[/eluser]
In the buttons hash/row can I put a drop down ?

[eluser]Armorfist[/eluser]
Hello paulo,
Any news on the new release?
I'm kinda anxious!

[eluser]Unknown[/eluser]
i have made a few changes to make the grid supporting shift-click.

for example,
1, select record 1
2, shift and click on record 5
3, record 1-5 will be selected

changes in the addRowProp function:

Code:

addRowProp: function()
{
    var lastSelected;
    var rows = $('tbody tr',g.bDiv);

    $('tbody tr',g.bDiv).each(function(){
        $(this)
        .click(function(e){
            var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true;
            if(e.shiftKey)
            {
                var last = rows.index(lastSelected);
                var first = rows.index(this);

                var start = Math.min(first, last);
                var end = Math.max(first, last);

                for(var i = start; i < end; i++)
                {
                    if($(lastSelected).hasClass('trSelected'))
                        $(rows[i]).addClass('trSelected');
                    else
                        $(rows[i]).removeClass('trSelected');
                }
            }
            else
            {
                lastSelected = this;
                $(this).toggleClass('trSelected');
            }
        })