Flexigrid - Lightweight but rich data grid

[eluser]Martin_[/eluser]
Can somebody please explain, why sorting by clicking on the columns does not work in IE7? Firefox does the job but IE doesn´t...

Thanks in advance.
Martin

Code:

$("#flexTime").flexigrid
            (
            {
            url: 'polling/EventLogResponse.aspx?Mode=TimeLine',
            dataType: 'json',
            colModel : [
            {display: 'Line', name : 'EventLog_ID', width : 70, sortable : true, align: 'left'},
            {display: 'Date/Time', name : 'EventDateTime', width : 110, sortable : true, align: 'left'},
            {display: 'Time Offset', name : 'Offset', width : 80, sortable : true, align: 'left'},
            {display: 'Condition', name : 'EventState', width : 100, sortable : true, align: 'left'},
            {display: 'Category', name : 'EventName', width : 180, sortable : true, align: 'left'},
            {display: 'Source', name : 'Name', width : 140, sortable : true, align: 'left'},
            {display: 'Description', name : 'EventDescription', width : 250, sortable : true, align: 'left'}
                ],
            buttons : [
                {name: '<img src=images/lightbulb.ico> Occurences Mode', bclass: 'add', onpress : OccMode},
                {name: '<img src=images/clock.ico>&nbsp; Timeline Mode', bclass: 'delete', onpress : TimeMode},
                {separator: true}
                ],
            searchitems : [
                {display: 'Event Log ID', name : 'EventLog_ID'},
                {display: 'Device', name : 'Name', isdefault: true},
                {display: 'Event Description', name : 'EventDescription'}
                ],
            sortname: "el.EventLog_ID",
            sortorder: "asc",
            usepager: true,
            title: 'Event Log (Timeline Mode)',
            useRp: true,
            rp: 15,
            showTableToggleBtn: true,
            width: 1020,
            height: 600
            }
            );

[eluser]Armorfist[/eluser]
[quote author="hehachris~" date="1209591023"]i have made a few changes to make the grid supporting shift-click.

for example,
1, select record 1
2, shift and click on record 5
3, record 1-5 will be selected

changes in the addRowProp function:

Code:

addRowProp: function()
{
    var lastSelected;
    var rows = $('tbody tr',g.bDiv);

    $('tbody tr',g.bDiv).each(function(){
        $(this)
        .click(function(e){
            var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true;
            if(e.shiftKey)
            {
                var last = rows.index(lastSelected);
                var first = rows.index(this);

                var start = Math.min(first, last);
                var end = Math.max(first, last);

                for(var i = start; i < end; i++)
                {
                    if($(lastSelected).hasClass('trSelected'))
                        $(rows[i]).addClass('trSelected');
                    else
                        $(rows[i]).removeClass('trSelected');
                }
            }
            else
            {
                lastSelected = this;
                $(this).toggleClass('trSelected');
            }
        })

[/quote]

Great! Going to test this later.
Thanks

[eluser]danielaquino[/eluser]
Is it possible to have flexigrid update content only instead of destroying all the rows and recreating them ?

[eluser]danielaquino[/eluser]
Why is the refresh button and the quick search bundled into pagination ?

[eluser]tayson[/eluser]
You could add rowexpander! =)

What about this?

Tayson, from BR.

[eluser]danielaquino[/eluser]
[quote author="danielaquino" date="1209519721"]In the buttons hash/row can I put a drop down ?[/quote]

So I basically figured out a nice little hack to add your own html directly to flexigrid's button bar.

Basically if you make a placeholder button like so:

{bclass: 'custom_element'}

Then you can simply use flexigrid's onSuccess callback to select this item and insert your own html into it, like so:

onSuccess: function(){ $(".custom_element").html($('<select></select>')) }

Although I find this to be a very bad way of doing things...

I would think it would be good if an "id" attribute for a button could be specified then I wouldn't have to treat a class like an id...

Or better yet it would be nice if the api had a means of passing a reference of an element to inject into the grid...

Also it only seems appropriate if the onSuccess function passed a reference to the flexigrid table that has completed...

What do you guys think?

Anyone come up with another way?

[eluser]Roberto Miguez[/eluser]
I think that will be great if the grid can do the 'edit in place' function. I'm trying to do this but no success yet. I don't so much experience in Javacript :-( but i won't give up!

[eluser]Roberto Miguez[/eluser]
Someone can send to my e-mail ([email protected]) one XML structure example to populate the grid with data? I'm having problems with this. Thank you.

[eluser]Roberto Miguez[/eluser]
Today I modified the flexigrid to use with 100% width and height but the problem is: I need to scroll to see the last record on the page. I need help with this.. someone can help me?

http://www.robertomiguez.com.br/flexigrid/default6.aspx (Page with example)
http://www.robertomiguez.com.br/flexigrid/flexi.zip (Modified pages)

This flexigrid already have the 'shift + click' to select more than one record per time

[eluser]tayson[/eluser]
Hi! =)

Is there any way to set a style when calling the table? Like this:


...
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
{display: 'Produto', name : 'produto', width : 180, sortable : true, align: 'left'},
{display: 'Referência', name : 'ref', width : 120, sortable : true, align: 'left', class:'color:red;'},
{display: 'desc', name : 'desc', width : 130, sortable : true, align: 'left', hide: true, class:'border-bottom:1px solid #000;'},
{display: 'id', name : 'id', width : 80, sortable : true, align: 'right'}
],
...



Thanks.