[eluser]Unknown[/eluser]
Hi guys,
First thanks you for flexigrid, it's so cool !
I try to do my first page with flexigrid and i have some problems.
I hope you can help me.
I'm french and my english is basic, sorry 
I try to do a field to open a new window with more detail for a line of my table.
In a new window, like a target="_blank" its work fine but when i try to open detail in a facebox, its bug.
See my code :
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>Base Contact</title>
<link rel="stylesheet" href="facebox/facebox.css" media="screen" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
jQuery(document).ready(function($) {
$("#flex1").flexigrid({
url: 'post.php',
dataType: 'xml',
colModel : [
{display: 'Nom', name : 'nom', width : 180, sortable : true, align: 'center'},
{display: 'Prenom', name : 'prenom', width : 120, sortable : true, align: 'center'},
{display: 'Structure', name : 'Nom_de_structure', width : 180, sortable : true, align: 'center'},
{display: 'Teléphone', name : 'tel', width : 130, sortable : true, align: 'center'},
{display: 'Email', name : 'email', width : 180, sortable : true, align: 'center', process: makeLink},
{display: 'Détail', name : 'num', width : 80, align: 'center', process: detail}
],
buttons : [
/*{name: 'Add', bclass: 'add', onpress : test},
{name: 'Delete', bclass: 'delete', onpress : test},*/
{separator: true},
{name: 'A', onpress: sortAlpha},
...
{name: '#', onpress: sortAlpha}
],
searchitems : [
{display: 'Nom', name : 'nom', isdefault: true},
{display: 'Prenom', name : 'prenom'}
],
sortname: "nom",
sortorder: "asc",
usepager: true,
title: 'Contacts',
useRp: true,
rp: 17,
showTableToggleBtn: true,
width: 1000,
height: 487
});
})
function sortAlpha(com){
jQuery('#flex1').flexOptions({newp:1, params:[{name:'letter_pressed', value: com},{name:'qtype',value:$('select[name=qtype]').val()}]});
jQuery("#flex1").flexReload();
}
function makeLink(celDiv){
$(celDiv).html('<a href="mailto:' + $(celDiv).html() + '">' + $(celDiv).html() + '</a>');
}
function detail(celDiv){
$(celDiv).html('<a href="detail.php?id=' + $(celDiv).html() + '" style="text-decoration: none" rel="facebox"><img src="images/valid.png" border="0">Détail</a>');
$('a[rel*=facebox]').facebox({loading_image: 'loading.gif',close_image: 'closelabel.gif'});
}
</head>
<body>
<h1 align="center">Base Contact PNE</h1>
<a href="detail.php?id=1" style="text-decoration: none" rel="facebox"><img src="images/valid.png" border="0">Détail</a>
<table id="flex1" style="display:none"></table>
</body>
</html>
My detail.php work fine, but in this code when it is in a facebox there is a loop which open the page and my fields are print 15x.
Do you know why ? I think my facebox code is not at a good place but i have try a lot of place and i have never fine a good.
I hope you'll understand my problem lol.
Thanks all
Quentin
***************************EDIT************************
Finally i have found a solution by an input and onclick:
Code: function detail(celDiv){
$(celDiv).html('<INPUT type="submit" value="" width="16px" style="background: url(images/add.png) no-repeat; border:0; width:16px;" onclick="jQuery.facebox({ ajax: \'http://intranet/contact/detail.php?id=' + $(celDiv).html() + '\'})">');
}
And it's work
Thanks all
*******************************************************
[eluser]Unknown[/eluser]
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?
[eluser]TheJayL[/eluser]
Just saw this and it blows me away.
I cannot get quick search to run however.
In the examples the full fledged version with search and paging uses post2.php instead of the post.php shown on the page. What is the code that makes this quick search work? I am assuming it is in the post2.php.
I just got this, and it is by far the best listing stuff out there.
For me, to make it work, I have to:
-add ability to sort on multiple columns (shift click)
-change show/hide columns to a right click instead of arrow that pops up
-allow for advanced searching outside of the list itself (multiple parameters etc)
-have page remembering (so if the user sets a width of a column, or hides it, or changes the order, or what page they are on and they leave the page and come back later it will be the way they left it (database values or propbably session).
-provide context menus for actions on a row (get details, delete, revert, edit, etc) but it has to be row specific as not all rows will be created equal.
-allow for multiple lists per page.
phew, looks like I got some work, but this object is a great start!
But back to my point, quick search is not searching, its just returning the whole list like I never searched for a value at all.
*EDIT =====
I saw it: post variable 'query' quicksearch working
[eluser]Unknown[/eluser]
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
[eluser]mandrake[/eluser]
[quote author="paulopmx" date="1211345199"][quote author="swhitlow" date="1211316480"]paulopmx - thanks for the response. Although my main problem was that nothing was showing up in firebug to trace anything. So, no errors were occurring.
However, I was able to find the root of the problem. This is just for anyone else who would want to know - the problem was with prototype. I had a prototype library being loaded. I did have the jquery noConflict mode on but for some reason, it still did not want to cooperate with Flexigrid. If anyone knows a way to have prototype and Flexigrid working together, that would be great.
For now, I have just removed the prototype reference and have been working around it.[/quote]
This must be the same problem encountered with mootools, where mootools is 'extending' all native objects and methods. I will look in to this in my next release.[/quote]
Hi Paulo!
First I would like to say that your flexigrid is great!
But i use Prototype :-(
When new next release?
Thanks
AT@
[eluser]snobo[/eluser]
Paolo, I'm joining the rest of the crew by saluting you for the fantastic Flexigrid! I seriously wish it becomes THE ultimate grid for us to use. Perhaps with a little help of community...
So, I also found an issue, related to the one noted by apr:
[quote author="apr" date="1213236436"]
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);
[/quote]
The abovementioned problem can be corrected very easily similar to the way it is done a few lines lower (#573), so:
Code: $('.pcontrol input',this.pDiv).val(p.page);
$('.pcontrol span',this.pDiv).html(p.pages);
But! I've encountered an interesting situation when having 2 grids on page, one with and another without status bar (pDiv). And how do all the numerous statements like
Code: $('.pPageStat',this.pDiv).html(p.procmsg);
actually work, when a FlexiGrid has no status, and therefore this.pDiv is void? With no context, they all work by referencing the first .pPageStat on page, wherever it may be located (the other flexiGrid in my case).
So, a straightforward way could be prepending all the statements like one mentioned above, scattered around the flexigrid.js, with if (this.pDiv). However, an easier correction worked well for me. Line #819 originally goes like this:
Code: if (p.usepager) g.pDiv = document.createElement('div'); //create pager container
I suggest to drop if (p.usepager). So pDiv is always created, even if usepager is set to false. But in that case, it will still contain nothing, so no status bar will be visible.
my 2 cents
[eluser]niidmore[/eluser]
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: '<input type="checkbox" name="chkAll"
onclick="checkAll(this.checked)"/> 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');} }
}
);
}
});
}
[eluser]snobo[/eluser]
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
[eluser]Unknown[/eluser]
Hey all, I just started playing with flexigrid, and I too, wanted single-select and a couple other things so I implemented them. Below is the code I used to implement :
* single select - only one row is selected at a time
* multiple rows can be selected using the ctrl key. Still trying to figure out how to remove the ugly borders that show up with the Ctrl key.
* two new events onRowSelected and onRowDeselect. The 2nd one is fired when you de-select a selected row.
I want to thank Paulo for an excellent piece of code in Flexigrid.
I also want to thank SeanRock for starting me off on this modification.
Now for the code :
on line 52 where you see :
Code: onSubmit: false // using a custom populate function
add a comma after false and add :
Code: onRowSelected: false, // event to fire when row selected
onRowDeselect: false, //event to fire when row has been deselected
multiSelect: false // can select multiple rows without a modifier key
Then down to line 708, where you see :
Code: .click(
function (e)
{
var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true;
$(this).toggleClass('trSelected');
}
)
and replace that function call with :
Code: .click(
function (e)
{
var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true; //enable default behaviour for links and form elements
$(this).toggleClass('trSelected'); // flip the switch
var selId = this.id.substring(3);
if ( $(this).hasClass('trSelected') ) {
// ToDo: Add functionality to implement shift button
if (!( p.multiSelect || e.ctrlKey )) {
$('tbody tr.trSelected').not(this).removeClass('trSelected'); // only one row should be selected.
}
if (p.onRowSelected) p.onRowSelected(selId, $(this), $(g));
} else { // switch was on, just turned it off
if ( p.onRowDeselect ) p.onRowDeselect(selId, $(this),$(g)); // fire the onRowDeselcted event
// p.onRowSelected(selId,$(this),$(this).parent().parent().parent());
return ;
}
}
)
I hope this helps someone.
Also, where is the proper place to submit patches and feature requests for flexigrid? Hey Paulo, I want to help. Let's get this thing better organized and documented.
--
just my $0.02
[eluser]tirab[/eluser]
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
});
|
