Ndtyjky

I have been trying jqgrid and is fantastic. After searching a lot, I havent found anything related to this topic, and some help would be great.

I need to create dynamically many jqgrid instances from jquery and append them into a list in html.

My problem is that the navGrid pagination div is not showing the add/edit default buttons, neither custom buttons added manually.

Here is the sample code:

function NewgJQGridInstance(houseHoldGridId, gridPlaceholder) {

                //Local variables

                var myGrid = $("<table>").attr("id", houseHoldGridId);

                var myPager = $("<div>").attr("id", houseHoldGridId + "_pager");



                function publicInit() {

                    gridPlaceholder.append(myGrid, myPager);

                    myGrid.jqGrid({

                        datatype: "local",

                        cellsubmit: 'clientArray',

                        height: 100,

                        width: 1300,

                        colModel: [

                            { label: 'Cantidad', name: 'cantidad_menaje', index: 'cantidad_menaje', width: 120, sortable: false, sorttype: "int", editable: true, editrules: { required: true }, editoptions: { size: 10, maxlength: 5 } },

                            { label: 'Menaje', name: 'menaje', index: 'menaje', width: 300, sortable: false, sorttype: "int", editable: true, editrules: { required: true }, editoptions: { size: 50, maxlength: 100 } },

                            { label: 'Observaciones particulares del menaje', name: 'observaciones_menaje', index: 'observaciones_menaje', width: 750, sortable: false, sorttype: "int", editable: true, editrules: { required: true }, editoptions: { size: 10, maxlength: 10 } }

                        ],

                        pager: myPager,

                        loadonce: true,

                        //pgbuttons: false,

                        //pgtext: null,

                        viewrecords: false,

                        loadError: function (jqXHR, textStatus, errorThrown) {

                            alertError('Error al cargar el grid', 'HTTP message body (jqXHR.responseText): ' + 'n' + jqXHR.responseText);

                        }

                    });

                }

                //Initialization

                return {

                    init: publicInit

                }

            };



            var gridDin = new NewgJQGridInstance("jq1234", cellWhereAppendTheGrid);

            gridDin.init();

I have tried several ways of showing the navGrid buttons, but none of them worked for the moment.

My first approach was defining the navGrid pager like this:

myGrid.navGrid(myPager,

                    // the buttons to appear on the toolbar of the grid

                    { edit: true, add: true, del: true, search: false, refresh: false, view: false, position: "left", cloneToTop: false },

                    // options for the Edit Dialog

                    {

                        url: 'clientArray',

                        editCaption: "Edición de elemento",

                        recreateForm: true,

                        beforeInitData: function () {

                        },

                        checkOnUpdate: false,

                        checkOnSubmit: false,

                        closeOnEscape: true,

                        beforeSubmit: function (postdata, form, oper) {

                            if (confirm('¿Deseas realmente modificar este registro?')) {

                                // do something

                                return [true, ''];

                            } else {

                                return [false, '¡La modificación no se ha guardado!'];

                            }

                        },

                        closeAfterEdit: true,

                        savekey: [true, 13],

                        errorTextFormat: function (data) {

                            return 'Error: ' + data.responseText;

                        }

                    },

                    // options for the Add Dialog

                    {

                        url: 'clientArray',

                        closeAfterAdd: true,

                        closeOnEscape: true,

                        recreateForm: true,

                        errorTextFormat: function (data) {

                            return 'Error: ' + data.responseText;

                        }

                    },

                    // options for the Delete Dailog

                    {

                        url: 'clientArray',

                        recreateForm: true,

                        closeOnEscape: true,

                        errorTextFormat: function (data) {

                            return 'Error: ' + data.responseText;

                        }

                    });

This case was not working, so I tried this other code more simple:

myGrid.jqGrid('navGrid', myPager,

                        {

                            edit: true,

                            add: true,

                            del: true,

                            search: false,

                            searchtext: "Buscar",

                            refreshtext: "",

                            addtext: "Add",

                            edittext: "Editar",

                            deltext: "Delete"

                        },

                        {

                            multipleSearch: true

                        });

Still no buttons appeared in the navigation pager.

Any idea of what could be wrong?. Thanks a lot!