Grid title display issue

[lgauton]

Hi I'm using pro 2.0.4

I have an issue with grid - definition

 var colModel = [
                            { title: "ID", dataType: "string", width: "75", dataIndx: 0 },
                            { title: "Adults", dataType: "integer", width: "75", dataIndx: 1 },
                            { title: "Child", dataType: "integer", width: "75", dataIndx: 2 },
                            { title: "Infants", dataType: "integer", width: "75", dataIndx: 3 }
                            ];

                            var dataModel = {
                                cache: true,
                                location: "remote",
                                sortDir: "up",
                                sortIndx: 1,
                                sorting: "local",
                                dataType: "xml",
                                method: "POST",
                                getUrl: function () {
                                    return {
                                        url: "@Url.ModuleUrl().Action("AccessContractData")",
                                        data: { 'ContractCode': contractcode, 'id': "2" }
                                    };
                                },
                                getData: function (dataDoc) {
                                    //debugger;
                                    var obj = { itemParent: "Occupancy", itemNames: ["id", "adultsCount", "childrenCount", "infantCount"] };
                                    return { data: $.paramquery.xmlToArray(dataDoc, obj) };
                                }
                            };
                            var obj = {
                                width: 350, height: 0,
                                dataModel: dataModel,
                                colModel: colModel,
                                pageModel: { rPP: 10, type: "local", rPPOptions: [1, 2, 5, 10, 20, 100] },
                                title: "<b>Occupancy Set</b>",
                                flexHeight: true,
                                paging: true,
                                draggable: true,
                                editable: false,
                                //resizable:true,           
                                scrollModel: { horizontal: false },
                                showToolbar: false,
                                collapsible: true,
                                freezeCols: 0,

                            };

When grid is first displayed after a tab selection the titles do not display - see image attached, (files too large to send second image showing titles) after a collapse of the grid and un-collapse titles show correctly

Any ideas on how to fix

[paramvir]

you have to call refresh on the grid whenever corresponding tab is displayed ( activate event of jQuerUI tab ).

http://api.jqueryui.com/1.9/tabs/#event-activate

[lgauton]

Thanks but I already do call refresh as below

                            //Fill Occupancy Grid
                            var $grido;

                            try {
                                $grido = $("#OccupancyGrid").pqGrid("destroy");
                            }
                            catch (err) {
                            }


                            var colModel = [
                            { title: "ID", dataType: "string", width: "75", dataIndx: 0 },
                            { title: "Adults", dataType: "integer", width: "75", dataIndx: 1 },
                            { title: "Child", dataType: "integer", width: "75", dataIndx: 2 },
                            { title: "Infants", dataType: "integer", width: "75", dataIndx: 3 }
                            ];

                            var dataModel = {
                                cache: true,
                                location: "remote",
                                sortDir: "up",
                                sortIndx: 1,
                                sorting: "local",
                                dataType: "xml",
                                method: "POST",
                                getUrl: function () {
                                    return {
                                        url: "@Url.ModuleUrl().Action("AccessContractData")",
                                        data: { 'ContractCode': contractcode, 'id': "2" }
                                    };
                                },
                                getData: function (dataDoc) {
                                    //debugger;
                                    var obj = { itemParent: "Occupancy", itemNames: ["id", "adultsCount", "childrenCount", "infantCount"] };
                                    return { data: $.paramquery.xmlToArray(dataDoc, obj) };
                                }
                            };
                            var obj = {
                                width: 350, height: 0,
                                dataModel: dataModel,
                                colModel: colModel,
                                pageModel: { rPP: 10, type: "local", rPPOptions: [1, 2, 5, 10, 20, 100] },
                                title: "<b>Occupancy Set</b>",
                                flexHeight: true,
                                paging: true,
                                draggable: true,
                                editable: false,
                                //resizable:true,           
                                scrollModel: { horizontal: false },
                                showToolbar: false,
                                collapsible: true,
                                freezeCols: 0,

                            };


                            $grido = $("#OccupancyGrid").pqGrid(obj);
                            $grido = $("#OccupancyGrid").pqGrid("refresh");

[lgauton]

Sorry - now fixed I was calling refresh before tab display not after