Part of the EllisLab Network
   
52 of 62
52
Flexigrid - Lightweight but rich data grid
Posted: 25 July 2008 07:21 AM   [ Ignore ]   [ # 511 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  108
Joined  10-18-2007
justinkelly - 24 July 2008 06:51 PM
paulopmx - 24 July 2008 03:20 AM

Hi guys,

I didn’t really design flexigrid to use % sizes as the dragndrop and resizing functions are dependent on accurate per pixel measurements.

Paulo

Thanks for the reply Paulo

its more of an visual appeal factor - i use 100% width grid for my project and having columns in px will leave a blank space in the grid on a larger screen (which doesn’t look to nice)

from what i can remember open rico grid does some funky % -> px calculation based on grid size to handle resize etc and columns based on %

question: is there an easy way to find the px width of a flexigrid? - if so then i can look at writing a % -> px type conversion type

If anyone else has any suggestions i would appreciate hearing them

Cheers

Justin

Hello Justin,
This is actually very simple:

With jquery COOKIE plugin, I retrieve the screen resolution width and store it in a cookie:

[removed]
$(document).ready(function() {
    
$.cookie('scrres', screen.width);
});
[removed]

Then with PHP all you have to do is get that cookie and calculate the column size based on the percentage.

function calculate_column_size($column_size)
    
{
        $screen_res
= get_cookie('scrres'); //This is a codeigniter function from the "cookie" helper
        
if ($screen_res != FALSE)
            
$usable_screen = ($screen_res);
        else
            
$usable_screen = (1024); //Default resolution
        
        
return ($column_size*($usable_screen/100)); //Calculate in pixels and return
    
}

You also can probably do this with javascript only.
Hope it helps!

 Signature 

Eye View Design - Design Studio
CI FlexiGrid - FlexiGrid on CI Implementation

Profile
 
 
Posted: 25 July 2008 07:22 AM   [ Ignore ]   [ # 512 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  108
Joined  10-18-2007
unexpectedly - 24 July 2008 08:07 PM

@Armorfist: This is something of a hack, however I find it effective for one of my edit-in-place tables (implemented solely as form elements in TDs, written by the php)

Anyhow, I use javascript to add hidden elements to the HTML of the form I use:

var loc_text="   You've selected this location: "+loc_brand[idx[0]]+' > '+loc_page[idx[1]]+' > '+loc_group[idx[2]];
var
pButton='<input type="button" class="right" id="changeButton">';

temp='<input type="hidden" name="action" value="doThisToItems" ><input type="name" name="loc" value="'+loc+'" ><br>'+temp+loc_text+'<br>'+pButton;

$(
'#container').empty().append(temp).fadeIn();

#container is the DIV around my form (external to flexigrid). loc is a string representing the coordinates of a location: 1,8,235 which are the IDs of each layer of my data where we are currently sitting. loc_text is the text label I present to the user to confirm their location choice. the loc_XXXX arrays are in the javascript, built dynamically on page load, have the human names for each of the location IDs. All of this is done independent of flexigrid, and I’m implementing checkboxes to add the row to the location or just delete the row.

As this is a sequential process, if you subsequently reverse one of your entries, the most latest addition is what is passed on POST.

Example:

<input type="hidden" value="modify" name="action"/>
<
input type="hidden" value="523X" name="pn-3"/>
<
input type="hidden" value="3" name="mfg_id-7"/>
<
input type="hidden" value="224B" name="pn-9"/>
<
input type="hidden" value="0" name="mfg_id-7"/>

I loop through $_POST and do:

list($tableLookup, $id) = explode("-", $_POST['name'] )


the ‘action’ => ‘modify’ pair tells that script what to do. I then have a lookup hash to get the table name from the “name”. Then it sets the VALUE to what is passed in. Ultimately, there is only one item with name=“mfg_id-7” and it’s value will be 0.

smile Chris

(another post follows…)

Thanks unexpectedly! Going take a look at it later today wink

 Signature 

Eye View Design - Design Studio
CI FlexiGrid - FlexiGrid on CI Implementation

Profile
 
 
Posted: 25 July 2008 10:52 AM   [ Ignore ]   [ # 513 ]  
Summer Student
Total Posts:  18
Joined  06-13-2008

I did something, and in IE I get a runtime error now at this line of jquery:

if ( set )
            
elem[ name ] = value;

It looks like it is creating the buttons and thead, but I get “undefined” printed before both things.  Anyone else experience this kind of thing?

Never you mind.  I included the array indexOf function which messed us IE something fierce.  Altered my code to change my arrays to strings before my indexOf and now works again.  Pain in the butt Microsoft! Follow the STANDARDS!!!!!

Profile
 
 
Posted: 25 July 2008 03:30 PM   [ Ignore ]   [ # 514 ]  
Summer Student
Total Posts:  1
Joined  07-25-2008
budylove - 25 July 2008 06:00 AM

Hi,
First things, you’ve done a really good works!
But I have a question.
How to force a column to line break the text at the end of the cellules

try white-space:normal; on the divs wink

Profile
 
 
Posted: 25 July 2008 05:26 PM   [ Ignore ]   [ # 515 ]  
Summer Student
Total Posts:  9
Joined  07-24-2008
adwin - 11 May 2008 11:05 AM

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

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

Hi Adwin,

Thanks for your posts. This ended up being the only way I could get outside communications from clicks within the flexigrid. I have sample site up here: http://ca-cycleworks.com/dev/flexigrid/

I was really hoping for “something simple” via jQuery, but nothing else I have read in this thread functions for me.

Thanks again! Now I can get to work. wink
Chris

Profile
 
 
Posted: 26 July 2008 07:05 PM   [ Ignore ]   [ # 516 ]  
Summer Student
Total Posts:  3
Joined  07-23-2008
paulopmx - 25 July 2008 02:39 AM
Wallcrawler - 24 July 2008 09:17 AM
paulopmx - 24 July 2008 03:46 AM
Wallcrawler - 23 July 2008 09:03 PM

Hi guys!

First of all, flexigrid is a superb jquery plugin!

But i´m facing some troubles to get it work perfectly.

Please see the page http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/contas_pagar_quitacao.asp, and click in “mostrar” button.

The flexgrid is shown, but the margin of each header didn’t match with the rows. If you access this page using IE7 more visual problems is shown. What have i done wrong?

Otherwise, how can i put a function to be executed when the user select one row?

Thank you!

Can’t access your link. But it could be a CSS conflict problem.

for single select, use the new option { singleSelect: true } when creating your flexigrid.

Sorry about that! I´ve just unlocked the page, you can access now (http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/contas_pagar_quitacao.asp).

About css conflict i´m afraid that is not the problem. In that page, only the flexigrid css file is included.

In IE7 under winxp professional sp3, my page show the following error:
Character: 4
Error: Invalid Argument
Code: 0
Url: http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/grid_baixa.asp

Sorry too for my poor english, but in wanted to say “how can i start a javascript function when the user select a row?”

Single select i already use it.

Thank you!

You didn’t load any rows so i can’t verify if you have a problem with rows lining up with headers. But I also so this error using firebug:

parent.document.getElementById(“qtd_registro”) is null
[Break on this error] parent.document.getElementById(’...qtd_registro’)[removed] = ‘0’;

Look it up, it might be the cause of your problems.

This is just because the document.gerElementById is located outside of the iframe.


If you access this link: http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/contas_pagar_quitacao.asp, and click in “mostrar” button, you´ll be able to open the grid_baixa.asp, in this iframe, with the rows, and will show my problem too.

i´ve revised all the code to see if i have an css problem, or something, but i haven´t found nothing wrong, and my firebug didn´t show nothing wrong.

Profile
 
 
Posted: 26 July 2008 07:27 PM   [ Ignore ]   [ # 517 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  165
Joined  04-23-2007
Wallcrawler - 26 July 2008 07:05 PM
paulopmx - 25 July 2008 02:39 AM
Wallcrawler - 24 July 2008 09:17 AM
paulopmx - 24 July 2008 03:46 AM
Wallcrawler - 23 July 2008 09:03 PM

Hi guys!

First of all, flexigrid is a superb jquery plugin!

But i´m facing some troubles to get it work perfectly.

Please see the page http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/contas_pagar_quitacao.asp, and click in “mostrar” button.

The flexgrid is shown, but the margin of each header didn’t match with the rows. If you access this page using IE7 more visual problems is shown. What have i done wrong?

Otherwise, how can i put a function to be executed when the user select one row?

Thank you!

Can’t access your link. But it could be a CSS conflict problem.

for single select, use the new option { singleSelect: true } when creating your flexigrid.

Sorry about that! I´ve just unlocked the page, you can access now (http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/contas_pagar_quitacao.asp).

About css conflict i´m afraid that is not the problem. In that page, only the flexigrid css file is included.

In IE7 under winxp professional sp3, my page show the following error:
Character: 4
Error: Invalid Argument
Code: 0
Url: http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/grid_baixa.asp

Sorry too for my poor english, but in wanted to say “how can i start a javascript function when the user select a row?”

Single select i already use it.

Thank you!

You didn’t load any rows so i can’t verify if you have a problem with rows lining up with headers. But I also so this error using firebug:

parent.document.getElementById(“qtd_registro”) is null
[Break on this error] parent.document.getElementById(’...qtd_registro’)[removed] = ‘0’;

Look it up, it might be the cause of your problems.

This is just because the document.gerElementById is located outside of the iframe.


If you access this link: http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/contas_pagar_quitacao.asp, and click in “mostrar” button, you´ll be able to open the grid_baixa.asp, in this iframe, with the rows, and will show my problem too.

i´ve revised all the code to see if i have an css problem, or something, but i haven´t found nothing wrong, and my firebug didn´t show nothing wrong.

Hi Wallcrawler,

I see your problem. You need to specifiy the widths of your columns <th width=”(place with here)”>, because you don’t define any colModel and only transforming a static table. Sorry but this is a requirement.

Paulo

 Signature 

A Better and more Flexible Paging Solution for CI
Automatic config[base_url]

Profile
 
 
Posted: 26 July 2008 07:28 PM   [ Ignore ]   [ # 518 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  165
Joined  04-23-2007
unexpectedly - 25 July 2008 05:26 PM
adwin - 11 May 2008 11:05 AM

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

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

Hi Adwin,

Thanks for your posts. This ended up being the only way I could get outside communications from clicks within the flexigrid. I have sample site up here: http://ca-cycleworks.com/dev/flexigrid/

I was really hoping for “something simple” via jQuery, but nothing else I have read in this thread functions for me.

Thanks again! Now I can get to work. wink
Chris

Actually there is “something simple” via jQuery, its called the process method in the colModel. search it around this threat as i’ve put a lot of examples on how to use it.

Paulo

 Signature 

A Better and more Flexible Paging Solution for CI
Automatic config[base_url]

Profile
 
 
Posted: 27 July 2008 09:13 AM   [ Ignore ]   [ # 519 ]  
Summer Student
Total Posts:  2
Joined  07-27-2008

I wonder how can I change the paramters posted to the server
after the flexgrid is called. The page remains the same but the parameters
change based on user actions.

The user case is:
When a user clicks a link, if flexgrid is not constructed, create it.
If flexgrid exists, change the parameters sent to the server.

I know how to acomplish the first part, but do not know how to alter
the paramters.

Profile
 
 
Posted: 27 July 2008 05:38 PM   [ Ignore ]   [ # 520 ]  
Summer Student
Total Posts:  9
Joined  07-24-2008
paulopmx - 26 July 2008 07:28 PM

Actually there is “something simple” via jQuery, its called the process method in the colModel. search it around this threat as i’ve put a lot of examples on how to use it.
Paulo

Hi Paulo, thanks for your time in replying! I did try process method based on the examples I could find, but wasn’t able to get it working. I did get solution for onClick() and have moved on past that moment.

anakreon - 27 July 2008 09:13 AM
When a user clicks a link, if flexgrid is not constructed, create it.
If flexgrid exists, change the parameters sent to the server.

I know how to acomplish the first part, but do not know how to alter
the paramters.

You mean like changing this:

$("#flex1").flexigrid
(
{
url
: 'post2.php',
dataType: 'json',
colModel : [
    {display
: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
    
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
    
{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
    
{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
    
{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
    ]
,
buttons : [
    {name
: 'Add', bclass: 'add', onpress : test},
    
{name: 'Delete', bclass: 'delete', onpress : test},
    
{separator: true}
    ]
,
searchitems : [
    {display
: 'ISO', name : 'iso'},
    
{display: 'Name', name : 'name', isdefault: true}
    ]
,
sortname: "iso",
sortorder: "asc",
usepager: true,
title: 'Countries',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
}
);

What about your php/asp/perl page rendering the HTML having the ability to dynamically rewrite the above code? I have it with javascript enough times… smile

Profile
 
 
   
52 of 62
52
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 719, on June 06, 2008 10:16 AM
Total Registered Members: 62419 Total Logged-in Users: 34
Total Topics: 76663 Total Anonymous Users: 4
Total Replies: 414145 Total Guests: 463
Total Posts: 490808    
Members ( View Memberlist )