jqGrid in Admin page not working?

Topics: Writing modules
May 28, 2012 at 12:53 PM

I have jqGrid configured on a public facing page, consuming json data from my controller and model that is working perfectly.  The data that fills the model comes from the same Orchard database that is being used for the rest of the site, but a different connection - I am not using nHib but instead my own provider/dataaccess layer.  I am using TransactionScopeOption.Suppress on the database call to make this work properly.

I moved this exact same jqGrid, and associated models and controllers to an Admin page in Orchard, and I am able to get the page to load and grid to display, but there is no data loaded in it.  So far I have had to make 1 change to my view - I added @using (Script.Foot()) {  <script> .... blah ... </script> } to get the page to pull in the main jquery .js file (I was getting a "$ undefined" error).

I have verified that json is being returned if I navigate directly to the url I am using in the jqGrid code.

            $("#grid").jqGrid({
                url: 'Admin/ABC.InstructorPortal/GetScheduledCourses/'

Below is my view code...  not sure if I should post controller and model code as well (it hasn't changed).  I guess I'm thinking this has something to do with Orchard, and not with jqGrid??  Any ideas?

 

@{
    Style.Require("JQueryUITheme");
    Script.Require("JQueryUIScript");
    Style.Require("jqGridStyle");
    Script.Require("jqGrid");
    Script.Require("jqGridLang");
    Style.Require("MainStylesheet");
    Script.Require("ABCInstructorPortalScript");
}
<h2>@T("Manage Locations")</h2>

    @using (Script.Foot())
    {
        <script type="text/javascript">
        $(document).ready(function () {
            $("#grid").jqGrid({
                url: 'Admin/ABC.InstructorPortal/GetLocations/',
                datatype: 'json',
                jsonReader: { repeatitems: false },
                mtype: 'GET',
                colNames: ['Id', 'Name', 'Address Line 1', 'Address Line 2', 'City', 'StateId', 'State', 'RegionId', 'Region', 'Zip', 'Phone', 'Fax'],
                colModel: [
                  { name: 'locationId', jsonmap: 'LocationId', index: 'LocationId', width: 40, key: true },
                  { name: 'locationName', jsonmap: 'LocationName', index: 'LocationName', width: 150, editable: true },
                  { name: 'addressLine1', jsonmap: 'AddressLine1', index: 'AddressLine1', width: 150, editable: true },
                  { name: 'addressLine2', jsonmap: 'AddressLine2', index: 'AddressLine2', width: 50, editable: true },
                  { name: 'city', jsonmap: 'City', index: 'City', width: 100, editable: true },
                  { name: 'state_Id', jsonmap: 'State.Id', index: 'StateId', hidden: true },
                  { name: 'state', jsonmap: 'State.Name', index: 'State.Name', width: 50, editable: true, edittype: 'select',
                      editoptions: {
                          dataUrl: 'Admin/ABC.InstructorPortal/GetLookupItems?lookupType=states',
                          buildSelect: createSelectList
                      }
                  },
                  { name: 'region_Id', jsonmap: 'Region.Id', index: 'Region.Id', hidden: true },
                  { name: 'region', jsonmap: 'Region.Name', index: 'Region.Name', width: 80, editable: true, edittype: 'select',
                      editoptions: {
                          dataUrl: 'Admin/ABC.InstructorPortal/GetLookupItems?lookupType=regions',
                          buildSelect: createSelectList
                      }
                  },
                  { name: 'zip', jsonmap: 'Zip', index: 'Zip', width: 40, editable: true },
                  { name: 'phone', jsonmap: 'Phone', index: 'Phone', width: 80, formatter: formatPhoneNumber, editable: true },
                  { name: 'fax', jsonmap: 'Fax', index: 'Fax', width: 80, formatter: formatPhoneNumber, editable: true}],
                pager: $('#pager'),
                rowNum: 20,
                //saveKey: [true, 13], - this doesn't seem to work ..
                sortname: 'Name',
                sortorder: "asc",
                viewrecords: true,
                caption: 'Class Locations',
                height: 400,
                loadonce: true, /* needs to be true for client side paging to work */
                autowidth: true,
                loadtext: 'Loading...'
            })
            $("#grid").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true },
                { /* edit options */
                    url: 'Admin/ABC.InstructorPortal/UpdateLocation/',
                    closeAfterEdit: true,
                    afterSubmit: ReloadGrid
                },
                { /* add options */
                    url: 'Admin/ABC.InstructorPortal/InsertLocation/',
                    closeAfterAdd: true,
                    afterSubmit: ReloadGrid
                },
                { /* delete options */
                    url: 'Admin/ABC.InstructorPortal/DeleteLocation/',
                    closeOnEscape: true,
                    afterSubmit: ReloadGrid
                }
            );
        });


        // converts number to (xxx)xxx-xxxx or xxx-xxx-xxxx
        function formatPhoneNumber(cellvalue, options, rowObject) {
            var re = /\D/;
            // test for this format: (xxx)xxx-xxxx
            var re2 = /^\({1}\d{3}\)\d{3}-\d{4}/;
            // test for this format: xxx-xxx-xxxx
            //var re2 = /^\d{3}-\d{3}-\d{4}/;
            var num = cellvalue;
            var newNum = cellvalue;
            if (num != "" && re2.test(num) != true) {
                if (num != "") {
                    while (re.test(num)) {
                        num = num.replace(re, "");
                    }
                }
                if (num.length == 10) {
                    // for format (xxx)xxx-xxxx
                    newNum = '(' + num.substring(0, 3) + ')' + num.substring(3, 6) + '-' + num.substring(6, 10);
                    // for format xxx-xxx-xxxx
                    // newNum = num.substring(0,3) + '-' + num.substring(3,6) + '-' + num.substring(6,10);
                }
            }
            return newNum;
        }

        function ReloadGrid() {
            $("#grid").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
            return [true, '']; /* no error */
        }
        
    </script>
    }
    <table id="grid"><tr><td/></tr></table> 
    <div style="border:0px solid purple; height:50px;" id="pager"></div>