Question

I need the first flexigrid to make the ajax call and load its data and when its done, the second flexigrid will make the next ajax call when it is it’s turn.
How can I do this?

//FILL THE OFFERS GRID
            jQuery("#OFFERS").flexigrid({
                url: 'index.php?option=com_virtuemart&view=offers&task=getOffers&page=1&format=raw',
                dataType: 'json',
                singleSelect:true,          
                colModel : [
                    {display: 'id', name : 'id', width : 100, sortable : true, align: 'center'},
                    {display: 'startdate', name : 'startdate', width : 180, sortable : true, align: 'center'},
                    {display: 'enddate', name : 'enddate', width : 180, sortable : true, align: 'left'},
                    {display: 'product_name', name : 'product_name', width : 120, sortable : true, align: 'left'},
                    {display: 'discount_amount €', name : 'discount_amount', width : 100, sortable : true, align: 'left'},
                    {display: 'discount_percent %', name : 'discount_percent', width : 120, sortable : true, align: 'right'}
                    ],
                searchitems : [
                    {display: 'startdate', name : 'startdate', isdefault: true},
                    {display: 'enddate', name : 'enddate'},
                    {display: 'product_name', name : 'product_name'},
                    {display: 'discount_amount', name : 'discount_amount'},
                    {display: 'discount_percent', name : 'discount_percent'}
                    ],
                sortname: "id",
                sortorder: "asc",
                usepager: true,
                title: 'Offer',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true,
                width: 900,
                onSubmit: addFormData,      
                height: 200,
                buttons: [
                            {name: 'Test', onpress: test}
                    ]
            });


            //FILL THE PRODUCTS GRID

            jQuery("#pnlProducts").flexigrid({
                url: 'index.php?option=com_virtuemart&view=offers&task=getProducts&page=1&format=raw',
                dataType: 'json',
                singleSelect:true,          
                colModel : [
                    {display: 'id', name : 'id', width : 100, sortable : true, align: 'center'},
                    {display: 'name', name : 'name', width : 180, sortable : true, align: 'center'},
                    {display: 'price', name : 'price', width : 180, sortable : true, align: 'left'}                 
                    ],
                searchitems : [
                    {display: 'id', name : 'id', isdefault: true},
                    {display: 'name', name : 'name'},
                    {display: 'price', name : 'price'}                  
                    ],
                sortname: "id",
                sortorder: "asc",
                usepager: true,
                title: 'Products',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true,
                width: 900,
                onSubmit: addFormData,
                height: 200,
                buttons: [{name: 'Test2', onpress: test}]
            });

Answer 1

Finally I found My answer, In order to ensure many flexigrids in my pages to work properly without making many async requests and cause the browser to mix data, I can set its property onSuccess and pass a function there.

//FILL THE OFFERS GRID
            jQuery("#tblOFFERS").flexigrid({
                url: 'index.php?option=com_virtuemart&view=offers&task=getOffers&page=1&format=raw',
                dataType: 'json',
                singleSelect:true,          
                colModel : [
                    {display: 'id', name : 'id', width : 100, sortable : true, align: 'center'},
                    {display: 'startdate', name : 'startdate', width : 180, sortable : true, align: 'center'},
                    {display: 'enddate', name : 'enddate', width : 180, sortable : true, align: 'left'},
                    {display: 'product_name', name : 'product_name', width : 120, sortable : true, align: 'left'},
                    {display: 'discount_amount €', name : 'discount_amount', width : 100, sortable : true, align: 'left'},
                    {display: 'discount_percent %', name : 'discount_percent', width : 120, sortable : true, align: 'right'}
                    ],
                searchitems : [
                    {display: 'startdate', name : 'startdate', isdefault: true},
                    {display: 'enddate', name : 'enddate'},
                    {display: 'product_name', name : 'product_name'},
                    {display: 'discount_amount', name : 'discount_amount'},
                    {display: 'discount_percent', name : 'discount_percent'}
                    ],
                sortname: "id",
                sortorder: "asc",
                usepager: true,
                title: 'Offer',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true,
                width: 900,
                onSubmit: addFormData,      
                height: 200,
                onSuccess : fillTheNextGrid 
                buttons: [
                            {name: 'Test', onpress: test}
                    ]
            });


            //FILL THE PRODUCTS GRID
function fillTheNextGrid(
            jQuery("#tblPRODUCTS").flexigrid({
                url: 'index.php?option=com_virtuemart&view=offers&task=getProducts&page=1&format=raw',
                dataType: 'json',
                singleSelect:true,          
                colModel : [
                    {display: 'id', name : 'id', width : 100, sortable : true, align: 'center'},
                    {display: 'name', name : 'name', width : 180, sortable : true, align: 'center'},
                    {display: 'price', name : 'price', width : 180, sortable : true, align: 'left'}                 
                    ],
                searchitems : [
                    {display: 'id', name : 'id', isdefault: true},
                    {display: 'name', name : 'name'},
                    {display: 'price', name : 'price'}                  
                    ],
                sortname: "id",
                sortorder: "asc",
                usepager: true,
                title: 'Products',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true,
                width: 900,
                onSubmit: addFormData,
                height: 200,
                buttons: [{name: 'Test2', onpress: test}]
            });
)

the source http://code.google.com/p/flexigrid/wiki/FAQ