jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

help: Subgrid JSON data not populated

Tags: subgrid groovy data not populated display subgrid

02/01/2013
04:36

jasm0007

New Member

Members

Forum Posts: 1

Member Since:
02/01/2013

Offline

Hi Guys,

My data is displayed for the main grid but not the subgrid when i pass the information from the controller to the view. This is the json data response passed:


{"records":"1","total":"1","page":"1","rows":[{"id":"1","cell":["cell11","cell12","cell13"]},{"id":"2"
,"cell":["cell21","cell22","cell23"]}]}

Below are my controller and view codes.

SubGridController.groovy

import grails.converters.JSON

class SubGridController {

    def index = { }

def indexJSON = {
  println "Entering indexJSON..."

  def formattedList = []

  def myGridData=[:]
  myGridData.put("id", "1")
  myGridData.put("cell",["cell11", "cell12", "cell13"])

  myGridData=[:]
  myGridData.put("id", "2")
  myGridData.put("cell",["cell21", "cell22", "cell23"])
  formattedList << myGridData

  println 'formatted list => '+formattedList

  def data = [records: '1', total: '1', page: '1', rows: formattedList]
  println 'data => ' + data

  render data as JSON

  println "Exiting indexJSON..."
}
}

index.gsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js%22%3E%3C/script"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js%22%3E%3C/script"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js%22%3E%3C/script"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js%22%3E%3C/script"></script>

      jQuery("#customerDialerTable").jqGrid({
       url:"${createLink(controller:'subGrid', action:'indexJSON')}",
       jsonReader:{
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems:true,
        cell: "cell",
        id:"id",
           subgrid: {root:"rows",
                     repeatitems: true,
                     cell:"cell"
                    }
              },
                datatype: 'json',
                colNames: ['ID', 'Column 1'],
                colModel: [
    {name:'id', index:'id', align:'center', jsonmap:'id', sortable:true,width:'30%'},
    {name:'col1', index:'col1', align:'center', jsonmap:'cell', sortable:true,width:'30%'}
                ],
                align:'center',
                sortname: 'id',
                sortorder: 'desc',
                height: 'auto',
                autowidth:true,
                pager: '#customerDialerPage',
                caption:'Testing',

                scroll: false,
               scrollOffset:'0',
                rowNum:8,
                rowList:[8,20,50],
                viewrecords: true,
                subGrid: true,

                subGridModel :
                                {
                                name : ['No', 'Item']

                    }
            });
});
</script>
</head>

<body>
<div class="box" style="text-align: center;">
  <br /> <br />
  <div id="table">
   <table id="customerDialerTable"></table>
   <div id="customerDialerPage"></div>
  </div>
  
  <br />
</div>

<div id="progressDialog" title="Loading...">
  <p>Please Wait..</p>
  <div id="progressBar"></div>
  
</div>
</body>
</html>

Thanks all for the help as i'm rather new to jquery/jqgrid 🙂

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
36 Guest(s)