Order Columns in JqGrid

Question

I have this declaration on my script and i want to choose the columns that can see on it..

       $("#list").jqGrid({
            url: '/persons.ashx',
            datatype: 'xml',
            mtype: 'GET',
            colNames: ['Name', 'Age'],
            colModel: [
            { name: 'Name', index: 'Name', width: 100, align: 'center', editable: true, editoptions: { size: 30 }, editrules: { edithidden: false }, sortable: true },
            { name: 'Age', index: 'Age', width: 100, align: 'center', editable: true, editoptions: { size: 30 }, editrules: { edithidden: false }, sortable: true }
            ]
            ajaxSelectOptions: {
                data: {
                    codSelected: function () { return _codSelected; }
                      }
            },
            onSelectRow: function (rowid) {
               _codSelected = rowid;
            },
            autoencode: true,
            pager: '#pager',
            rowNum: 20,
            sortname: 'Name',
            sortorder: 'asc',
            sortable: true,
            autowidth: false,
            width: 999,
            height: -1,
            shrinkToFit: true,
            viewrecords: true,
            gridview: true,
            caption: 'Persons',
            editurl: ''
        });

        jQuery("#list").jqGrid('navGrid',
            '#pager',
            {
                add: false,
                del: false,
                edit: false,
                search: true,
                refresh: true,
                cloneToTop: true
            },
            { width: 360, resize: false, closeAfterEdit: true, recreateForm: true, viewPagerButtons: true
            },
            { width: 360, resize: false, closeAfterAdd: true, recreateForm: true },
            {}, //Delete action
            { closeAfterSearch: true, closeOnEscape: true }
        );
    });

        //CODE ADDDED TO CAN CHOOSE COLUMNS
        jQuery("#list").jqGrid('navButtonAdd', '#pager', {
                    caption: "",
                    buttonicon: "ui-icon-calculator",
                    title: "Choose columns",
                    onClickButton: function () {
                        $(this).jqGrid('columnChooser');
                    }
                });

I have 14 columns, but i cant see all in my screen, i have put only 2 columns in this example, but i cant see the choose button near reload button, and in fact, cant choose any column to order it..

Can anyone help me?

Thanks.

Answer 1

The code which you posted has some syntax problems. It looks like

    $("#list").jqGrid({
        ...
    });
    jQuery("#list").jqGrid('navGrid', ...
    );
});
    jQuery("#list").jqGrid('navButtonAdd', '#pager', { ...
    });

I suppose it looks like

$(function () {
    $("#list").jqGrid({
        ...
    });
    jQuery("#list").jqGrid('navGrid', ...
    );
});
    jQuery("#list").jqGrid('navButtonAdd', '#pager', { ...
    });

and you try to use navButtonAdd out of $(document).ready(...).

If it's really so, you should move call of navButtonAdd inside of $(document).ready(...) directly after the call of navGrid and the problem will be solved.