jQuery UI Widgets Forums Grid jqxGrid autoRowHeight

This topic contains 4 replies, has 2 voices, and was last updated by  logs 7 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • jqxGrid autoRowHeight #89916

    logs
    Participant

    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.

    jqxGrid autoRowHeight #89929

    Dimitar
    Participant

    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/

    jqxGrid autoRowHeight #89939

    logs
    Participant

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

    jqxGrid autoRowHeight #89974

    Dimitar
    Participant

    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/

    jqxGrid autoRowHeight #89995

    logs
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.