CODEWITHSUNDEEP
jqueryjqgrid
Andrey Maraev
Andrey Maraev

Reputation: 141

JqGrid add form re-design

I have a NavGrid with the add,edit,del mode which is true. I have problems with design the add form like here:

enter image description here

I want that the "requestor\registor first name and second name" would be in line. Does anyone know how to fix it? My ColModel is here:

  

      colModel:[
                {name:'id',index:'id', width:20, hidden:true},
                {name:'file_name',index:'file_name', width:100, hidden:false, align:"right",editable:true,edittype:'text',formoptions:{label:'Map Name*',rowpos:2,colpos:1},editrules:{required:true},editoptions:{size:30}},
                {name:'file_title',index:'file_title', width:100, align:"right", hidden:false,label:'wtf',editable:true,edittype:'textarea',formoptions:{label:'Decription',rowpos:3,colpos:1},editoptions:{rows:4,cols:30}},
                {name:'file_size',index:'file_size', width:70, align:"right", hidden:false, editable:true, formoptions:{label:'Size',rowpos:4,colpos:1}, editoptions:{size:10},editrules:{edithidden:true,integer:true,required:true}},
                {name:'uploaded_date',index:'uploaded_date', width:120, sorttype:'date',hidden:false, editable:true, formoptions:{label:'Data Created',rowpos:5,colpos:1}, editoptions:{readonly:'readonly',defaultValue:datenow()}},
                {name:'modtime',index:'modtime', width:80, hidden:false, editable:true, formoptions:{label:'Date Modified',rowpos:6,colpos:1},editoptions:{readonly:'readonly',defaultValue:datenow()}},
                {name:'locationn',index:'locationn', width:80, align:"right", hidden:false, editable:true,edittype:'text',formoptions:{label:'Map Location *',elmsuffix:'
i.e. Germany',rowpos:7,colpos:1},editoptions:{size:30},editrules:{required:true}},
                {name:'registorn',index:'registorn', width:80, align:"right", hidden:false, editable:true,edittype:'text',formoptions:{label:'Registrator Name *',elmsuffix:'
i.e. Ivan Ivanov',rowpos:8,colpos:1},editrules:{required:true}},
                {name:'registorn2',index:'registorn2', width:80, align:"left", hidden:false, editable:true,edittype:'text',formoptions:{rowpos:8,colpos:2,label:' ',elmsuffix:'
'},editrules:{required:true}},
                {name:'requestorn',index:'requestorn', width:80, align:"right", hidden:false, editable:true,edittype:'text',formoptions:{label:'Requestor Name *',elmsuffix:'
i.e. Ivan Ivanov',rowpos:10,colpos:1},editoptions:{size:20,rows:1},editrules:{required:true}},
                {name:'requestorn2',index:'requestorn2', width:80, align:"left", hidden:false, editable:true,edittype:'text',formoptions:{rowpos:10,colpos:2,label:' ',elmsuffix:'
'},editoptions:{size:20,rows:1},editrules:{required:true}},
                {name:'projectid',index:'projectid', width:80, align:"right", hidden:false, editable:true,formoptions:{label:'Project Name*',rowpos:12,colpos:1},editrules:{required:true}},
                {name:'estimated_date',index:'estimated_date', width:80, align:"right", hidden:false, editable:true, formoptions:{label:'Estimated Date*',rowpos:13,colpos:1},editrules:{required:true},editoptions:{dataInit: function(elem) {$(elem).datepicker({dateFormat:'yy-mm-dd'})}}},
                {name:'wms_flag',index:'wms_flag', width:30, align:"right", hidden:false, editable:true,formatter:'checkbox',formoptions:{label:'WMS Mode*',elmsuffix:'
Turn On/Off',rowpos:14,colpos:1},edittype:"checkbox",editoptions: {value:"Yes:No",defaultValue: 'Yes'}},
                {name:'wfs_flag',index:'wfs_flag', width:30, align:"right", hidden:false, editable:true,formatter:'checkbox',formoptions:{label:'WFS Mode*',rowpos:14,colpos:2},edittype:"checkbox",editoptions: {value:"Yes:No",defaultValue: 'Yes'}}
            ],

Upvotes: 0

Views: 857

Answers (1)

Mark
Mark

Reputation: 3123

If you examine the table that jqGrid builds for you, you can see the elements that it creates and then apply a style to them to reformat the layout.

Ex. Changing the width of a textbox for a edit window form element. 

.FormElement #AmountForTrade {width:48px;}

Upvotes: 0

Related Questions