Author Topic: Style changed on using Pro version  (Read 3650 times)

SegueTech

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 25
    • View Profile
Style changed on using Pro version
« on: March 01, 2016, 09:50:59 pm »
Hello,
I just purchased the pro version and dropped everything into place, but the style went crazy (fonts huge, column and cell styles changed, icons for drop down and move are in strange places, and the bottom pagination area has a separate line for every piece).  Wondering what I am doing wrong.  Sample code is below:

<html>
<head>

 <!--jQuery dependencies-->
 <link rel="stylesheet"
     href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

 
 <!--ParamQuery Grid files-->
 <link rel="stylesheet" href="../grid/pqgrid.min.css" />
 <script type="text/javascript" src="../grid/pqgrid.min.js" ></script>   

 
 <script>   

 $(function () {
     var data = [
     {region: "AKR", park: "ANCH", location: "229152", description: "Visitor Center Exhibits and Trip Planning Interpretive Media", asset_status: "OPERATING", assetcode: "7500", optimizerband: "1", proposedoptimizerband: "1", datechanged: "01-23-2014 11:24", status: "Approved", comments: "Bulk upload by PFMD Help Desk DBA Ayub Khan per George Sims"},
     {region: "AKR", park: "ANCH", location: "229152", description: "Visitor Center Exhibits and Trip Planning Interpretive Media", asset_status: "OPERATING", assetcode: "7500", optimizerband: "1", proposedoptimizerband: "1", datechanged: "06-18-2013 13:42", status: "Approved", comments: null},
     {region: "AKR", park: "ANCH", location: "229153", description: "Theater", asset_status: "REMOVED", assetcode: "4100", optimizerband: null, proposedoptimizerband: "BLANK", datechanged: null, status: null, comments: null},
     {region: "AKR", park: "ANCH", location: "230960", description: "SALVAGE Site", asset_status: "SITE", assetcode: "0000", optimizerband: "BLANK", proposedoptimizerband: "BLANK", datechanged: null, status: null, comments: null},
     {region: "AKR", park: "ANCH", location: "237635", description: "Education Room Leased Space", asset_status: "OPERATING", assetcode: "4100", optimizerband: "3", proposedoptimizerband: "1", datechanged: "06-11-2015 16:58", status: "Approved", comments: "This is a GSA leased space. All O&M are under contract to be completed at highest level."},
     {region: "AKR", park: "ANCH", location: "237635", description: "Education Room Leased Space", asset_status: "OPERATING", assetcode: "4100", optimizerband: "3", proposedoptimizerband: "1", datechanged: "06-11-2015 16:58", status: "Approved", comments: "This is a GSA leased space. All O&M are under contract to be completed at highest level."},
     {region: "AKR", park: "ANCH", location: "237639", description: "Visitor Center Exhibit and Trip Planning Hall", asset_status: "REMOVED", assetcode: "4100", optimizerband: null, proposedoptimizerband: "BLANK", datechanged: null, status: null, comments: null},
     {region: "AKR", park: "ANCH", location: "93492", description: "AAPLIC Anchorage Federal Building Leased Space", asset_status: "OPERATING", assetcode: "4100", optimizerband: "2", proposedoptimizerband: "1", datechanged: "06-11-2015 16:58", status: "Approved", comments: "This is a GSA leased space. All O&M are under contract to be completed at highest level."},
     {region: "AKR", park: "ANCH", location: "93492", description: "AAPLIC Anchorage Federal Building Leased Space", asset_status: "OPERATING", assetcode: "4100", optimizerband: "2", proposedoptimizerband: "1", datechanged: "06-11-2015 16:58", status: "Approved", comments: "This is a GSA leased space. All O&M are under contract to be completed at highest level."},
     {region: "AKR", park: "ANCH", location: "ANCH", description: "Alaska Public Lands Information Center- Anchorage", asset_status: "SITE", assetcode: "0000", optimizerband: "BLANK", proposedoptimizerband: "BLANK", datechanged: null, status: null, comments: null}
    ];


         var obj = {
            width: 1300,
            height: 400,
            title: "Grid From JSON",
            flexHeight: true,
            flexWidth: true
        };
        obj.colModel = [
           {title:"Region", width:50, dataType:"string", dataIndx: "region"},
           {title:"Park", width:50, dataType:"string", dataIndx: "park"},
           {title:"Location Number", width:75, dataType:"integer", align: "right", dataIndx: "location"},
           {title:"Location Description", width:250, dataType:"string", dataIndx: "description"},
           {title:"Location Status", width:100, dataType:"string", dataIndx: "asset_status"},
           {title:"Asset Code", width:50, dataType:"string", align: "right", dataIndx: "assetcode"},
           {title:"Original Optimizer Band", width:75, dataType:"string", dataIndx: "optimizerband"},
           {title:"Proposed Optimizer Band", width:75, dataType:"string", dataIndx: "proposedoptimizerband"},
           {title:"FMSS Last Date Approved", width:150, dataType:"string", dataIndx: "datechanged"},
           {title:"Approval Status", width:75, dataType:"string", dataIndx: "status"},
           {title:"Comments", width:100, dataType:"string", dataIndx: "comments"}
       ];

        obj.dataModel = {
            data: data,
            location: "local",
            sorting: "local",                               
            sortIndx: "region",
            sortDir: "down"           
        };
        obj.pageModel = { type: 'local', rPP: 10, rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000]};
        var $grid = $("#grid_json").pqGrid(obj);
    });
</script>     
 
</head>
<body>

<div id="grid_json" style="margin:auto;"></div>

</body>
</html>

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6265
    • View Profile
Re: Style changed on using Pro version
« Reply #1 on: March 01, 2016, 09:57:21 pm »
Please also include pqgrid.ui.css file as mentioned here: http://paramquery.com/pro/tutorial#topic-include

and add <!DOCTYPE html> at the top of document.
« Last Edit: March 01, 2016, 09:59:08 pm by paramquery »

SegueTech

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 25
    • View Profile
Re: Style changed on using Pro version
« Reply #2 on: March 01, 2016, 11:38:09 pm »
Thanks.  That helped with the full-screen and open/close icons in the top bar, but everything else still looks very different, mostly just huge fonts now.  Do I just need to change all the css myself, or should it look as good as it did in the eval version by default?  Code now looks like this:

<!DOCTYPE html>
<html>
<head>

<!--jQuery dependencies-->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<!--ParamQuery Grid css files-->
    <link rel="stylesheet" href="../grid/pqgrid.min.css" />
   
 <!--add pqgrid.ui.css for jQueryUI theme support-->
    <link rel="stylesheet" href="../grid/pqgrid.ui.min.css" />
   
<!--ParamQuery Grid Office theme (optional)-->
    <link rel="stylesheet" href="../grid/themes/Office/pqgrid.css" />
   
<!--ParamQuery Grid js files-->
    <script type="text/javascript" src="../grid/pqgrid.min.js" ></script>   

 
 <script>   

 $(function () {
     var data = [
     {region: "AKR", park: "ANCH", location: "229152", description: "Visitor Center Exhibits and Trip Planning Interpretive Media", asset_status: "OPERATING", assetcode: "7500", optimizerband: "1", proposedoptimizerband: "1", datechanged: "01-23-2014 11:24", status: "Approved", comments: "Bulk upload by PFMD Help Desk DBA Ayub Khan per George Sims"},
     {region: "AKR", park: "ANCH", location: "229152", description: "Visitor Center Exhibits and Trip Planning Interpretive Media", asset_status: "OPERATING", assetcode: "7500", optimizerband: "1", proposedoptimizerband: "1", datechanged: "06-18-2013 13:42", status: "Approved", comments: null},
     {region: "AKR", park: "ANCH", location: "229153", description: "Theater", asset_status: "REMOVED", assetcode: "4100", optimizerband: null, proposedoptimizerband: "BLANK", datechanged: null, status: null, comments: null},
     {region: "AKR", park: "ANCH", location: "230960", description: "SALVAGE Site", asset_status: "SITE", assetcode: "0000", optimizerband: "BLANK", proposedoptimizerband: "BLANK", datechanged: null, status: null, comments: null},
     {region: "AKR", park: "ANCH", location: "237635", description: "Education Room Leased Space", asset_status: "OPERATING", assetcode: "4100", optimizerband: "3", proposedoptimizerband: "1", datechanged: "06-11-2015 16:58", status: "Approved", comments: "This is a GSA leased space. All O&M are under contract to be completed at highest level."},
     {region: "AKR", park: "ANCH", location: "237635", description: "Education Room Leased Space", asset_status: "OPERATING", assetcode: "4100", optimizerband: "3", proposedoptimizerband: "1", datechanged: "06-11-2015 16:58", status: "Approved", comments: "This is a GSA leased space. All O&M are under contract to be completed at highest level."},
     {region: "AKR", park: "ANCH", location: "237639", description: "Visitor Center Exhibit and Trip Planning Hall", asset_status: "REMOVED", assetcode: "4100", optimizerband: null, proposedoptimizerband: "BLANK", datechanged: null, status: null, comments: null},
     {region: "AKR", park: "ANCH", location: "93492", description: "AAPLIC Anchorage Federal Building Leased Space", asset_status: "OPERATING", assetcode: "4100", optimizerband: "2", proposedoptimizerband: "1", datechanged: "06-11-2015 16:58", status: "Approved", comments: "This is a GSA leased space. All O&M are under contract to be completed at highest level."},
     {region: "AKR", park: "ANCH", location: "93492", description: "AAPLIC Anchorage Federal Building Leased Space", asset_status: "OPERATING", assetcode: "4100", optimizerband: "2", proposedoptimizerband: "1", datechanged: "06-11-2015 16:58", status: "Approved", comments: "This is a GSA leased space. All O&M are under contract to be completed at highest level."},
     {region: "AKR", park: "ANCH", location: "ANCH", description: "Alaska Public Lands Information Center- Anchorage", asset_status: "SITE", assetcode: "0000", optimizerband: "BLANK", proposedoptimizerband: "BLANK", datechanged: null, status: null, comments: null}
    ];


         var obj = {
            width: 1300,
            height: 400,
            title: "Grid From JSON",
            flexHeight: true,
            flexWidth: true
        };
        obj.colModel = [
           {title:"Region", width:50, dataType:"string", dataIndx: "region"},
           {title:"Park", width:50, dataType:"string", dataIndx: "park"},
           {title:"Location Number", width:75, dataType:"integer", align: "right", dataIndx: "location"},
           {title:"Location Description", width:250, dataType:"string", dataIndx: "description"},
           {title:"Location Status", width:100, dataType:"string", dataIndx: "asset_status"},
           {title:"Asset Code", width:50, dataType:"string", align: "right", dataIndx: "assetcode"},
           {title:"Original Optimizer Band", width:75, dataType:"string", dataIndx: "optimizerband"},
           {title:"Proposed Optimizer Band", width:75, dataType:"string", dataIndx: "proposedoptimizerband"},
           {title:"FMSS Last Date Approved", width:150, dataType:"string", dataIndx: "datechanged"},
           {title:"Approval Status", width:75, dataType:"string", dataIndx: "status"},
           {title:"Comments", width:100, dataType:"string", dataIndx: "comments"}
       ];

        obj.dataModel = {
            data: data,
            location: "local",
            sorting: "local",                               
            sortIndx: "region",
            sortDir: "down"           
        };
        obj.pageModel = { type: 'local', rPP: 10, rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000]};
        pq.grid("#grid_json", obj );
    });
</script>     
 
</head>
<body>

<div id="grid_json" style="margin:auto;"></div>

</body>
</html>

SegueTech

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 25
    • View Profile
Re: Style changed on using Pro version
« Reply #3 on: March 01, 2016, 11:50:08 pm »
Update:

I was able to get everything in the right place, including the bottom pagination stuff, by using the following:

<script>   

 $(function () {
     var data = [
     {region: "AKR", park: "ANCH", location: "229152", description: "Visitor Center Exhibits and Trip Planning Interpretive Media", asset_status: "OPERATING", assetcode: "7500", optimizerband: "1", proposedoptimizerband: "1", datechanged: "01-23-2014 11:24", status: "Approved", comments: "Bulk upload by PFMD Help Desk DBA Ayub Khan per George Sims"},
     {region: "AKR", park: "ANCH", location: "229152", description: "Visitor Center Exhibits and Trip Planning Interpretive Media", asset_status: "OPERATING", assetcode: "7500", optimizerband: "1", proposedoptimizerband: "1", datechanged: "06-18-2013 13:42", status: "Approved", comments: null},
     {region: "AKR", park: "ANCH", location: "229153", description: "Theater", asset_status: "REMOVED", assetcode: "4100", optimizerband: null, proposedoptimizerband: "BLANK", datechanged: null, status: null, comments: null},
     {region: "AKR", park: "ANCH", location: "230960", description: "SALVAGE Site", asset_status: "SITE", assetcode: "0000", optimizerband: "BLANK", proposedoptimizerband: "BLANK", datechanged: null, status: null, comments: null},
     {region: "AKR", park: "ANCH", location: "237635", description: "Education Room Leased Space", asset_status: "OPERATING", assetcode: "4100", optimizerband: "3", proposedoptimizerband: "1", datechanged: "06-11-2015 16:58", status: "Approved", comments: "This is a GSA leased space. All O&M are under contract to be completed at highest level."},
     {region: "AKR", park: "ANCH", location: "237635", description: "Education Room Leased Space", asset_status: "OPERATING", assetcode: "4100", optimizerband: "3", proposedoptimizerband: "1", datechanged: "06-11-2015 16:58", status: "Approved", comments: "This is a GSA leased space. All O&M are under contract to be completed at highest level."},
     {region: "AKR", park: "ANCH", location: "237639", description: "Visitor Center Exhibit and Trip Planning Hall", asset_status: "REMOVED", assetcode: "4100", optimizerband: null, proposedoptimizerband: "BLANK", datechanged: null, status: null, comments: null},
     {region: "AKR", park: "ANCH", location: "93492", description: "AAPLIC Anchorage Federal Building Leased Space", asset_status: "OPERATING", assetcode: "4100", optimizerband: "2", proposedoptimizerband: "1", datechanged: "06-11-2015 16:58", status: "Approved", comments: "This is a GSA leased space. All O&M are under contract to be completed at highest level."},
     {region: "AKR", park: "ANCH", location: "93492", description: "AAPLIC Anchorage Federal Building Leased Space", asset_status: "OPERATING", assetcode: "4100", optimizerband: "2", proposedoptimizerband: "1", datechanged: "06-11-2015 16:58", status: "Approved", comments: "This is a GSA leased space. All O&M are under contract to be completed at highest level."},
     {region: "AKR", park: "ANCH", location: "ANCH", description: "Alaska Public Lands Information Center- Anchorage", asset_status: "SITE", assetcode: "0000", optimizerband: "BLANK", proposedoptimizerband: "BLANK", datechanged: null, status: null, comments: null}
    ];

   var colModel = [
           {title:"Region", width:50, dataType:"string", dataIndx: "region"},
           {title:"Park", width:50, dataType:"string", dataIndx: "park"},
           {title:"Location Number", width:75, dataType:"integer", align: "right", dataIndx: "location"},
           {title:"Location Description", width:250, dataType:"string", dataIndx: "description"},
           {title:"Location Status", width:100, dataType:"string", dataIndx: "asset_status"},
           {title:"Asset Code", width:50, dataType:"string", align: "right", dataIndx: "assetcode"},
           {title:"Original Optimizer Band", width:75, dataType:"string", dataIndx: "optimizerband"},
           {title:"Proposed Optimizer Band", width:75, dataType:"string", dataIndx: "proposedoptimizerband"},
           {title:"FMSS Last Date Approved", width:150, dataType:"string", dataIndx: "datechanged"},
           {title:"Approval Status", width:75, dataType:"string", dataIndx: "status"},
           {title:"Comments", width:100, dataType:"string", dataIndx: "comments"}
       ];

         var obj = {
            width: 1300,
            height: 400,
            title: "Grid From JSON",
            colModel: colModel,
           dataModel: {
                 data: data,
               location: "local",
               sorting: "local",                               
               sortIndx: "region",
               sortDir: "down"           
           },
           pageModel: { type: 'local', rPP: 10, rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000]}
        };
       
        pq.grid("#grid_json", obj );
    });
</script>   

The only thing that is off now is the huge font.  Obviously, I can change that myself, but I just don't know why it suddenly became huge when I am using the theme and everything looks beautiful in the eval version.

Thanks!

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6265
    • View Profile
Re: Style changed on using Pro version
« Reply #4 on: March 01, 2016, 11:50:10 pm »
By default grid assumes the same font as that of the document. To change font for the grid, use this

Code: [Select]
.pq-grid{
  font-size: 12px;
}

Please also ensure that js and css files belong to the same version and do a forced refresh or clear the cache of browser.
« Last Edit: March 01, 2016, 11:52:09 pm by paramquery »

SegueTech

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 25
    • View Profile
Re: Style changed on using Pro version
« Reply #5 on: March 07, 2016, 07:53:51 pm »
That did it, beautiful!  Thank you! 

By any chance, is there any documentation or a page that breaks down the css controls?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6265
    • View Profile
Re: Style changed on using Pro version
« Reply #6 on: March 08, 2016, 07:37:53 pm »
The main css classes of the grid are mentioned here: http://paramquery.com/pro/tutorial#topic-classes if that's what you are looking for.