jQuery Grid Plugin - jqGridForum

Topic RSS

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

15/11/2011
21:20

sprabhu

Member

Members

Forum Posts: 3

Member Since:
15/11/2011

Offline

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>

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
68 Guest(s)

Currently Browsing this Page:
1 Guest(s)