CODEWITHSUNDEEP
jqgrid
abhihello123
abhihello123

Reputation: 1728

Jqgrid pagination icons missing

Issue is pagination icons in jqgrid are not visible. I could see that the .png images are not found in my console.

GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)

Also even though width is 'auto' there is a horizontal scroll bar appearing.

The data gets loaded properly and my DB pagination is working fine. on first page only hand icon is visible and when clicked goes to page 2. but on page 2 no icon is visible.

I downloaded again jqgrid but no .png icons were there in the installation

My jsp code goes as below -

<html>
<head>

<style>

div.ui-jqgrid-titlebar {
    height: 10px;
}


        #sidebar {
            float: left;
            width: 150px;
            padding: 10px 10px;
           // background-color:yellow
        }


        #container {
            margin: 0px 320px 0px 170px;
            text-align: center;
           // background-color:red
        }



</style>

<link rel="stylesheet" href="../styles/ui.all.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../styles/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="../styles/ui.jqgrid.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../js/grid.locale-en.js"></script>
     <script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
    <link href="../images/favicon.ico"  type="image/x-icon" rel="shortcut icon">
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>


<script type="text/javascript">
//index is used to override the column name passed to the server in the query param sidx
        var myColModel = [
                        { name: "promId", index: 'Promotionid', width: 60 },
                        { name: "promoCode", index: 'promotioncode', width: 110 },
                        { name: "name", index: 'name', width: 160 },
                        { name: "description", index: 'description', width: 250 },
                        { name: "distCode", index: 'distributor_code', width: 110 },
                        { name: "status", index: 'status', width: 110 },
                        { name: "startDate", index: 'start_date', width: 100, sorttype: "date", align: "right" },
                        { name: "endDate", index: 'end_date', width: 100, sorttype: "date", align: "right" },
                        { name: "discount", index: 'discount', width: 90 },
                        { name: "extension", index: 'extension', width: 90 }
                    ];

            $(function () {
                $("#list").jqGrid({
                    url: 'some/url',
                    datatype: "json",
                    mtype: "GET",
                    colNames: ["Promo ID", "Promo Code", "Name", "Description", "Distributor Code", "Status", "Start Date", "End Date", "Discount", "Extension"],
                    colModel: myColModel,
                    pager: "#pager",
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    sortname: "end_date",
                    sortorder: "asc",
                    viewrecords: true,
                    gridview: true,
                    rownumber: true,
                    autoencode: true,
                    width: 'auto',
                    height: 'auto',
                    caption: "Promotion Summary"
                });

            }); 


</script>    
</head>   

<br></br>
<body>
    <br>
    <br>

    <center>
        <hr />
        <div class="clear">
            <%@ include file="header.jsp"%>
        </div>
    </center>
    <div class="sidebar">
        <%@ include file="/admin/User.jsp"%>
    </div>
    <br>
    <br>



    <div id="container" border="2px solid green"
        style="left: 5%; position: relative;">

        <div id="tableContent" width="100%">
            <div>Summary</div>
            <div style = "margin: 0px auto 0px 150px;">
                <table id="list"><tr><td></td></tr>
                </table>
                <div id="pager"></div>
            </div>

        </div>
    </div>


    </div>

    </div>
</body>
</html>

Upvotes: 0

Views: 1336

Answers (1)

abhihello123
abhihello123

Reputation: 1728

What I found that the images were not downloaded from the version I installed from jqgrid website. Not sure why. so I manually downloaded images from internet and worked fine.

Upvotes: 1

Related Questions