jQWidgets Forums

Tagged: autorowheight, cellsrenderer, Font, font size, grid, height, jqxgrid, row, size

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

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

Author

Grid font size Posts

October 25, 2013 at 9:02 am Grid font size #31321

Participant

Hi,

I want to allow user to change grid font size in a large range (~6..~72).
Is there a ready way to do this?
I’ve managed to change font size with my custom cellsrenderer, but it didn’t affect row height accordingly.

Thank you.

October 25, 2013 at 9:36 am Grid font size #31322

Dimitar

Participant

Hello Nikolay,

Please set the autorowheight property to true, as shown in the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    <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/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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value > 5) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; font-size: 30px;">' + value + '</span>';
                };
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                pageable: true,
                autoheight: true,
                autorowheight: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellsrenderer: cellsrenderer },
                  { text: 'Unit Price', datafield: 'price', width: 90, 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,
Dimitar

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

October 25, 2013 at 1:12 pm Grid font size #31335

Nikolay

Participant

autorowheight requires autoheight property and together they cause cell text carry-over instead of ellipsis if the text is long. As a result all my rows have different height.

But i want my rows to be of fixed height, but height that depends on font size. Is it possible?

October 28, 2013 at 6:01 am Grid font size #31405

Dimitar

Participant

Hi Nikolay,

Unfortunately, this functionality cannot be achieved. However, you may try setting the rowsheight property to 10px more than the size of your largest text.

Best Regards,
Dimitar

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

October 28, 2013 at 6:30 am Grid font size #31407

Nikolay

Participant

This is what I wanted, thank you very much!

Author

Posts

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

You must be logged in to reply to this topic.