jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 4 months ago.

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

Author

jqxgrid autoheight sets incorrect height when paging disabled Posts

January 23, 2014 at 10:31 am jqxgrid autoheight sets incorrect height when paging disabled #48268

Participant

Hi,
Basically i am facing 3 related issues. All related to pagination

1) setting autoheight: true does not calculate the correct grid height when pageable property is false. So some rows are hidden when rendered.

2) The pagesize dropdown does not show correctly i.e the dropdown list is not shown when clicked on the dropdown. So i would want to disable it altogether. But as mentioned above it gives issue mentioned above.

Regards,
Jignyasa

January 23, 2014 at 11:26 am jqxgrid autoheight sets incorrect height when paging disabled #48270

Peter Stoev

Keymaster

Hi Jignyasa,

1. “autoheight” = true means that the Grid’s height would be calculated as a Sum of the Height of all Rows. If you think that it does not work correctly, then provide a sample which demonstrates it.
2. Ok, send us a sample about that, too so we can check whether there’s a problem on our side or there’s something which should be modified on your side.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 23, 2014 at 1:17 pm jqxgrid autoheight sets incorrect height when paging disabled #48286

jignyasa

Participant

Hi Peter,

Please find the sample code.

Similar code however works in other places.

var source =
{
datatype: “json”,
type: ‘POST’,
datafields: [
{ name: ‘col1’, type: ‘String’ },
{ name: ‘col2’, type: ‘number’ },
],
root: “”,
record: “”,
id: ‘col1’,
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) {console.log(data);

},
loadError: function (xhr, status, error) { }
});

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 1230,
source: dataAdapter,
theme: ‘energyblue’,
showstatusbar: true,
statusbarheight: 25,
pageable:true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
editable: false,
showaggregates:true,
selectionmode: ‘multiplecellsadvanced’,
columns: [
{ text: ‘Name’, datafield: ‘col1’, width: 150 },
{ text: ‘Total’, datafield: ‘col2’, width: 100, aggregates:[‘sum’],
aggregatesrenderer: function (aggregates, column, element) {
var renderstring = ‘‘+aggregates[‘sum’]+’‘;
console.log(aggregates[‘sum’]);

return renderstring;
}},

{
text : ‘Draw’,
columntype : ‘button’,
width: 100,
cellsrenderer : function() {
return “Draw”;
},
buttonclick : function(row) {
editrow = row;
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$.ajax({
url:contextPath+”/getMarks.json”,
type:”POST”,
data:”name=”+dataRecord.col1,
success:function(data){
console.log(data);

var figImg = document.getElementById(“figure”);

var imgPath = ““;
figImg.innerHTML = imgPath;
$(‘#chartWindow’).jqxWindow(‘open’);

},
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
}]
});

Regards,
Jignyasa

January 23, 2014 at 1:29 pm jqxgrid autoheight sets incorrect height when paging disabled #48288

Peter Stoev

Keymaster

Hi Jignyasa,

Unfortunately, I am unable to reproduce the reported behavior using the provided code. My test sample based on your code is below:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "";
            var source =
             {
                 datatype: "json",
                 type: 'POST',
                 datafields: [
                 { name: 'col1', type: 'String' },
                 { name: 'col2', type: 'number' },
                 ],
                 root: "",
                 record: "",
                 id: 'col1',
                 url: url
             };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) {
                    console.log(data);

                },
                loadError: function (xhr, status, error) { }
            });

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 1230,
                source: dataAdapter,
                theme: 'energyblue',
                showstatusbar: true,
                statusbarheight: 25,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: false,
                showaggregates: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                { text: 'Name', datafield: 'col1', width: 150 },
                {
                    text: 'Total', datafield: 'col2', width: 100, aggregates: ['sum'],
                    aggregatesrenderer: function (aggregates, column, element) {
                        if (aggregates && aggregates['sum']) {
                            var renderstring = '' + aggregates['sum'] + '';
                            console.log(aggregates['sum']);

                            return renderstring;
                        }
                        else return "";
                    }
                },

                {
                    text: 'Draw',
                    columntype: 'button',
                    width: 100,
                    cellsrenderer: function () {
                        return "Draw";
                    },
                    buttonclick: function (row) {
                        editrow = row;
                        var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                        $.ajax({
                            url: contextPath + "/getMarks.json",
                            type: "POST",
                            data: "name=" + dataRecord.col1,
                            success: function (data) {
                                console.log(data);

                                var figImg = document.getElementById("figure");

                                var imgPath = "";
                                figImg.innerHTML = imgPath;
                                $('#chartWindow').jqxWindow('open');

                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert(errorThrown);
                            }
                        });
                    }
                }]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.