jQWidgets Forums

This topic contains 6 replies, has 2 voices, and was last updated by Andi 10 years, 2 months ago.

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

Author

GRID Rows height Posts

March 5, 2015 at 9:52 am GRID Rows height #68068

Andi

Participant

Hi, Is there any way to apply different rows height?
I’ve tried autorowsheight and autoheight but in this case the scroll inside the grid disappeared.
Could you please help.
Thanks.

March 5, 2015 at 10:24 am GRID Rows height #68070

Nadezhda

Participant

Hello Andi,

You can use ‘rowsheight’ property to set the height of the grid rows.

Best Regards,
Nadezhda

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

March 5, 2015 at 11:00 am GRID Rows height #68071

Andi

Participant

Thank you for your reply.
The thing is that I need to have different rows heights.
For example the first row should be 20px and the second 40px.
Thanks

March 5, 2015 at 11:07 am GRID Rows height #68072

Nadezhda

Participant

Hi Andi,

Unfortunately, it is not possible to have different rows height and scroll rows inside the grid. You can find a workaround in the following forum topic: http://www.jqwidgets.com/community/topic/autorowheight-and-scroll-bar/#post-47509.

Best Regards,
Nadezhda

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

March 5, 2015 at 12:01 pm GRID Rows height #68074

Andi

Participant

I’m using column.cellsrenderer to be able to set cell template and for some rows I need to have 2 rows in a cell so I need to have double height in such rows.

March 5, 2015 at 12:48 pm GRID Rows height #68076

Nadezhda

Participant

Hi Andi,

You can use the workaround from the above post or the following example where ‘autorowheight’ is set to true,’pageable’ set to true and ‘autoheightset’ to false:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(2500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                datatype: "array"
            };
            var adapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                height:200,
                source: adapter,
                autorowheight: true,
                pageable: true,
                autoheight: false,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 200 },
                  { text: 'Last Name', datafield: 'lastname', width: 200 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 80, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

March 5, 2015 at 2:04 pm GRID Rows height #68082

Andi

Participant

Hi Nadezhda,
Unfortunately paging is not an option for us.
Thanks

Author

Posts

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

You must be logged in to reply to this topic.