Thread

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/ff6c05aac9260457aa8ba48ad3bf43ff.jpg
or see it on the attached files on the left

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

How could I do this?

Best regards

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!

@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+'" >
'+temp+loc_text+'
'+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.

😊 Chris

(another post follows…)

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

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

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 😉

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

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

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

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.

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.

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… 😊

hello,
i’m going to use flexigrid for my new programs.
however, i would like to dynamically parse the grid’s attributes to add new functions to the grids (printing, csv output, etc).
i’ve passed the all day trying to get the colModel definition but i didnt succeed.
i want to get the colModel definition, the sortname & sortorder attributes, in javascript, so that i can generate the sql command coresponding to the user choices once he had played with the grid appearance…
maybe someone here can help me ?

I actually don’t understand why you need the grid’s attributes to add new functions of (printing, csv output, etc).

But to get the attributes try this custom api method

$.fn.flexAttr = function(p) {

        return this.each( function() {
                if (this.grid) return this.p;
            });

    };

Thanks for the answer. i need it because i want to know what columns remains after the user had rearrange his grid, and what is the new sort criteria.
i can parse the DOM generated but i think it would be more accurate to get these informations directly from the attributes of the flexigrid component.

I have try to implement your function but when i call it by : jQuery(’#mygrid’).flexAttr(‘title’); i get an [Object] instead of the title attribute of the grid.

I do not want to change the initilization of flexgrid.
Nor can I have a server side script generate the code.

What I need is after the grid is created and initilized,
when a user clicks some links, change the parameters flexgrid
sends to the server and reload the data.

In pseudocode would be:
function onUserClick(id) {
$('#flexgrid_table').params({category_id: id});
  $(’#flexgrid_table’).reloadData();
}

Is it possible to alter the parameters *after* the grid is created?
Is there a function which would force the component to reload it’s data (like the refresh button
the component displayes)?

Thanks for you replay

This code chunk was giving me an error in IE6.  I commented it out and do not get the error anymore.  On top of that, I see no change to the grid, so what exactly does this code segment do??

else if (!g.colresize) {

                                    /*var nv = $('th:visible',g.hDiv).index(this);
                                    var onl = parseInt($('div:eq('+nv+')',g.cDrag).css('left'));
                                    var nw = parseInt($(g.nBtn).width()) + parseInt($(g.nBtn).css('borderLeftWidth'));
                                    nl = onl - nw + Math.floor(p.cgwidth/2);

                                    $(g.nDiv).hide();$(g.nBtn).hide();

                                    $(g.nBtn).css({'left':nl,top:g.hDiv.offsetTop}).show();

                                    var ndw = parseInt($(g.nDiv).width());

                                    $(g.nDiv).css({top:g.bDiv.offsetTop});

                                    if ((nl+ndw)>$(g.gDiv).width())
                                        $(g.nDiv).css('left',onl-ndw+1);
                                    else
                                        $(g.nDiv).css('left',nl);

                                    if ($(this).hasClass('sorted'))
                                        $(g.nBtn).addClass('srtd');
                                    else
                                        $(g.nBtn).removeClass('srtd');*/

                                    }

Hi,
I’m new here and just want to say thank you to Paulo. Secondly, I am trying to make a button that make the list printable, i.e list everything from the query without using pager. I am just wondering how to do that if anyone can help.
Thanks