jQuery Grid Plugin - jqGrid

Hi Tony,

I'm also having trouble with column chooser. When I click on the column chooser button I get the error "G is not defined". When I downloaded 3.6.1 I chose everything. I'm not using the minified version (jquery.jqgrid.min.js) I'm using the loader. Here are the modules I'm loading:

    var modules = [
        { include: true, incfile:'i18n/grid.locale-en.js'}, // jqGrid translation
        { include: true, incfile:'grid.base.js'}, // jqGrid base
        { include: true, incfile:'grid.common.js'}, // jqGrid common for editing
        { include: true, incfile:'grid.formedit.js'}, // jqGrid Form editing
        { include: true, incfile:'grid.inlinedit.js'}, // jqGrid inline editing
        { include: true, incfile:'grid.celledit.js'}, // jqGrid cell editing
        { include: true, incfile:'grid.subgrid.js'}, //jqGrid subgrid
        { include: true, incfile:'grid.treegrid.js'}, //jqGrid treegrid
        { include: true, incfile:'grid.custom.js'}, //jqGrid custom
        { include: true, incfile:'grid.postext.js'}, //jqGrid postext
        { include: true, incfile:'grid.tbltogrid.js'}, //jqGrid table to grid
        { include: true, incfile:'grid.setcolumns.js'}, //jqGrid setcolumns
        { include: true, incfile:'grid.import.js'}, //jqGrid import
        { include: true, incfile:'jquery.fmatter.js'}, //jqGrid formater
        { include: true, incfile:'JsonXml.js'}, //xmljson utils
        { include: true, incfile:'grid.jqueryui.js'}, //jQuery UI utils
        { include: true, incfile:'jquery.searchFilter.js'}, // search Plugin
       
        { include: true, incfile:'grid.postext.js'},
        { include: true, incfile:'grid.DnR.js'},
        { include: true, incfile:'grid.Modal.js'},
        { include: true, incfile:'grid.multiselect.js'}
       
    ];

Regards,

Simon

Hi Tony,

I'm now using the jquery.jqgrid.min (3.6.1) I picked every option for download. But when I click on the column chooser button firebug gives me the error 'G is undefined'.

This is my grid definition:

        $('#g_stock').jqGrid({
            colNames: [
                    'Primary Image',
                    'Id', 'Artist ID',
                    'MediumID', 'SourceID', 'StockOwnerID', 'ClientID',
                    'Artist',

                    'Description',
                   
                    'Medium', 'Category', 'Source', 'Owner', 'Client',
                    'Cost Price',
                    'Ticket Price',
                    'Sold Price',
                    'Sold',

                    'Signed', 'Location', 'ArtistName', 'Artist Relevant Dates', 'Artist Biography'
                ],
            colModel: [
                  { searchoptions: {searchhidden:true}, name: 'jqPrimaryImage', search: false, sortable: false, hidden: false, index: 'jqPrimaryImage', width: 110, align: 'center' },

                  { searchoptions: { searchhidden: true }, name: 'Id', search: false, sortable: false, hidden: true, index: 'Id', width: 40, align: 'left' },
                  { searchoptions: { searchhidden: true }, name: 'ArtistID', search: false, sortable: false, hidden: true, index: 'ArtistID', width: 40, align: 'left' },

                  { searchoptions: { searchhidden: true }, name: 'MediumID', search: false, sortable: false, hidden: true, index: 'MediumID', width: 40, align: 'left' },
                  { searchoptions: { searchhidden: true }, name: 'SourceID', search: false, sortable: false, hidden: true, index: 'SourceID', width: 40, align: 'left' },
                  { searchoptions: { searchhidden: true }, name: 'StockOwnerID', search: false, sortable: false, hidden: true, index: 'StockOwnerID', width: 40, align: 'left' },
                  { searchoptions: { searchhidden: true }, name: 'ClientID', search: false, sortable: false, hidden: true, index: 'ClientID', width: 40, align: 'left' },

                  { searchoptions: { searchhidden: true }, name: 'ArtistProperName', search: true, sortable: true, hidden: false, index: 'ArtistProperName', width: 80, align: 'left', stype: "text" },
                  { searchoptions: { searchhidden: true }, name: 'Description', search: true, sortable: true, hidden: false, index: 'Description', width: 100, align: 'left', stype: "text" },

                  { searchoptions: { searchhidden: true }, name: 'Medium', search: true, sortable: true, hidden: true, index: 'Medium', width: 40, align: 'left', stype: "text" },
                  { searchoptions: { searchhidden: true }, name: 'Category', search: true, sortable: true, hidden: true, index: 'Category', width: 40, align: 'left', stype: "text" },
                  { searchoptions: { searchhidden: true }, name: 'Source', search: true, sortable: true, hidden: true, index: 'Source', width: 60, align: 'left', stype: "text" },
                  { searchoptions: { searchhidden: true }, name: 'StockOwner', search: true, sortable: true, hidden: true, index: 'StockOwner', width: 60, align: 'left', stype: "text" },
                  { searchoptions: { searchhidden: true }, name: 'Client', search: true, sortable: true, hidden: true, index: 'Client', width: 60, align: 'left', stype: "text" },

                  { searchoptions: { searchhidden: true }, name: 'CostPrice', search: true, sortable: true, hidden: false, index: 'CostPrice', width: 40, align: 'right', stype: "text", formatter: 'currency', formatoptions: { thousandsSeparator: ","} },
                  { searchoptions: { searchhidden: true }, name: 'TicketPrice', search: true, sortable: true, hidden: false, index: 'TicketPrice', width: 40, align: 'right', stype: "text", formatter: 'currency', formatoptions: { thousandsSeparator: ","} },
                  { searchoptions: { searchhidden: true }, name: 'SoldPrice', search: true, sortable: true, hidden: false, index: 'SoldPrice', width: 40, align: 'right', stype: "text", formatter: 'currency', formatoptions: { thousandsSeparator: ","} },

                  { searchoptions: { searchhidden: true }, name: 'Sold', search: true, sortable: true, hidden: false, index: 'Sold', width: 35, align: 'center', stype: "bool", formatter: 'checkbox' },

                  { searchoptions: { searchhidden: true }, name: 'Signed', search: true, sortable: true, hidden: true, index: 'Signed', width: 35, align: 'center', stype: "bool", formatter: 'checkbox' },
                  { searchoptions: { searchhidden: true }, name: 'Location', search: true, sortable: true, hidden: true, index: 'Location', width: 40, align: 'left', stype: "text" },
                  { searchoptions: { searchhidden: true }, name: 'ArtistName', search: false, sortable: false, hidden: true, index: 'ArtistName', width: 40, align: 'left' },
                  { searchoptions: { searchhidden: true }, name: 'ArtistDates', search: false, sortable: false, hidden: true, index: 'ArtistDates', width: 40, align: 'left' },
                  { searchoptions: { searchhidden: true }, name: 'Artist Biography', search: true, sortable: false, hidden: true, index: 'Comments', width: 40, align: 'left', stype: "text" }

                ],

            url: '/Admin/Stock/GetListData/',
            autowidth: true,
            pager: "#pager",
            rowNum: 5,
            rowList: [],
            sortname: 'ArtistName',
            sortorder: "asc",
            caption: "Stock",
            footerrow: true,
            userDataOnFooter: true,
            datatype: 'json',
            height: 'auto',
            imgpath: '/Scripts/themes/ui-darkness/images',
            jsonReader: {
                root: "Rows",
                page: "Page",
                total: "Total",
                records: "Records",
                repeatitems: false,
                userdata: "UserData",
                id: "Id"
            },
            loadui: "block",
            mtype: 'GET',
            rowNum: 10,
            rowList: [],
            viewrecords: true,
            toolbar: [true, "top"]
        }).navGrid(
            "#pager",
            {
                refresh: false,
                edit: false,
                add: false,
                del: false,
                search: true
            },
            {}, // edit options
            {}, // add options
            {}, // del options
        // search options
            {
                multipleSearch: true
        }
       );

       $('#g_stock').jqGrid('navButtonAdd', '#pager',
       {  
            caption: "Columns",
            title: "Reorder Columns",
            onClickButton: function() { jQuery("#pager").jqGrid('columnChooser'); }
       });

Thanks,

Regards,

Simon

Thanks Tony, I hadn't read this, the mistake I made was defining the column choose as follows:

        $(gridSelector).jqGrid('navButtonAdd', '#pager',
        {
            caption: "Columns",
            title: "Reorder Columns",
            onClickButton: function() { jQuery(#pager).columnChooser(null); }
        });

when of course it should have been this:

        $(gridSelector).jqGrid('navButtonAdd', '#pager',
        {
            caption: "Columns",
            title: "Reorder Columns",
            onClickButton: function() { jQuery(gridSelector).columnChooser(null); }
        });

And of course to get the nice multi select dialog I also needed to include the ui.multiselect.js and ui.multiselect.css files.

Thanks for pointing me in the right direction - all working brilliantly now.

On a very minor point, aren't the ok and cancel buttons the wrong way round on the multi select dialog. All other dialog boxes in windows with western style (left to right languages) the buttons are <OK> <Cancel>. The multiselect dialog appears <Cancel> <OK>.

Thanks again for your help.

Regards,

Simon