sprabhu on Need help with the examples on trirand.com/blog/jqgrid/jqgrid.html

Tue, 15 Nov 2011 21:20:31 +0200

Being a newbie, i have some basic questions regarding the examples on this site.

Taking the 'Loading Data'--> JSON data example, when i give it a try, i have a couple of issues:

a) The column heading for the first column doesn't appear.

b) None of the columns are sortable ?? no button next to the column heading.

b) The search and the reload images doesn't appear

Am i missing some thing ?

Here is my jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<c:url value="spring-jqgrid-mongo" var="baseUrl"/>

<head>
   
   <link rel="stylesheet" type="text/css" media="screen" href="/${baseUrl}/resources/css/jquery/redmond-jquery-ui-1.8.1.custom.css">

    <link rel="stylesheet" type="text/css" media="screen" href="/${baseUrl}/resources/css/jqgrid/ui.jqgrid.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/${baseUrl}/resources/css/jquery/datePicker.css">

<style>
.ui-datepicker {z-index:1200;}
</style>

<script type="text/javascript" src="/${baseUrl}/resources/js/jquery/jquery-1.6.2.js"></script>
       <script type="text/javascript" src="/${baseUrl}/resources/js/jquery/jquery.datePicker.js"></script>

   <script type="text/javascript">
        var jq = jQuery.noConflict();
   </script>
   <script type="text/javascript" src="/${baseUrl}/resources/js/jquery/jquery-ui-1.8.6.custom.min.js"></script>
   <script type="text/javascript" src="/${baseUrl}/resources/js/jqgrid/grid.locale-en.js" ></script>
   <script type="text/javascript" src="/${baseUrl}/resources/js/jqgrid/jquery.jqGrid.min.js"></script>
   <script type="text/javascript" src="/${baseUrl}/resources/js/jquery/jquery.datePicker.js"></script>

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Spring MVC 3: jqGrid and MongoDB Integration Tutorial</title>

</head>

<body >
<script type="text/javascript">
   jq(function() {
       jq("#grid").jqGrid({
              url:'/${baseUrl}/krams/crud',
           datatype: 'json',
           mtype: 'GET',
              colNames:['Sl No.', 'First Name', 'Last Name','Address','DateofBirth'],
              colModel:[
                  {name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true,sortable:true},
                  {name:'firstName',index:'lastName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10},sortable:true},
                  {name:'lastName',index:'firstName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10},sortable:true},
                  {name:'address',index:'address', width:100,editable:true, editrules:{required:true}, editoptions:{size:10},sortable:true},
                  //{name:'dob', index:'dob', width:90,editable:true, formatter:'date', formatoptions: {newformat:'m/d/Y'},editoptions:{size:20}}
                   //{ name: 'dob', index: 'dob', align: 'left', formatter: 'date',         search: true,         searchoptions: {         dataInit: function (el) {             $(el).datepicker({                 changeYear: true,                 changeMonth: true,                 showButtonPanel: true,                 dateFormat: 'dd-mm-yy',                 onSelect: function () {                     if (this.id.substr(0, 3) === "gs_") {                         // call triggerToolbar only in case of searching toolbar                         setTimeout(function () {                             $("#grid_id")[0].triggerToolbar();                         }, 100);                     }                 }             });         }     }}
                   { name: 'dob', index: 'dob', width: 120,editable: true,formatter:'date', formatoptions: {newformat:'m/d/Y'}, editoptions: {size: 10, maxlengh: 10},sortable:true,sorttype:"date"
                   }
                   ],
           postData: {
               },
           rowNum:10,
              rowList:[10,20,30],
              height: 200,
              autowidth: true,
           rownumbers: true,
              pager: '#pager',
              sortname: 'id',
            viewrecords: true,
            sortorder: "asc",
            caption:"Users",
            emptyrecords: "Empty records",
            loadonce: false,
            loadComplete: function() {
           },
            jsonReader : {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                cell: "cell",
                id: "id"
            }
       }).navGrid('#pager1',{edit:false,add:false,del:false});
   });
</script>

<p>Spring MVC 3: jqGrid</p>
<div id="jqgrid">
<table id="grid"></table>
<div id="pager"></div>
</div>

<div id="dialog" title="Feature not supported" style="display:none">
<p>That feature is not supported.</p>
</div>

<div id="dialogSelectRow" title="Warning" style="display:none">
<p>Please select row</p>
</div>
</body>

</html>

jQuery Grid Plugin - jqGrid - Topic: Need help with the examples on trirand.com/blog/jqgrid/jqgrid.html

sprabhu on Need help with the examples on trirand.com/blog/jqgrid/jqgrid.html