Problem with JQGrid Array Data - clientSide

Question

I'm using Google Maps' local search, to find businesses in the area of an specific address. The results will be intercepted and should be displayed in a JQGrid table. I would like to use JQGrid's "Array Data" to insert the results locally into the Grid. At this time I have the following code:

        <script type="text/javascript">
        var map = null;
    var geocoder = null;

    function initialize() {
        /* Initialize Google Maps */
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(50.786916, 6.101360), 16);
        //map.setUIToDefault();
        var customUI = map.getDefaultUI();
                customUI.controls.scalecontrol = false;
                map.setUI(customUI);
        var options = {
            onSearchCompleteCallback:function(searcher){
                var resultcontent = '';
                if (searcher.results && searcher.results.length > 0) {
                    for (var i = 0; i < searcher.results.length; i++) {
                        var result = searcher.results[i];

                        // Split Address-Lines into Street and No
                        var TempString = result.addressLines[0];
                        var StreetLine = TempString.split(/\b[0-9]/);
                        // Split Address-Lines to get Zipcode
                        TempString = result.addressLines[1];
                        var CityLine = TempString.split(/\b[^0-9]/);

                        // Construct the Data Array
                        var InputData = "{Firma:\""+result.titleNoFormatting+"\", Strasse:\""+StreetLine[0]+"\", Hausnummer:\""+StreetLine[1]+"\", Postleitzahl:\""+CityLine[0]+"\", Ort:\""+result.city+"\", Telefonnummer:\""+result.phoneNumbers[0].number+"\"}"; 
                        alert(InputData);
                        // Outputs for example: {Firma:"Lukull Pizza Service GbR", Strasse:"Jülicher Straße ", Hausnummer:"6", Postleitzahl:"52070", Ort:"AACHEN", Telefonnummer:"0241 9010080"}

                        // Apply Data to Grid
                        jQuery("#ResultGrid").addRowData(i, InputData);
                    }
                }
            }
        };
        localSearch = new google.maps.LocalSearch(options);
        map.addControl(localSearch);
        map.removeControl(GScaleControl);

        geocoder = new GClientGeocoder();
        $("#map").hide("fast");
      }
    }   
    function showAddress(address, CompleteAdd) {
      // Gets an address from database to pinpoint the location
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 16);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(CompleteAdd);
            }
          }
        );
      }
      $("#map").show("fast");
    }
         $("#ResultGrid")
            .jqGrid({
                colNames:['ID', 'Firma', 'Strasse', 'Hausnummer', 'Postleitzahl', 'Ort', 'Telefonnummer'],
                colModel:[
                {name:'ID', index:'ID', width:55, editable:false, searchable:false},
                {name:'Nachname', index:'Nachname', width:150, editable:false, searchable:false},
                {name:'Strasse', index:'Strasse', width:150, editable:false, searchable:false},
                {name:'Hausnummer', index:'Hausnummer', width:150, editable:false, searchable:false, sorttype:'int'},
                {name:'Postleitzahl', index:'Postleitzahl', width:150, editable:false, searchable:false, sorttype:'int'},
                {name:'Ort', index:'Ort', width:150, editable:false, searchable:false},
                {name:'Telefonnummer', index:'Telefonnummer', width:150, editable:false, searchable:false}
                ],
                datatype: 'clientSide',
                //editurl:'Edit.php',
                height: 240,
                multiselect: true,
                pager:'#ResultPager'
            })
            .navGrid('#ResultPager', {view:false, edit:false, add:false, del:false, search:false, refresh:false} )
            .navButtonAdd('#ResultPager', {title:"Adresse in Addressbuch speichern", buttonicon:"ui-icon-disk", caption:"In Adressbuch speichern", onClickButton:function(){
                //This method should save the selected addresses to the database
                }})                 
         });
    </script>
</head>
<body onload="initialize()" onunload="GUnload()">
    <div class="main" align="center">
        <table id="MyGrid"></table>
        <div id="pager"></div>      
        <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="height: 150px" id="Dialog"></div>
        <div id="map" style="width: 850px; height:450px; padding:10px; font-size: medium; color:#853805; background-color:#FFE8CF;"></div>
        <br/>

        <div id="ResultGrid">
            <div id="ResultPager"></div>
        </div>
    </div>

If a Search is completed and the onSearchCompleteCallback function is called I get this error in firebug:

t.rows is undefined
http://localhost/jQuery_Adressbuch/js/jquery.jqGrid.min.js
Line 123

I can't find any solution for this problem. Does anyone know more about this error or about using local data arrays with JQGrid?

P.S.: I solved the problem. In the HTML section, I created a DIV tag for the Grid instead of a table... pretty stupid of me

Answer 1

You could try including the non-minified version of the jqGrid JavaScript file(s) - that way you can see (and post) the exact line in the jqGrid code that is generating this error.

Also, what version of jqGrid are you using?

For what it's worth, I have used the following options with my local grids, although I doubt this is going to solve your problem:

editurl: "clientArray", // Save to local memory (sync back up on save)
rowNum: -1,
loadonce: true,
imgpath: "../css/redmond/images",

Answer 2

Your main error is very small and could be very simple be solved: you should change the html code fragment

<div id="ResultGrid">
    <div id="ResultPager"></div>
</div>

to the following

<table id="ResultGrid"></table>
<div id="ResultPager"></div>

Answer 3

visit this also http://stackoverflow.com/questions/2461577/jqgrid-sample-using-array-data-what-am-i-missing