Flexigrid - Lightweight but rich data grid

[eluser]paulopmx[/eluser]
[quote author="snobo" date="1213648399"]Paolo,

when trying to use the existing flexigrid events you have foreseen, I stumbled upon the inability to reference the flexigrid object from my own callback functions. The reason is you call events in the context of parameter object, like:

Code:

if (p.onRpChange) p.onRpChange(+this.value);

So in my callback functions this will refer to p, but how I can reach for the grid itself? Wouldn't it rather make sense to call event callbacks the following way?

Code:

if (p.onRpChange) p.onRpChange.call(t,+this.value);

Thus setting the flexigrid object as a context. What do you think? Any objections/pitfalls?

The other question is the approach of calling user event callbacks: in addition to default (built-in) events, or replacing them. Currently, in some cases, you go the latter way; therefore, if I need to add my own functionality, while keeping the default behaviour intact, I must copy your code in my own callbacks and reuse it. Not necessarily the best idea perhaps... Well, I guess this require separate discussion and possible rethinking of the flexigrid event system... Maybe next time [/quote]

Hi snobo,

Yes the original idea with the callbacks was to create your own, rather than extend, thats why there is no way of going back to grid itself. I mainly added this API to allow people apprehensive about using Ajax on their development, so onRPChange, onChangeSort, and onChangePage, was supposed to allow them to modify the URL or make another post, then just re-render the page.

Anyway, you can still reference the flexigrid, just by calling it with flexOptions method.

Paulo

[eluser]paulopmx[/eluser]
[quote author="tirab" date="1213808106"]Hi everyone, and thanx Paulo for Flexigrid, great.

Here is my problem.

The little button at the bottom of the grid (grip ?) to resize the grid is not working as expected. If I try to drag it down the grid becomes very long and then it is no more resizable (unless I reload the page).

The sample on your page works fine, and I've noticed a difference: my grid hasn't the "hGrip" which is in your sample page.

Any ideas ?

Thanx

Here some code:

Code:

var model_view = [
        { display:'Seriale', name:'newserial',
          width:fs_s, align:'left' },
        { display:'Nome', name:'pcname',
          width:fs_s, align:'center' },

...
and other vars ...

Code:

$("#servers").flexigrid({
            height:     table_height,
            width:      table_width,
            url:        '/cgi-bin/mfii.pl',
            datatype:   'xml',
            colModel:   model_view,
            sortname:   sortfield,
            sortorder:  'asc',
            params:     configparams,
            buttons:    bottoni,
            usepager:   true,
            title:      titolo,
            useRP:      true,
            rp:         15,
            rpOptions:  [15,25,50,100],
            pagestat:   'Visualizzazione da {from} a {to} di {total}',
            showToggleBtn:      true,   // menu per scegliere quali campi visualizzare
            showTableToggleBtn: true,   // bottone collapse table
            searchitems:        campiricerca
        });

[/quote]

Hi,

the hGrip is actually for horizontal resizing, which is only available when the grid is set to resizable, and width is set not se to 'auto'.
now i don't know what table_width, value is, but maybe you can show me a url, so i can check it out.

[eluser]paulopmx[/eluser]
[quote author="apr" date="1213236436"]First of all, thank you Paulo for Flexigrid, it rocks!

I think I found a little issue, if you have more than one flexigrids on one page, the page number and number of pages get copied to all the flexigrids based on the last Ajax request.

I believe the problem is in:

Code:

// around line #547
      $('.pcontrol input').val(p.page);
      $('.pcontrol span').html(p.pages);

I think we need some kind of per-flexigrid ID.

Interesting enough, the pagestat (Displaying {from} to ...) work fine.

Is there an easy workaround or something I'm missing?[/quote]

Yes i think i resolve this problem a few post ago, by changing it to

Code:

// around line #547
      $('.pcontrol input', this.pDiv).val(p.page);
      $('.pcontrol span',this.pDiv).html(p.pages);

[eluser]paulopmx[/eluser]
[quote author="wzhyu" date="1213444243"]how i can add a url in cell.


hi,thanks u ,for u demo.but i have a problem.
how i can add a url in cell,such as “this grid is prowerful grid”.it will be title,then ,i click this title, it will skip new page.show detailed information of this title.

thanks again[/quote]

You can add it in the JSON and XML data before sending, or you can use the process API in the colModel, there is a sample in this thread somewhere.

[eluser]paulopmx[/eluser]
[quote author="niidmore" date="1213633875"]Hello Folks,
I am trying to show the results in the Flexigrid for the list item selected from the <SELECT>, however for some reason it is only picking up the results and showing in the grid at the first event, when I wanted to view details for second list it is not doing anything.
Please can someone look into my code and advice me?
Many thanks for your help and your help is much appreciated.
Regards
Sam

function listViewer(listID, param1)
{ alert(param1); // it picks up the param values but it just do not process the flexigrid
$(listID).flexigrid
({
url: 'list_proxy.asp?a=results',
colModel : [
{display: ' ', name : 'chkDelete', width : 30, sortable : false, align: 'left'},
//{display: '&lt;input type="checkbox" name="chkAll"

onclick="checkAll(this.checked)"/&gt; All', width : 30},
{display: 'Notes', name : 'notes', width : 50, sortable : false, align: 'left'},
{display: 'Contact ', name : 'pe_rev_name', width : 150, sortable : true, align:

'left'},
{display: 'Compnay Name ', name : 'co_name', width : 200, sortable : true, align: 'left'},
{display: 'Flag ', name : 'action_flag', width : 150, sortable : true, align: 'left'},
{display: 'Group ', name : 'co_group', width : 200, sortable : true, align: 'left'}


],
buttons : [
{name: 'Delete', bclass: 'delete', onpress : test},
// {name: 'Select All', bclass: 'add', onpress : test},
//{name: 'DeSelect All', bclass: 'delete', onpress : test}

],
sortname: '',
sortorder: 'asc',
usepager: false,
title: 'List Manager - Titles',
useRp: true,
rp: 1000,
query : param1+'&Fields=ref_no,notes,pe_rev_name,co_name,action_flag,co_group',
showTableToggleBtn: true,
width: 760,
height: 350,
onSuccess:function()
{
$(".edit_area").editable(
function(value, settings) { return(value); },
{
submit : "OK",
indicator : "process..........",
tooltip : "Click to edit...",
style : "inherit",
callback : function (value, settings){if

($(this).hasClass('trSelected')){alert('selected');} }
}
);
}
});

}[/quote]

Hi,

You are trying to reCreate flexigrid on the fly upon select change, which is not really recommendable. Try my sample on how to attach a form in this url http://webplicity.net/flexigrid/sample1.html

Then add an event to the onSelect with something like $(listID).flexOptions({newp:1}).flexReload();

Hope this helps.

Paulo

[eluser]mrpaul[/eluser]
[quote author="paulopmx" date="1214026008"]
Hi,

You are trying to reCreate flexigrid on the fly upon select change, which is not really recommendable. Try my sample on how to attach a form in this url http://webplicity.net/flexigrid/sample1.html

Then add an event to the onSelect with something like $(listID).flexOptions({newp:1}).flexReload();

Hope this helps.

Paulo[/quote]

This looks awesome man... EXACTLY what I was looking for. Is there anyway to NOT include the submit button? As in once you change the Select's value or once you check a box, can it reload flex?

[eluser]paulopmx[/eluser]
[quote author="mrpaul" date="1214033348"][quote author="paulopmx" date="1214026008"]
Hi,

You are trying to reCreate flexigrid on the fly upon select change, which is not really recommendable. Try my sample on how to attach a form in this url http://webplicity.net/flexigrid/sample1.html

Then add an event to the onSelect with something like $(listID).flexOptions({newp:1}).flexReload();

Hope this helps.

Paulo[/quote]

This looks awesome man... EXACTLY what I was looking for. Is there anyway to NOT include the submit button? As in once you change the Select's value or once you check a box, can it reload flex?[/quote]

yes you can do 1 of two things,

1. you can trigger the submit, by doing adding this to the onchange event of select control:

Code:

<select onselect="$(this).parents('form').trigger('submit')" >

2. or

Code:

<select onselect="$('#flexigridid').flexigrid({newp:1}).flexReload();" >

1 method is more appropriate than the other, it depends on your form.

Paulo

[eluser]mrpaul[/eluser]
Wow that was easy
Thanks A lot Paulo.

Now another question I have.

So say you dont want to have any pages, but the table should load as you scroll down. Anyway thats possible? It should be in the next release

Ill try to implement it, but as you can tell, not the best coder here...

[eluser]paulopmx[/eluser]
[quote author="mrpaul" date="1214035703"]Wow that was easy
Thanks A lot Paulo.

Now another question I have.

So say you dont want to have any pages, but the table should load as you scroll down. Anyway thats possible? It should be in the next release

Ill try to implement it, but as you can tell, not the best coder here...[/quote]

So you want to load the grid but not the data yet right?

Thats built in already, just add this to your flexigrid settings

Code:

autoload : false

[eluser]mrpaul[/eluser]
No i mean, like it should autoload the table. Then instead of having pagination, just load the rows when you scroll down. So itll keep adding more and more rows when you scroll. Does that make sense.

Check this if you need an example of what im talking about: http://tinyurl.com/545xl9

Start scrolling down that table of results and it pops open the loading pic and updates.

Let me know if that makes sense.