2

Is there an option to include rowpos and colpos in beforShowForm. I understand that it should be used under formoption setting of colModel. but my grid has customised edit (say status) and normal edit. I want different alignment for these two. below are my code for reference

bulkgrid.jqGrid('navGrid','#bulkktrackpager',{   
    edit: true,   
    add: true,   
    del: true,    
    search: true,    
    view: true,    
    //cloneToTop: true,
}).navButtonAdd('#bulkktrackpager',{   
    caption:"Status",      
    buttonicon:"ui-icon-lightbulb",      
    position:"last",    
});           

any idea???? many thanks..

    }).navButtonAdd('#bulkktrackpager',{
     caption:"Status", 
     buttonicon:"ui-icon-lightbulb", 
     position:"last",
     onClickButton: function(){ 
             var $self = $(this);
             $self.jqGrid("editGridRow", $self.jqGrid("getGridParam", "selrow"),
                {
                    beforeInitData: function(formid) {
                        bulkgrid.setColProp('status', {
                            formoptions : {
                                rowpos : 1,
                                colpos: 1,
                            },
                        });
                        bulkgrid.setColProp('ctno', {
                            formoptions : {
                                rowpos : 1,
                                colpos: 2,
                            },

                        });
                        //similaryly other elements
                    },  
                     beforeShowForm: function(form) { 
                         $("#tr_agent").hide();
                    },
                    recreateForm: true,
                    editData: {//Function to Add parameters to the status 
                        oper: 'status',
                    },
                    closeAfterEdit: true,
                    reloadAfterSubmit: true,
                });
    }
});

Images enter image description here Image2 enter image description here

Wahab
  • 520
  • 5
  • 24

1 Answers1

2

You can use rowpos and colpos properties of formoptions. You can set the values dynamically inside of beforeInitData callback. You should use recreateForm: true option additionally to be sure that jqGrid uses the current values.

The demo created for the answer demonstrate "static" usage of rowpos and colpos properties of formoptions. If you need to change alignment of all labels of the you can set text-align style (see the answer). Alternatively you can set CSS style text-align for specific labels only. You need to set the style inside of beforeShowForm callback for example.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • wow! clean and clear solution. dynamic rowpos and colpos works like a charm. will try text-align later. thanks Oleg. – Wahab Sep 26 '13 at 05:54
  • @oleg.. dont understand why after mentioning recreateForm: true, getting same form model for edit and status. i updated the codes in my question.. – Wahab Sep 26 '13 at 11:56
  • @Wahab: Do you have some problem? What works incorrect now? The code seems correct. I personally prefer to redefine default values of form editing with `jQuery.extend(jQuery.jgrid.edit, {...});` instead of inserting the option like `recreateForm: true, closeAfterEdit: true, reloadAfterSubmit: true`. I would use also `$this` or `$(this)` instead of `bulkgrid` in the code of `beforeInitData` and remove trailing `","` after `reloadAfterSubmit: true` to be more strict to JavaScript language. – Oleg Sep 26 '13 at 12:19
  • the problem i am facing is for normal edit and status (added in navButtonAdd) has same form elements and form structure. i want different elements and different structure. here status overrides edit elements – Wahab Sep 26 '13 at 12:36
  • updated images for your reference. here both edit and status shows same form – Wahab Sep 26 '13 at 12:48
  • @Wahab: What exactly should be different? Do you use different `rowpos` and `colpos` in both cases? Do you used `recreateForm: true` in both cases? Do you tried to *overwrite* default value `recreateForm: false` to `true` with respect of `jQuery.extend(jQuery.jgrid.edit, {...});` like I suggested in my previous comment? If you don't want to do this you have to set `recreateForm: true` option in `navGrid` (see `prmEdit` and `prmAdd` parameters in [the documentation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator#definition) of `navGrid`). – Oleg Sep 26 '13 at 13:06
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/38140/discussion-between-wahab-and-oleg) – Wahab Sep 27 '13 at 04:45
  • What exactly should be different? ---> status form should be a subset of edit with different rowpos and colpos (some fields are hidden). Do you use different rowpos and colpos in both cases? --> yes Do you used recreateForm: true in both cases? ---> yes Do you tried to overwrite default value recreateForm: false to true with respect of jQuery.extend(jQuery.jgrid.edit, {...}); like I suggested in my previous comment? ---> yes updates 1. normal edit works fine. 2. status edit shows different alignment. (some fields are hidden and aligned @ different position) – Wahab Sep 30 '13 at 06:44