Flexigrid - Lightweight but rich data grid

[eluser]Roberto Miguez[/eluser]
Hey guys, I'm not so good in javascript but I tried to load the JSON parameters (colModel, buttons and searchitems) dynamically. I did this but my code don't stay so clean. It is working but is not clean and beautiful :-) Can someone help me to include my function (getJson) inside the flexgrid.js and make the correct call to it?

Here is my code

Code:

function getJson(urlJson) {
        var answer;
        $.ajax({
            type: 'POST',
            url: urlJson,
            dataType: 'text',
            async: false,
            success: function(data){
                answer = data;
            }
        });
        return answer;
    }
    alert(getJson('testColModel.asp'));

        $("#flex1").flexigrid
            (
            {
            url: 'test.asp',
            dataType: 'json',
            colModel : eval(getJson('colModel.asp')),
            buttons : [
                {name: 'Edit', bclass: 'edit', onpress : test},
                {name: 'Delete', bclass: 'delete', onpress : test},
                {separator: true}
                ],
            searchitems : [
                {display: 'ID', name : 'id', isdefault: true},
                {display: 'First Name', name : 'firstname'}
                ],
            sortname: "id",
            sortorder: "asc",
            usepager: true,
            title: 'Contacts',
            useRp: true,
            rp: 15,
            showTableToggleBtn: true,
            width: 800,
            height: 200
            }
            );
            
            function test(com,grid)
            {
                if (com=='Delete')
                    {
                        confirm('Delete ' + $('.trSelected',grid).length + ' items?')
                    }
                else if (com=='Edit')
                    {
                        alert($('.trSelected td'));
                    }            
            }

            $('b.top').click
            (
                function ()
                    {
                        $(this).parent().toggleClass('fh');
                    }
            );

What colModel.asp give me as result:

Code:

[{display: 'ID', name : 'id', width : 50, sortable : true, align: 'left'},{display: 'First Name', name : 'firstname', width : 100, sortable : true, align: 'left'},{display: 'Last Name', name : 'lastname', width : 100, sortable : true, align: 'left'},{display: 'Color', name : 'color', width : 100, sortable : true, align: 'left'},{display: 'Height', name : 'height', width : 100, sortable : true, align: 'left'},{display: 'Middlename', name : 'middlename', width : 100, sortable : true, align: 'left'},{display: 'Age', name : 'age', width : 100, sortable : true, align: 'left'},{display: 'Sex', name : 'sex', width : 100, sortable : true, align: 'left'},{display: 'Address 1', name : 'address1', width : 100, sortable : true, align: 'left'},{display: 'Address 2', name : 'address2', width : 100, sortable : true, align: 'left'},{display: 'Address 3', name : 'address3', width : 100, sortable : true, align: 'left'},{display: 'Address 4', name : 'address4', width : 100, sortable : true, align: 'left'},{display: 'Address 5', name : 'address5', width : 100, sortable : true, align: 'left'},{display: 'Country', name : 'country', width : 100, sortable : true, align: 'left'},{display: 'Region', name : 'region', width : 100, sortable : true, align: 'left'},{display: 'Is Dead', name : 'is_dead', width : 100, sortable : true, align: 'left'}]

[eluser]danielaquino[/eluser]
I'm using flexigrid to style up a real time presence list...

I'm wondering if it's possible for me to stop the dimming affect while the table is being updated...

This goes off every 10 seconds and is very distracting to see it flashing all the time...

[eluser]noon[/eluser]
Roberto, line 763 (//create model if any).

Something like this would work (not tested):

Code:

//create model if any
if (p.colModel)
{
  p.colModel = (p.colModel.indexOf("url:") != -1) ? yourJSONFuncHere(p.colModel) : p.colModel;

And put your function somewhere inside the flexigrid.js (make sure you eval it before you return it)

[eluser]Roberto Miguez[/eluser]
I read early today some guys asking about select only one row per time. I did something that I think can help. I don't know how to change the code making able to select only one but I changed my code to:

Code:

function test(com,grid)
            {
                if (com=='Delete')
                    {
                        confirm('Delete ' + $('.trSelected',grid).length + ' items?')
                    }
                else if (com=='Edit')
                    {
                        var numSelectRows = $('.trSelected').size();
                        if (numSelectRows == 1) { alert("ID: " + $('.trSelected td:first div').text()); } /* Informa o ID contido na celula selecionada */
                        else if (numSelectRows == 0) { alert("You need to select a row to edit."); }
                        else { alert("Only one row may be edited for time."); }                        
                    }            
            }

This way I can delete more than one row per time and edit only one and I give a message if more than one row are selected for editing or if doesn's have any selected. And you receive as answer the ID of selected row to do your actions.

Hope this can help.

Regards,
Roberot Miguez

[eluser]Roberto Miguez[/eluser]
[quote author="noon" date="1209154932"]Roberto, line 763 (//create model if any).

Something like this would work (not tested):

Code:

//create model if any
if (p.colModel)
{
  p.colModel = (p.colModel.indexOf("url:") != -1) ? yourJSONFuncHere(p.colModel) : p.colModel;

And put your function somewhere inside the flexigrid.js (make sure you eval it before you return it)[/quote]

Thank you noon, I will try this tomorrow.

[eluser]danielaquino[/eluser]
Hey are you thinking about adding the ability to only select one column at a time in the new release in a few days?

[eluser]danielaquino[/eluser]
I found a bug in flexigrid.

It appears that if you have 1 table without a pager and you update it,

it causes the spinners on all other flexigrids to spin!!!

Here is a mock up....

https://dev.ispbx.com/dan/flexigrid/

[eluser]paulopmx[/eluser]
[quote author="danielaquino" date="1209153188"]I'm using flexigrid to style up a real time presence list...

I'm wondering if it's possible for me to stop the dimming affect while the table is being updated...

This goes off every 10 seconds and is very distracting to see it flashing all the time...[/quote]

Sure, use this setting:

Code:

blockOpacity : 0

[eluser]Roberto Miguez[/eluser]
Trying the example made by Kevin Kietel at http://sanderkorvemaker.nl/test/flexigrid/ I saw that the search based on letters doesn't work. This is a great functionality. Can anyone help me to solve this issue? I tried but I don't know what to do.

[eluser]Unknown[/eluser]
Is it possible to just pass in the JSON data directly instead of getting it from a URL?