jQWidgets Forums

Tagged: angular grid, autorowheight, grid, jquery grid, jqxgrid, rowdetails, rowdetailstemplate, showrowdetails

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 9 years, 7 months ago.

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

Author

Auto row height on a per-row basis Posts

October 6, 2015 at 1:56 pm Auto row height on a per-row basis #76473

Participant

Hello,

I have a grid with columns that cannot fit the amount of text inside them without cutting off. The general solution is to set autorowheight: true and autoheight: true, but doing so has huge performance issues depending on the amount of data in my grid. I’d like to be able to expand a row by clicking on it. I already have the beginning of my click event that adds the proper jqx-grid-cell-wrap to the cells in the row:

$("#jqxGrid").on("rowselect", function (e) {
    var row = e.args.rowindex;
    var selectorString = "#row" + row + "jqxGrid > div.jqx-item";
    $(selectorString).addClass("jqx-grid-cell-wrap");
});

Now I just need to set the height of the row to the correct amount of pixels calculated from the text wrapping inside the cell. If there is an easy way to do this, please let me know.

My second option is to simply use rowdetails to display the information that’s being cut off, but I don’t have a clue on how to do that. I’ve read the rowdetailstemplate documentation, but it doesn’t describe a way to simply display the information that’s in each cell of the row.

Please advise on how I should proceed.

Regards,
Fritz Francis

October 7, 2015 at 5:47 am Auto row height on a per-row basis #76496

Dimitar

Participant

Hello Fritz Francis,

Unfortunately, row height setting is not supported. However, you can implement autorowheight: true and pageable: true to avoid the performance issues that arise with autoheight: true.

Here is an example that shows how to display the value of the first cell in a row in its row details:

<!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.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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(5);
            var source = {
                localdata: data,
                datafields: [{
                    name: 'firstname',
                    type: 'string'
                }, {
                    name: 'lastname',
                    type: 'string'
                }, {
                    name: 'productname',
                    type: 'string'
                }, {
                    name: 'date',
                    type: 'date'
                }, {
                    name: 'quantity',
                    type: 'number'
                }, {
                    name: 'price',
                    type: 'number'
                }],
                datatype: "array"
            };

            var adapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid({
                width: 700,
                autoheight: true,
                theme: 'energyblue',
                height: 300,
                source: adapter,
                rowdetails: true,
                rowdetailstemplate: { rowdetails: '<div style="margin: 10px;"></div>', rowdetailsheight: 35 },
                initrowdetails: function (index, parentElement, gridElement, datarecord) {
                    container = $($(parentElement).children()[0]);
                    var firstCell = $('#jqxgrid').jqxGrid('getcellvalue', index, 'productname');
                    container.append(firstCell);
                },
                columns: [{
                    text: 'Product',
                    datafield: 'productname',
                    width: 100
                }, {
                    text: 'First Name',
                    datafield: 'firstname',
                    width: 90
                }, {
                    text: 'Last Name',
                    datafield: 'lastname',
                    width: 90
                }, {
                    text: 'Order Date',
                    datafield: 'date',
                    width: 160,
                    cellsformat: 'dd-MMMM-yyyy'
                }, {
                    text: 'Quantity',
                    datafield: 'quantity',
                    width: 80,
                    cellsalign: 'right'
                }, {
                    text: 'Unit Price',
                    datafield: 'price',
                    cellsalign: 'right',
                    cellsformat: 'c2'
                }]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

October 7, 2015 at 1:43 pm Auto row height on a per-row basis #76537

fritzfrancis

Participant

Thanks, Dimitar. This looks like an excellent and elegant solution. Unfortunately, with the rowdetails, all of my rows are auto-expanding as soon as the grid binding is complete. I searched on the forum and saw Peter mention a property called rowdetailshidden, but could not find any such property in the documentation. Could you let me know how I can prevent these rows from being expanded by default? I am using jQWidgets 3.8.0.

Thanks,
Fritz Francis

October 8, 2015 at 5:17 am Auto row height on a per-row basis #76548

Dimitar

Participant

Hi Fritz Francis,

Are you sure you are not calling the method showrowdetails in your code (e.g. in the ready callback)? The only ways for row details to be shown is with this method and through user interaction.

Best Regards,
Dimitar

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

October 8, 2015 at 2:27 pm Auto row height on a per-row basis #76573

fritzfrancis

Participant

I am sure. I have even done a complete search in my Visual Studio solution for the text “showrowdetails”, and the only match I get is in jqx-all.js.

October 9, 2015 at 5:07 am Auto row height on a per-row basis #76590

Dimitar

Participant

Hi Fritz Francis,

Could you, please, share a JSFiddle/jsEditor example reproducing this issue? Please also try updating to version 3.8.2 and see if this strange behaviour persists.

I am looking forward to your reply.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.