Flexigrid - Lightweight but rich data grid

[eluser]Unknown[/eluser]
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

An example will be better than my English

That's what I have
http://images4.hiboox.com/images/3008/ff...bf43ff.jpg
or see it on the attached files on the left

And that's what I want
http://images4.hiboox.com/images/3008/b4...aaf824.jpg
or see it on the attached files on the right

How could I do this?

Best regards

[eluser]Armorfist[/eluser]
[quote author="justinkelly" date="1216961466"][quote author="paulopmx" date="1216905639"]

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[/quote]

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[/quote]

Hello Justin,
This is actually very simple:

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

Code:

[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.

Code:

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!

[eluser]Armorfist[/eluser]
[quote author="unexpectedly" date="1216966026"]
@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:

Code:

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='&lt;input type="hidden" name="action" value="doThisToItems" &gt;&lt;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:

Code:

<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:

Code:

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.

Chris

(another post follows...)[/quote]
Thanks unexpectedly! Going take a look at it later today

[eluser]TheJayL[/eluser]
I did something, and in IE I get a runtime error now at this line of jquery:

Code:

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!!!!!

[eluser]Unknown[/eluser]
[quote author="budylove" date="1217001659"]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
[/quote]
try white-space:normal; on the divs ;-)

[eluser]unexpectedly[/eluser]
[quote author="adwin" date="1210539953"]
I won't use that way ... I prefer to render the onclick directly like this

Code:

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

[/quote]

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.
Chris

[eluser]Wallcrawler[/eluser]
[quote author="paulopmx" date="1216989553"][quote author="Wallcrawler" date="1216927021"][quote author="paulopmx" date="1216907210"][quote author="Wallcrawler" date="1216883029"]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/desenvol...itacao.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![/quote]

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.[/quote]

Sorry about that! I´ve just unlocked the page, you can access now (http://www.goldmaxbrasil.com.br/desenvol...itacao.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/desenvol..._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![/quote]

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.[/quote]

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


If you access this link: http://www.goldmaxbrasil.com.br/desenvol...itacao.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.

[eluser]paulopmx[/eluser]
[quote author="Wallcrawler" date="1217135157"][quote author="paulopmx" date="1216989553"][quote author="Wallcrawler" date="1216927021"][quote author="paulopmx" date="1216907210"][quote author="Wallcrawler" date="1216883029"]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/desenvol...itacao.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![/quote]

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.[/quote]

Sorry about that! I´ve just unlocked the page, you can access now (http://www.goldmaxbrasil.com.br/desenvol...itacao.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/desenvol..._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![/quote]

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.[/quote]

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


If you access this link: http://www.goldmaxbrasil.com.br/desenvol...itacao.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.[/quote]

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

[eluser]paulopmx[/eluser]
[quote author="unexpectedly" date="1217042762"][quote author="adwin" date="1210539953"]
I won't use that way ... I prefer to render the onclick directly like this

Code:

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

[/quote]

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.
Chris[/quote]

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

[eluser]anakreon[/eluser]
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.