autoRowHeight does not work for the first column

[OdevelopParticipant]

Hi,
I am using the jqxTreeGrid in more views.
I created an option for changing the “autoRowHeight”.
In some views that does not work for the first column.
Is there a reason and a solution for it?

[Peter StoevKeymaster]

Hi Odevelop,

If you would like to report something, then please share a full example which demonstrates it and information why you think that autoRowHeight does not work according to you. Example with autoRowHeight set to false: http://jsfiddle.net/rL1yz927/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[OdevelopParticipant]

Hi,

Here are the files that are included:

    <script type="text/javascript" src="@Url.Content("~/Scripts/jqwidgets-ver3.3.0/jqxcore.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jqwidgets-ver3.3.0/jqxdata.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jqwidgets-ver3.3.0/jqxbuttons.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jqwidgets-ver3.3.0/jqxscrollbar.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jqwidgets-ver3.3.0/jqxmenu.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jqwidgets-ver3.3.0/jqxlistbox.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jqwidgets-ver3.3.0/jqxdropdownlist.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jqwidgets-ver3.3.0/jqxdata.export.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jqwidgets-ver3.3.0/jqxdatatable.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jqwidgets-ver3.3.0/jqxtreegrid.js")"></script> 

And here is the initialization of the grid:

var source =
{
datatype: “json”,
datafields: [
{ name: ‘cont_id’, type: ‘string’ },
{ name: ‘space_id’, type: ‘string’ },
{ name: ‘space_name’, type: ‘string’ },
{ name: ‘cont_sortid’, type: ‘number’ },
{ name: ‘come_state’, type: ‘number’ },
{ name: ‘come_state_name’, type: ‘string’ },
{ name: ‘come_state_time’, type: ‘date’ },
{ name: ‘come_title’, type: ‘string’ },
{ name: ‘come_desc’, type: ‘string’ },
{ name: ‘come_key’, type: ‘string’ },
{ name: ‘come_creator_name’, type: ‘string’ },
{ name: ‘come_editor_name’, type: ‘string’ },
{ name: ‘come_begin’, type: ‘date’ },
{ name: ‘come_end’, type: ‘date’ },
{ name: ‘theme_name’, type: ‘string’ },
{ name: ‘is_allow_edit’, type: ‘bool’ },
{ name: ‘is_overdue’, type: ‘bool’ }
],
hierarchy: {
root: “children”
},
url: url,
type: ‘POST’,
data: {
space_id: HTTP_GET_VARS[“space_id”]
}
};

var dataAdapter = new $.jqx.dataAdapter(source);
var grid = $(“#d_treegrid”);

grid.jqxTreeGrid(
{
width: ‘100%’,
height: ‘90%’,
source: dataAdapter,
columnsResize: true,
sortable: true,
showStatusbar: true,
autoRowHeight: false,
exportSettings: {
columnsHeader: true,
hiddenColumns: true,
serverURL: save_file_path,
characterSet: “UTF-8”,
collapsedRecords: true,
recordsInView: true,
fileName: “Export”
},
renderStatusbar: function (statusBar) {
if ($(‘#lb_measure_count’).length == 0) {
var documents_count = $(‘<label id=”lb_measure_count” style=”padding-left:5px;padding-top:5px;”>’ + total_count + ‘ ‘ + measure_localization + ‘</label>’);
statusBar.append(documents_count);
}

firstBuildComplete = true;
},
theme: “bootstrap”,
filterable: true,
filterMode: ‘advanced’,
localization: getLocalization(culture, ”),
columns: [
{ text: htmlDecode(grid_title_theme), datafield: ‘theme_name’, minWidth: 150 },
{ text: grid_title_title, datafield: ‘come_title’, minWidth: 150 },
{ text: grid_title_creator, datafield: ‘come_creator_name’, width: 150 },
{ text: grid_title_editor, datafield: ‘come_editor_name’, width: 150 },
{ text: htmlDecode(grid_title_key), datafield: ‘come_key’, width: 75 },
{ text: grid_title_begin, datafield: ‘come_begin’, width: 75, cellsFormat: ‘dd.MM.yyyy’ },
{ text: grid_title_end, datafield: ‘come_end’, width: 75, cellsFormat: ‘dd.MM.yyyy’, cellClassName: cellClassState },
{ text: grid_title_state, datafield: ‘come_state_name’, width: 100, cellClassName: cellClass },
{ text: grid_title_state_time, datafield: ‘come_state_time’, width: 75, cellsFormat: ‘dd.MM.yyyy’, cellClassName: cellClass },
{ text: grid_title_space, datafield: ‘space_name’, width: 75, hidden: true }
]
});

$(‘#a_option_row_wrap_text’).on(‘click’, function (event) {
if (row_wrap_text) {
row_wrap_text = false;
$(‘#i_option_row_wrap’).removeClass(‘glyphicon glyphicon-ok’);
}
else {
row_wrap_text = true;
$(‘#i_option_row_wrap’).addClass(‘glyphicon glyphicon-ok’);
}
grid.jqxTreeGrid({ autoRowHeight: row_wrap_text });
});`

From the screenshot you can see, that the first column does not contain a line break, but the following columns are containing a line break.

If I set the autoRowHeight value from the beginning to true, I get the same result.

[Peter StoevKeymaster]

Hello Odevelop,

“autoRowHeight” is true by default which means that it’s not necessary to set it to true after that. Also, the first column is the column with the Toggle Buttons which I don’t see in this image and they would not be wrapped. If you want to display only Flat data, use jqxDataTable instead.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[OdevelopParticipant]

Hi,

The switch for the line break is external and separately from the grid.
This is meant as a setting option of the user. The button is not in the first column.
The problem is, that the first column of the afterwards set option “autoRowHeight” is the only one which is not concerned.
The first column always behaves as if the option is set to false, although this is set to true.
All other columns or their content behave correctly.

[Peter StoevKeymaster]

Hello Odevelop,

The first column is the column with Toggle Buttons and we think the feature works as designed.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts