Part of the EllisLab Network
   
3 of 68
3
Flexigrid - Lightweight but rich data grid
Posted: 01 April 2008 12:54 PM   [ Ignore ]   [ # 21 ]  
Summer Student
Avatar
Total Posts:  1
Joined  04-01-2008

Very good and impressive widget !
I’m quite new to JQuery (coming from mootools)

Is there a way to add a datepicker widget inside your search facility !

Keep the good work.

B.

Profile
 
 
Posted: 01 April 2008 02:51 PM   [ Ignore ]   [ # 22 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  169
Joined  04-23-2007
Kevin Kietel - 01 April 2008 04:34 PM

Great, didn’t figure that out yet…. smile

Is there a possibility to ‘lock’ one or more columns, so that their width is not resizable?

thanks!

Right now. Nope.

But that’s a great Idea, i’ll consider adding it at the next release.

 Signature 

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

Profile
 
 
Posted: 01 April 2008 02:52 PM   [ Ignore ]   [ # 23 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  169
Joined  04-23-2007
bernardo - 01 April 2008 04:54 PM

Very good and impressive widget !
I’m quite new to JQuery (coming from mootools)

Is there a way to add a datepicker widget inside your search facility !

Keep the good work.

B.

No built in facility for that. You can hack the code if you like.

 Signature 

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

Profile
 
 
Posted: 01 April 2008 08:58 PM   [ Ignore ]   [ # 24 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  169
Joined  04-23-2007
hotmeteor - 01 April 2008 01:47 PM

Paulo, bloody awesome. Really. Not sure if you’re looking for requests, as I’m sure your hands are full, but here are a couple anyway…

1. Multi-column sort (see jQuery Tablesorter plugin for what I mean).
2. Inline-editing.

Again, beautiful work.

Thanks.

Great ideas. Not sure I can include this features right now, maybe in a 1.5 release.

 Signature 

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

Profile
 
 
Posted: 01 April 2008 10:28 PM   [ Ignore ]   [ # 25 ]  
Summer Student
Total Posts:  11
Joined  04-01-2008

I really love the idea behind Flixigrid, but i don’t understand how it all fits together and how to set it up. I’ve never used jQuery before so that maybe some of it. Any one up to offering some guidance to a newbie?

Profile
 
 
Posted: 01 April 2008 11:33 PM   [ Ignore ]   [ # 26 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  119
Joined  11-12-2007

Hi CI’ers! Can someone create a user friendly user’s guide about this flexgrid?... I really dont know where to start, and dont know what are the dependencies that I will be needing. Seems it is really an interesting GUI.

Thanks in advance!

 Signature 

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

Profile
 
 
Posted: 02 April 2008 01:37 AM   [ Ignore ]   [ # 27 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  709
Joined  06-07-2007

hey, just noticed your site redesign, looks good smile

I’m thinking about using this instead of TableSorter for CodeExtinguisher. However, I’d like to make a few comments on your latest updates.

First, make sure you keep it simple, when I hover over a header, I see two arrows. When i go to another header, i see two more arrows. It’s unclear which is for what. To add to it, the horizontal arrow is the same across all the headers. The minimize button seems to be useless, couldn’t the user just resize it all the way up?

Second, When the user tries to rearrange the columns, the header hands a good 20px below the cursor, this makes it seem jittery and broken, it’d be nice if the data moved with the header.

 Signature 

jtaby.com

Profile
 
 
Posted: 02 April 2008 03:37 AM   [ Ignore ]   [ # 28 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  169
Joined  04-23-2007
jTaby - 02 April 2008 05:37 AM

hey, just noticed your site redesign, looks good smile

I’m thinking about using this instead of TableSorter for CodeExtinguisher. However, I’d like to make a few comments on your latest updates.

First, make sure you keep it simple, when I hover over a header, I see two arrows. When i go to another header, i see two more arrows. It’s unclear which is for what. To add to it, the horizontal arrow is the same across all the headers. The minimize button seems to be useless, couldn’t the user just resize it all the way up?

Second, When the user tries to rearrange the columns, the header hands a good 20px below the cursor, this makes it seem jittery and broken, it’d be nice if the data moved with the header.

Hi,

Ok for your first issue, the middle arrow tells the user which way the data will be sorted when clicked, the second arrow on the right is a drop down menu, similar on what you see on Windows Vista, this technique has been applied by Ext as well. If it really is much an issue for you, you can easily disable this with a setting:

showToggleBtn false 

The minimize button is useful if you have a lot of instances of flexigrid, and you want to give your user a way to minimize quickly without dragging the vertical resizer. even so, I also give the developer the option to disable this feature by this setting

showTableToggleBtnfalse 

Minimum Height for vertical resizer is default set at 100px, to change this just change it in the setting

minheight24px 

Rearrange the columns puts the removed column below the arrow, to allow the user to see where the column will be placed when dropped. Some test users in a system I’m developing along with this plugin, find it confusing when i’m just dragging along the same headers and not sure if it will drop before of after their target, that’s why their is an additional helper arrow indicating what happens when drop in that particular place.

This is the only behavior that you can’t change with just a setting, the other’s are configurable depending on what you need.

Please take not that, Example 3 tries to show of all the features it currently the plugin have, but you don’t have to use all of them. I’m leaving that to the developer grin.

Finally, thank you for all your comments, I’m glad that your considering using my plugin for your project, I look forward in seeing it there in the future grin.

Paulo

 Signature 

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

Profile
 
 
Posted: 02 April 2008 09:34 AM   [ Ignore ]   [ # 29 ]  
Summer Student
Total Posts:  11
Joined  04-01-2008

This is my html. I’ve downloaded the files from the Flexigrid site but i dont understand how to get data into the grid…any help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<
html>
<
head>
<
title>Phone Directory</title>
<
link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">


</
head>
<
body>

    $(
'.flexme').flexigrid();

</
body>
</
html

apparently my script tags wont show…look here http://stjohns.digiconmediagroup.com/test/

Profile
 
 
Posted: 02 April 2008 01:24 PM   [ Ignore ]   [ # 30 ]  
Summer Student
Total Posts:  22
Joined  04-01-2008
millercj - 02 April 2008 01:34 PM

This is my html. I’ve downloaded the files from the Flexigrid site but i dont understand how to get data into the grid…any help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<
html>
<
head>
<
title>Phone Directory</title>
<
link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">


</
head>
<
body>

    $(
'.flexme').flexigrid();

</
body>
</
html

apparently my script tags wont show…look here http://stjohns.digiconmediagroup.com/test/


@millerjc

you have to add a table element with the classname “flexme:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<
html>
<
head>
<
title>Phone Directory</title>
<
link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">

<
script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>
<script type="text/javascript">
$(
'.flexme').flexigrid();
</script>
</head>
<
body>



<
table class="flexme">
    <
thead>
            <
tr>
                <
th width="100">Col 1</th>
                <
th width="100">Col 2</th>
                <
th width="100">Col 3 is a long header name</th>
                <
th width="300">Col 4</th>

            </
tr>
    </
thead>
    <
tbody>
            <
tr>
                <
td>This is data 1 with overflowing content</td>
                <
td>This is data 2</td>
                <
td>This is data 3</td>

                <
td>This is data 4</td>
            </
tr>
            <
tr>

                <
td>This is data 1</td>
                <
td>This is data 2</td>
                <
td>This is data 3</td>
                <
td>This is data 4</td>
            </
tr>
            
    </
tbody>
</
table>
</
body>
</
html

This is the most simple way to convert a normal table to a ‘flexigrid’ table (like example 1 on http://webplicity.net/flexigrid/).
If you want more features, example 3 offers more flexibility, but you will need experience with ajax/dynamic data/jquery/php/asp

Hope this will help you a bit

 Signature 

jLorem - A Lorem Ipsum Plugin for jQuery

Profile
 
 
   
3 of 68
3