0 Replies Latest reply on Sep 4, 2015 1:00 AM by Tayyab Hussain

    Retrieving Data using jqGrid

    Tayyab Hussain Level 1

      Hi-

       

      I am trying to retrieve data into jqGrid but it seems that my data is not converted to json or maybe the case is something else. In short can't populate the jqGrid. My files are as follows

       

      Users.cfm

      <!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">

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <title>Untitled Document</title>

      <link rel="stylesheet" type="text/css" media="screen" href="steel/grid.css" />

      <link rel="stylesheet" type="text/css" media="screen" href="steel/jqModal.css" />

      <script src="js/jquery-1.11.0.min.js"></script>

      <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

      <script src="src/jqModal.js" type="text/javascript"></script>

      <script src="src/jqDnR.js" type="text/javascript"></script>

      <script src="src/jquery.fmatter.js" type="text/javascript"></script>

      </head>

       

       

      <body>

      <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>

      <div id="pager" class="scroll" style="text-align:center;"></div>

      <div id="mysearch"></div>

      <script>

      $(document).ready(function()

              {

                  $("#list").jqGrid(

                  {

                      url:"Users.cfc?method=getUsers", //CFC that will return the users

                      datatype: "json", //We specify that the datatype we will be using will be JSON

                      colNames:['ID','FirstName','LastName', 'DisplayName','UserName','UserAccountingCode','Phone'], //Column Names

                      //The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc.

                      colModel :[

                          {name:'id',index:'id', width:50, sorttype:"int"},

                          {name:'FirstName',index:'FirstName', width:150, sorttype:"string"},

                          {name:'LastName',index:'LastName', width:150, align:"left",sorttype:"string"},

                          {name:'DisplayName',index:'DisplayName', width:150, align:"left",sorttype:"string"},

                          {name:'UserName',index:'UserName', width:150,align:"left",sorttype:"string"},

                          {name:'UserAccountingCode',index:'UserAccountingCode', width:150, sortable:false},

                          {name:'Phone',index:'Phone', width:150, sortable:false}

                      ],

                      pager: $('#pager'), //The div we have specified, tells jqGrid where to put the pager

                      rowNum:4, //Number of records we want to show per page

                      rowList:[4,8,12], //Row List, to allow user to select how many rows they want to see per page

                      sortorder: "asc", //Default sort order

                      sortname: "ID", //Default sort column

                      viewrecords: true, //Shows the nice message on the pager

                      imgpath: '/steel/images', //Image path for prev/next etc images

                      caption: 'Users', //Grid Name

                      height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager

                      recordtext:'Total Records', //On the demo you will notice "7 Total Records" - The Total Reocrds text comes from here

                      pgtext:'/',//You notice the 1/3, you can change the /. You can make it say 1 of 3

                      editurl:"Users.cfc?method=getUsers",//Not used right now.

                      toolbar:[true,"top"],//Shows the toolbar at the top. I will decide if I need to put anything in there later.

                      //The JSON reader. This defines what the JSON data returned from the CFC should look like

                      jsonReader: {

                          root: "ROWS", //our data

                          page: "PAGE", //current page

                          total: "TOTAL", //total pages

                          records:"RECORDS", //total records

                          cell: "", //not used

                          id: "0" //will default first column as ID

                          }

                      }

                  );      

            

              }

          );

      </script>

      </body>

      </html>

       

      Users.cfc

      <cffunction name="getUsers" access="remote" returnformat="json">

           <cfargument name="page" required="no" default="1" hint="Page user is on">

          <cfargument name="rows" required="no" default="10" hint="Number of Rows to display per page">

          <cfargument name="sidx" required="no" default="" hint="Sort Column">

          <cfargument name="sord" required="no" default="ASC" hint="Sort Order">

       

              <cfset var arrUsers = ArrayNew(1)>

        

        

              <cfquery name="selUsers" datasource="myDataSource">

                  SELECT

                      ID, FirstName, LastName, DisplayName, UserName, UserAccountingCode, Phone

                  FROM

                      Users

                  <!--- Sorting Here --->

                  <cfif Arguments.sidx NEQ "">

                      ORDER BY #Arguments.sidx# #Arguments.sord#

                  <cfelse>

                      ORDER BY ID #Arguments.sord#

                  </cfif>

            

            

              </cfquery>

        

              <!--- Calculate the Start Position for the loop query.

              So, if you are on 1st page and want to display 4 rows per page, for first page you start at: (1-1)*4+1 = 1.

              If you go to page 2, you start at (2-)1*4+1 = 5 --->

              <cfset start = ((arguments.page-1)*arguments.rows)+1>

        

              <!--- Calculate the end row for the query. So on the first page you go from row 1 to row 4. --->

              <cfset end = (start-1) + arguments.rows>

        

              <!--- When building the array --->

              <cfset i = 1>

        

              <cfloop query="selUsers" startrow="#start#" endrow="#end#">

                  <!--- Array that will be passed back needed by jqGrid JSON implementation --->  

                  <cfset arrUsers[i] = [#ID#,#FirstName#,#LastName#,#DisplayName#,#UserName#,#UserAccountingCode#,#Phone#]>

                  <cfset i = i + 1>      

              </cfloop>

        

              <!--- Calculate the Total Number of Pages for your records. --->

              <cfset totalPages = Ceiling(selUsers.recordcount/arguments.rows)>

        

              <!--- The JSON return.

                  Total - Total Number of Pages we will have calculated above

                  Page - Current page user is on

                  Records - Total number of records

                  rows = our data

              --->

      <cfset stcReturn = {total=#totalPages#,page=#Arguments.page#,records=#selUsers.recordcount#,rows=arrUsers}>

        

          <cfreturn stcReturn>

        

          </cffunction>

       

      Please help.

       

      Thanks

       

      Tayyab Hussain