<style>
#JqxGrid1{
word-wrap: break-word !important;
}
</style>
<div style="height: calc(100vh - 303px);">
<div id="grdBOQDetails"></div>
</div>
$(document).ready(function () {
var autoRowHeightJqxGrid=false;
var autoHeightJqxGrid=false;
$("#JqxGrid1").jqxGrid(
{
localization: Getlocalizationobj(),
width: 100 + "%",
height: 100 + "%",
columnsresize: true,
columnsreorder: false,
enablecolumnsvirtualization: false,
filterable: true,
showfilterrow: true,
theme: theme,
source: dataAdapter,
editable: true,
altrows: true,
sortable: true, //rowsheight: 25,
enabletooltips: true,
keyboardnavigation: false,
enablekeyboarddelete: false,
selectionmode: 'multiplerowsextended',
autoheight: autoHeightJmsGrid,
autorowheight: autoRowHeightJmsGrid,
columns: [
{ text: '', dataField: 'Text1', hidden: true },
{ text: "", dataField: 'Text2', hidden: true },
{ text: "", dataField: 'Text3', hidden: true }
]
});
$('#btnWrap').on('click', function () {
autoHeightJqxGrid = !$('#JqxGrid1').jqxGrid('autoheight');
autoRowHeightJqxGrid = !$('#JqxGrid1').jqxGrid('autorowheight');
$('#JqxGrid1').jqxGrid({ autorowheight: autoRowHeightJqxGrid,
autoheight:autoHeightJqxGrid });
});
});
This functionality is for expanding the row height according to the content when #btnWrap button is clicked. But after the click vertical and horizontal scroll bar is missing. It is caused due to autoheight
functionality. But in jqxGrid it is not possible to use autorowheight
without autoheight
.In jqxTreeGrid there is no such issue,but in jqxGrid issue is there.
Can anyone help me to find a solution?