jqxGrid autoRowHeight

[logsParticipant]

Hi guys,
I have a jqxGrid Table with autoheight and autorowheight and a custom column progress.
My problem is the row’s height increase each time when i edit the column firstname.
Here is the code javascript of my table:

var data = [{'firstname':'ok1','progress':20},{'firstname':'ok2','progress':80}]
var source = {
    localdata: data,
    datafields: [{
        name: 'firstname',
        type: 'string'
    }, { name: 'progress', type: 'number' }],
    datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
    width: 500,
    theme: 'energyblue',
    source: adapter,
     altRows: true,
                sortable: true,
                width: '100%',
                autoheight: true,
                autorowheight: true,
                pageable: true,
                pagesize:20,
                enableHover: false,
                selectionmode: 'singlerow',
                showtoolbar: true,autoshowfiltericon: true,
                filterable: true,
                showfilterrow: true,
                showsortmenuitems: false,
                editable: true,
    ready: function () {
        $("#jqxgrid").jqxGrid('selectrow', 0);
        $('#jqxgrid').jqxGrid('focus');
    },
    columns: [{
        text: 'First Name',
        datafield: 'firstname',
        columngroup: 'Name',
        width: '50%'
    }, {
         text: 'Progress',
         editable: false,
         dataField: 'progress',
          width: '50%',
         cellsrenderer: function (row, colum, value) { 
         	var cell = '<div style="width:100%;height: 100%;">'; 
          cell += '<div style="background: #47a447; float: left; width: ' + value + '%;height: 100%; ">'; 
          cell += '<div style="position: absolute;top: 40%;left: 40%;">' + value.toString() + '%' + '</div>'; 
          cell += '</div></div>'; 
          return cell; 
           }
        }]
});

Here IS link to jsfiddle: https://jsfiddle.net/UbK74/400/
I am sure the problem is in the column progress and exactly in property cellsrenderer CSS.
Please help me to fix this Regards.

[DimitarParticipant]

Hi logs,

This issue occurs because you have specified your progress cell to be with height: 100%, but you have also enabled autorowheight. This leads to the general CSS issue discussed in the following Stack Overflow topic: http://stackoverflow.com/questions/24407159/div-height-by-percentage-with-an-auto-height-parent. As a solution, we suggest disabling the autorowheight option.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[logsParticipant]

The problem is my requirements must use the autorowheight.
I cant disable it.
Regards.

[DimitarParticipant]

Hi logs,

The other possible solution is to update your cellsrenderer implementation as to not use percentage height for the main div.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[logsParticipant]

Hi Dimitar,
Thanks for your help , yes i did this and it works.
Regards.

[Author]

Posts