Flexigrid - Lightweight but rich data grid

Flexigrid - Lightweight but rich data grid - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Libraries & Helpers (https://forum.codeigniter.com/forumdisplay.php?fid=22)
+--- Thread: Flexigrid - Lightweight but rich data grid (/showthread.php?tid=7179)

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

Flexigrid - Lightweight but rich data grid - El Forum - 04-07-2008

[eluser]paulopmx[/eluser]
[quote author="ecarsted" date="1207632262"]Hi, Paulo

Looking at the code and stepping in with Firebug, (what a handy tool!),

I see that the correct thing to set is params, not param

Code:
if (p.params)

{

var nparam = {};

$.each(p.params, function() {

nparam[this.name] = this.value;

});

$.extend(param,nparam);

}

596

so now, I am setting

params: {wherestr:"where xxx"},

Thing is though, nparam is not being updated. Hmm, not sure how to fix it.

Eric

ps. Also, not sure how I would change this value on the fly based on user input in a set of form fields.[/quote]

Hi Eric,

You are correct, the proper setting is indeed params. but to configure it you use this format

Code:
params: [{name:'name',value:'paulo'},{name:'lname',value:'marinas'}]

I change it to this format, because using jQuery's serializeMethod uses this same format as well.

for attaching the grid to a form, it is a bit more complicated, but here's a rough idea.
Suppose you have a form like this:

Code:
&lt;form id="formx"&gt;&lt;input type="text" name="name" value="" /&gt;&lt;/form&gt;

you add a setting to flexigrid like this

Code:
onSubmit: onsubmit

then create a function like this

Code:
function onsubmit() {

                var dt = $('#formx').serializeArray();

                $("#flex1").flexOptions({params:dt});

                return true;

            }

this will overwrite the initial value of p.params, so if you have initial value set in, then its probably better to add it to the form as well as hidden inputs.

note the return true in the function, because if you return false, the flexReload action will cancel, this is useful if you want to add a validation in your forms.

then also block the form's submit event to call flexReload instead like this:

Code:
$("#formx").submit(function(){$('#flex1').flexReload();return false;});

Flexigrid - Lightweight but rich data grid - El Forum - 04-08-2008

[eluser]paulopmx[/eluser]
[quote author="davgino" date="1207582946"]Hi Paulo

I realized a problem in flexigrid.

If i have more columns and i want to show or hide columns and if the height of grid is a little bit small , the last columns don't appear.
See the following link: http://contaflux.ro/gestiune/module/flexigrid.php[/quote]

hi davgino,

I see your problem, right now I put every element that flexigrid generates under the .flexigrid class which hides overflow (this is a requirement), is the ability to resize the grid insufficient? I will tackle this usability problem in next release.

Flexigrid - Lightweight but rich data grid - El Forum - 04-08-2008

[eluser]dark_lord[/eluser]
How can I integrate a code where a downloadable link is listed in the table listed as entity(ies) (e.g. Printable_Name) is a link? How can I do that?...

Flexigrid - Lightweight but rich data grid - El Forum - 04-08-2008

[eluser]paulopmx[/eluser]
[quote author="wish_bear" date="1207657823"]How can I integrate a code where a downloadable link is listed in the table like an enitities listed for (e.g. Printable_Name) is a link? How can I do that?...[/quote]

2 ways:

1. You can send the data with a link already in it. This is easier if your not into Javascript. Just remember to handle the quotes and double quotes.

2. In the colModel

Code:
{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},

add a property called process

Code:
{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left', process: makeLink},

then create a function with the name makeLink

Code:
function makeLink(celDiv)

{

       $(celDiv).html('<a href="thisisalinkfolder/' + $(celDiv).html() + '">Link</a>');

}

The assumption here is that what ever data you are passing to that column is what you need to create your link.

Hope this helps. :-)

Flexigrid - Lightweight but rich data grid - El Forum - 04-08-2008

[eluser]dark_lord[/eluser]
[quote author="paulopmx" date="1207658334"][quote author="wish_bear" date="1207657823"]How can I integrate a code where a downloadable link is listed in the table like an enitities listed for (e.g. Printable_Name) is a link? How can I do that?...[/quote]

2 ways:

1. You can send the data with a link already in it. This is easier if your not into Javascript. Just remember to handle the quotes and double quotes.

2. In the colModel

Code:
{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},

add a property called process

Code:
{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left', process: makeLink},

then create a function with the name makeLink

Code:
function makeLink(celDiv)

{

       $(celDiv).html('<a href="thisisalinkfolder/' + $(celDiv).html() + '">Link</a>');

}

The assumption here is that what ever data you are passing to that column is what you need to create your link.

Hope this helps. :-)[/quote]

This is great dude.. Thanks...

By the way? Are you a Filipino? hehehe... :-)

Flexigrid - Lightweight but rich data grid - El Forum - 04-08-2008

[eluser]Armorfist[/eluser]
Hey Paulo,
Sorry if I'm being annoying but can you take a look at my earlier post? Big Grin

Thanks

Flexigrid - Lightweight but rich data grid - El Forum - 04-08-2008

[eluser]ecarsted[/eluser]
Heya Paulo,

Thanks for the help.

Been fighting with a ton of mistakes I had made, but I finally got it working.

I was getting weird behavior using the submit method (the page would reload before the
data was processed, so I just put a button that called the following function.

Code:
function onsearch() {

                var dt = $("#search_params").serializeArray();

                var pg = new Object;

                pg.name ='page';

                pg.value = 1;

                dt.push(pg);

                $("#emp_table").flexOptions({params:dt});

                $("#emp_table").flexReload(); 

                return true;

            }

I need to set the page back to 1 because the number of results returned will change.
I don't set the onSubmit in the form.

Works like a champ. I have three field in the form, one text input, and 2 drop down lists, the submit button and a reset button.

Post looks like :

company 0
department 2
name ar
page 1
qtype
query
rp 15
sortname Last_Name
sortorder asc

On the server side I process the results by stinging together a where clause.

TY again. I think I can move on to other things now. lol.

Eric

Flexigrid - Lightweight but rich data grid - El Forum - 04-08-2008

[eluser]paulopmx[/eluser]
[quote author="Armorfist" date="1207664568"]Hey Paulo,
Sorry if I'm being annoying but can you take a look at my earlier post? Big Grin

Thanks[/quote]

Hi Armorfist, try hacking the CSS like this

Code:
.bDiv

{

     min-height: 200px;

}

I have to say that i haven't tested this personally, just off the top of my head. But it should work for all browsers, with the exception of IE6.

Flexigrid - Lightweight but rich data grid - El Forum - 04-08-2008

[eluser]paulopmx[/eluser]
[quote author="ecarsted" date="1207668353"]Heya Paulo,

Thanks for the help.

Been fighting with a ton of mistakes I had made, but I finally got it working.

I was getting weird behavior using the submit method (the page would reload before the
data was processed, so I just put a button that called the following function.

Code:
function onsearch() {

                var dt = $("#search_params").serializeArray();

                var pg = new Object;

                pg.name ='page';

                pg.value = 1;

                dt.push(pg);

                $("#emp_table").flexOptions({params:dt});

                $("#emp_table").flexReload(); 

                return true;

            }

Flexigrid - Lightweight but rich data grid - El Forum - 04-08-2008

[eluser]ecarsted[/eluser]
[quote author="paulopmx" date="1207673722"]
Great Job Eric.

I would have use different technique, but as long as it works for you, and that the plugin is useful for you then I'm happy about it. :-).

Paulo[/quote]

I am sure you would! I just started learning Javascript on Saturday, still having trouble with the prototypal nature of the language and syntax. I will say I have learned a ton from reading your code and stepping through it with the debugger. Coffees on the way, to say TY.

Eric

ps. BAH!, still got a bug, clobbered my paging. Lack of sleep kills.

My mistake was to add page to params. What is the correct way to call
flexOptions with just one option to set, i.e. page:1 ?