Grid titles

[lgauton]

Hi I have a couple of grids that have titles define such as

                    var colModel = [
                    { title: "Code", dataType: "string", width: "75", dataIndx: 0 },
                    { title: "Name", dataType: "string", width: "200", dataIndx: 1 },
                    { title: "Resort", dataType: "string", width: "200", dataIndx: 3 },
                    { title: "Rating", dataType: "string", width: "100", dataIndx: 6 }
                    ];

When the grid displays it only displays the first title rest are blank, all the column data displays correctly

Have you any ideas on how to fix

Thanks

[lgauton]

Hi Have fixed this by doing 'refreshDataAndView' but as I was already doing 'refresh' don't understand why I would need to also do a data refresh with if my understanding is correct in my case would resend request to server for data update

[paramvir]

column titles aren't related to dataModel.data

You mentioned that you are using couple of grids on a page. Do you share colModel within the grids. Do you face the same issue if single grid is used.

Please post your code so that the issue can be reproduced.

[lgauton]

Here's some sample code

I always have showing on the page grid as this one that lists set of properties to be worked on

            var colModel = [
            { title: "Code", dataType: "string", width: "50", dataIndx: 0 },
            { title: "Name", dataType: "string", width: "250", dataIndx: 1 },
            { title: "Resort Name", dataType: "string", width: "250", dataIndx: 4 },
            { title: "Country", dataType: "string", width: "100", dataIndx: 6 }
            ];

            var dataModel = {
                //cache: true,
                location: "remote",
                sortDir: "up",
                sortIndx: 1,
                sorting: "local",
                dataType: "xml",
                method: "POST",
                getUrl: function () {
                    return {
                        url: "@Url.ModuleUrl().Action("AccessHotelList")",
                            data: { 'id': ctr }
                        };
                       },
                    getData: function (dataDoc) {
                        //debugger;
                        var obj = { itemParent: "BriefAccommodationInfo", itemNames: ["code", "name", "inactive", "resortCode", "resortName", "countryCode", "countryName"] };
                        return { data: $.paramquery.xmlToArray(dataDoc, obj) };
                    }
                };

            var obj = {
                width: 700, height: 0,
                dataModel: dataModel,
                colModel: colModel,
                pageModel: { rPP: 10, type: "local", rPPOptions: [1, 2, 5, 10, 20, 100] },
                title: "<b>Hotel List</b>",
                flexHeight: true,
                paging: true,
                draggable: true,
                editable: false,
                //resizable:true,           
                scrollModel: { horizontal: false },
                //showToolbar: false,
                selectionModel: {
                    type: 'row', mode: 'single'
                },
                toolbar: {
                    items: [
                        {
                            type: 'button', icon: 'ui-icon-plus', label: 'Duplicate Property', listeners: [
                              {
                                  "click": function (evt, ui) {

                                      //add empty item
                                      duplicateProperty(evt, ui);

                                  }
                              }
                            ]
                        },
                        {
                            type: 'button', icon: 'ui-icon-plus', label: 'Refresh list', listeners: [
                              {
                                  "click": function (evt, ui) {

                                      //add empty item
                                      refreshHotellist("1");

                                  }
                              }
                            ]
                        }
                    ]
                },
                collapsible: true,
                freezeCols: 0,
                rowSelect: loadHotel
            };

            try {
                $grid = $("#HotelGrid").pqGrid("destroy");
            }
            catch (err) {
           
            }
            $grid = $("#HotelGrid").pqGrid(obj);
           
            $grid = $("#HotelGrid").pqGrid("refresh");

            $("#HotelName").text("");
            $("#tabs").css("display", "none");

            $("#HotelGridOuter").css("display", "block");

then underneath are a set of tabbed pages each allowing different functions, most do a a grid of some sort showing, 99% of these tabbed pages display correctly showing full titles. But there is one that doesn't and that has two grids on code as below

                    var colModel = [
                    { title: "Code", dataType: "string", width: "75", dataIndx: 0 },
                    { title: "Name", dataType: "string", width: "200", dataIndx: 1 },
                    { title: "Resort", dataType: "string", width: "200", dataIndx: 3 },
                    { title: "Rating", dataType: "string", width: "100", dataIndx: 6 }
                    ];

                    var dataModel = {
                        //cache: true,
                        location: "remote",
                        sortDir: "up",
                        sortIndx: 1,
                        sorting: "local",
                        dataType: "xml",
                        method: "POST",
                        getUrl: function () {
                            return {
                                url: "@Url.ModuleUrl().Action("AccessPriceCheck")",
                                data: {
                                    'AccomCode': hotelcode,
                                    'Fromdate': $('#PCFromdate').val(),
                                    'Nights': $('#PCNights').val(),
                                    'Adults': $('#PCAdults :selected').val(),
                                    'Child': $('#PCChild :selected').val(),
                                    'Infants': $('#PCInfants :selected').val(),
                                    'ChildAges': $('#PCChildAges').val(),
                                    'ResortCode': $('#OVResortCode').val()
                                }
                            };
                        },
                        getData: function (dataDoc) {
                            //debugger;

                            var obj = { itemParent: "hotel", itemNames: ["code", "name", "resortcode", "resortname", "airportcode", "ratingcode", "ratingname"] };
                            return { data: $.paramquery.xmlToArray(dataDoc, obj) };
                        }
                    };

                    var obj = {
                        width: 700, height: 0,
                        dataModel: dataModel,
                        colModel: colModel,
                        pageModel: { rPP: 10, type: "local", rPPOptions: [1, 2, 5, 10, 20, 100] },
                        title: "<b>Hotel List</b>",
                        flexHeight: true,
                        paging: true,
                        draggable: true,
                        editable: false,
                        //resizable:true,           
                        scrollModel: { horizontal: false },
                        showToolbar: false,
                        selectionModel: {
                            type: 'row', mode: 'single'
                        },

                        collapsible: true,
                        freezeCols: 0

                    };


                    //room grid
                    var colModelr = [
                    { title: "Code", dataType: "string", width: "75", dataIndx: 0 },
                    { title: "Room", dataType: "string", width: "200", dataIndx: 1 },
                    { title: "Board", dataType: "string", width: "200", dataIndx: 2 },
                    { title: "Currency", dataType: "string", width: "100", dataIndx: 3 },
                    { title: "Price", align: "right", dataType: "float", width: "100", dataIndx: 4 },
                    { title: "Supplements", align: "right", dataType: "float", width: "100", dataIndx: 5 },
                    { title: "Discounts", align: "right", dataType: "float", width: "100", dataIndx: 6 }
                    ];

                    var dataModelr = {
                        //cache: true,
                        location: "remote",
                        sortDir: "up",
                        sortIndx: 1,
                        sorting: "local",
                        dataType: "xml",
                        method: "POST",
                        getUrl: function () {
                            return {
                                url: "@Url.ModuleUrl().Action("AccessPriceCheckRooms")",
                                data: {
                                    'AccomCode': hotelcode

                                }
                            };
                        },
                        getData: function (dataDoc) {
                            //debugger;

                            var obj = { itemParent: "room", itemNames: ["linkcode", "roomname", "boardname", "currency", "price", "supplements", "discounts"] };
                            return { data: $.paramquery.xmlToArray(dataDoc, obj) };
                        }
                    };

                    var objr = {
                        width: 1000, height: 0,
                        dataModel: dataModelr,
                        colModel: colModelr,
                        pageModel: { rPP: 10, type: "local", rPPOptions: [1, 2, 5, 10, 20, 100] },
                        title: "<b>Room List</b>",
                        flexHeight: true,
                        paging: true,
                        draggable: true,
                        editable: false,
                        //resizable:true,           
                        scrollModel: { horizontal: false },
                        showToolbar: false,
                        selectionModel: {
                            type: 'row', mode: 'single'
                        },

                        collapsible: true,
                        freezeCols: 0

                    };


         
                    try {
                        $grid = $("#PriceCheckHotelGrid").pqGrid("destroy");
                    }
                    catch (err) {

                    }

                    try {
                        $gridr = $("#PriceCheckRoomGrid").pqGrid("destroy");
                    }
                    catch (err) {

                    }

                    $("#PriceCheckHotelGrid").pqGrid(obj);
                    $("#PriceCheckHotelGrid").pqGrid("refresh");  //refreshDataAndView will fix be resends data request

                    $("#PriceCheckRoomGrid").pqGrid(objr);
                    $("#PriceCheckRoomGrid").pqGrid("refresh");

                    $("#PriceCheckHotelGridOuter").css("display", "block");
                    $("#PriceCheckHotelGridOuter").scrollToMe();


Hope thats clear

[paramvir]

your code looks fine and you could try it with JSON data instead of array data using this API

http://paramquery.com/pro/api#method-xmlToJson

1) BTW did you try to use the problematic grid on isolated page.

2) If you still face the issue, could you send the entire solution ( with reproducible issue ) by decoupling client side code from server side code and replacing urls with sample XML files, so that we can test and provide the fix for it.