I have followed JQGrid articles and help provided here and was able to display a table in JQGrid. I was able to do CRUD operations using edit form mode. I tried to repeat the same approach for another table but with more fields than the first table. In the second case, only 8 rows are displayed in edit form. The jqgrid colmodel goes till 10th row using rowpos and colpos.
I looked at JQGrid - show additional columns in edit form but when i checked the example, it showed me 8 rows as per the example. Using dataheight, I was able to increase the height of the form but the additional rows still did not display.
Can anyone help? Thanks in advance.
Colmodel is as follows -
colModel: [
{ name: 'Id', index: 'Id', formatter: 'int', hidden: true /*, width: 100, align: 'right', frozen: true, editoptions: { defaultValue: 0 }*/
}
, { name: 'Name', index: 'Name', width: 300, template: stringEdColTemplate
, editoptions: { maxlength: 50, size: 40 }
, formoptions: { elmsuffix: ' *', rowpos: 1, colpos: 1 }, editrules: { required: true/*, custom:true, custom_func:formcheck*/ }
}
, { name: 'Code', index: 'Code', formatter: 'string', align: 'left', editable: true
, editoptions: { maxlength: 20, size: 40 }
, formoptions: { elmsuffix: ' *', rowpos: 2, colpos: 1 }, editrules: { required: true, custom: true, custom_func: depotCodeLength }
}
, { name: 'Email', index: 'Email', width: 150, formatter: 'string', align: 'left', editable: true
, editoptions: { size: 40, email:true}, formoptions: { elmsuffix: ' *', rowpos: 3, colpos: 1 }, edittype: 'text'
, editrules: { required:true }
}
, { name: 'Location', index: 'Location', formatter: 'string', align: 'left', editable: true
, editoptions: { maxlength: 9, size: 40 }
, formoptions: { elmsuffix: ' *', rowpos: 5, colpos: 1 }, editrules: { required: true }
}
, { name: 'IsActive', index: 'IsActive', width: 75, formatter: 'checkbox', align: 'center', edittype: 'checkbox'
, formoptions: { rowpos: 8, colpos: 1 }, editable: true, editoptions: { value: 'Yes:No', defaultValue: 'Yes' }
}
, { name: 'Password', index: 'Password', width: 150, formatter: 'string', align: 'left', editable: true, hidden: true
, editoptions: { size: 40 }
, formoptions: { elmsuffix: ' *', rowpos: 4, colpos: 1 }, edittype: 'text'
, editrules: { required: true, edithidden:true }
}
, { name: 'Address1', index: 'Address1', width: 150, formatter: 'string', align: 'left', edittype: 'text'
, editoptions: { maxlength: 25, size: 40 }, hidden:true
, formoptions: { rowpos: 6, colpos: 1 }, editable: true, editrules: { edithidden:true }
}
, { name: 'Address2', index: 'Address2', width: 150, formatter: 'string', align: 'left', edittype: 'text'
, editoptions: { maxlength: 25, size: 40 }, hidden:true
, formoptions: { rowpos: 7, colpos: 1 }, editable: true, editrules: { edithidden:true }
}
, { name: 'State', index: 'State', width: 150, formatter: 'string', align: 'left', edittype: 'text'
, editoptions: { maxlength: 25, size: 40 }, hidden:true
, formoptions: { rowpos: 1, colpos: 2 }, editable: true, editrules: { edithidden:true }
}
, { name: 'Country', index: 'Country', width: 200, formatter: 'string', align: 'left', formoptions: { elmsuffix: ' *', rowpos: 2, colpos: 2 }
, hidden:true, editable: true
, edittype: 'select', editrules: { required: true }
, editoptions: countryOptions
}
, { name: 'CountryCode', index: 'CountryCode', width: 50, formatter: 'string', align: 'left', hidden: true }
, { name: 'Zip', index: 'Zip', width: 50, formatter: 'string', align: 'left', edittype: 'text'
, editoptions: { maxlength: 25, size: 40 }, formoptions: { rowpos: 3, colpos: 2 }, editable: true
, editrules: { edithidden: true }, hidden: true
}
, { name: 'HomePhone', index: 'HomePhone', width: 50, formatter: 'string', align: 'left', edittype: 'text'
, editoptions: { maxlength: 25, size: 40 }, formoptions: { rowpos: 4, colpos: 2 }, editable: true
, editrules: { edithidden: true }, hidden: true
}
, { name: 'WorkPhone', index: 'WorkPhone', width: 50, formatter: 'string', align: 'left', edittype: 'text'
, editoptions: { maxlength: 25, size: 40 }, formoptions: { rowpos: 5, colpos: 2 }, editable: true
, editrules: { edithidden: true }, hidden: true
}
, { name: 'Mobile', index: 'Mobile', width: 50, formatter: 'string', align: 'left', edittype: 'text'
, editoptions: { maxlength: 25, size: 40 }, formoptions: { rowpos: 6, colpos: 2 }, editable: true
, editrules: { edithidden: true }, hidden: true
}
, { name: 'Path', index: 'Path', align: 'right', formatter: 'string', editable: true, hidden: true }
, { name: 'Day1', index: 'Day1', width: 75, , formatter: 'checkbox', align: 'center', edittype: 'checkbox', hidden:true
, formoptions: { rowpos: 8, colpos: 2 }, editable: true, editoptions: { edithidden:true, value: 'Yes:No', defaultValue: 'Yes' }
}
, { name: 'Day2', index: 'Day2', width: 75, , formatter: 'checkbox', align: 'center', edittype: 'checkbox', hidden: true
, formoptions: { rowpos: 9, colpos: 1 }, editable: true, editoptions: { edithidden:true, value: 'Yes:No', defaultValue: 'Yes' }
}
, { name: 'Day3', index: 'Day3', width: 75, , formatter: 'checkbox', align: 'center', edittype: 'checkbox', hidden: true
, formoptions: { rowpos: 9, colpos: 2 }, editable: true, editoptions: { edithidden:true, value: 'Yes:No', defaultValue: 'Yes' }
}
, { name: 'Day4', index: 'Day4', width: 75, , formatter: 'checkbox', align: 'center', edittype: 'checkbox', hidden: true
, formoptions: { rowpos: 10, colpos: 1 }, editable: true, editoptions: { edithidden:true, value: 'Yes:No', defaultValue: 'Yes' }
}
, { name: 'Day5', index: 'Day5', width: 75, , formatter: 'checkbox', align: 'center', edittype: 'checkbox', hidden: true
, formoptions: { rowpos: 10, colpos: 2 }, editable: true, editoptions: { edithidden:true, value: 'Yes:No', defaultValue: 'Yes' }
}
, { name: 'Day6', index: 'Day6', width: 75, , formatter: 'checkbox', align: 'center', edittype: 'checkbox', hidden: true
, formoptions: { rowpos: 11, colpos: 1 }, editable: true, editoptions: { edithidden:true, value: 'Yes:No', defaultValue: 'Yes' }
}
, { name: 'Day7', index: 'Day7', width: 75, , formatter: 'checkbox', align: 'center', edittype: 'checkbox', hidden: true
, formoptions: { rowpos: 11, colpos: 2 }, editable: true, editoptions: { edithidden:true, value: 'Yes:No', defaultValue: 'Yes' }
}
]
Found the answer in jQgrid show hidden column in form view
