[4.1.3] Renderer of hidden column can cause undesired effect

**Daniil** · 12 Dec 2012 5:25 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.3

Browser versions tested against:

Chrome
IE9

DOCTYPE tested against:

<!DOCTYPE html>

Description:

A renderer of a hidden column can cause some undesired effect. I think nothing stops me to return "<div style='height: 50px;'></div>" from a renderer. But this cause increasing of rows height. I would expect that hidden column should not affect on rendering process this way.
I understand it can be hard to fix. Maybe an option like "renderHiddenColumns: true|false"? By the way, it could be good in the performance aspect as well.

Steps to reproduce the problem:

Just run the sample

The result that was expected:

Default row height

The result that occurs instead:

Row height is increased because of the renderer oh the hidden column

Test Case:

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Grid hidden column renderer</title>

    <link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />
    
    <script type="text/javascript" src="../ext-all-debug.js"></script>

    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create("Ext.grid.Panel", {
                renderTo: Ext.getBody(),
                store: {
                    autoLoad: true,
                    fields: [{
                        name: "test1"
                    }, {
                        name: "test2"
                    }],
                    proxy : {
                        type: "memory",
                        reader: {
                            type: "array"
                        },
                        data: [
                            ["test1", "test2", "test3"],
                            ["test4", "test5", "test6"],
                            ["test7", "test8", "test9"]
                        ]
                    }
                },
                columns: {
                    items: [{
                        dataIndex: "test1",
                        text: "Test"
                    }, {
                        hidden: true,
                        dataIndex: "test2",
                        renderer: function () { 
                            return "<div style='height: 50px;'></div>" 
                        },
                        text: "Hidden column"
                    }]
                }
            });
        });
    </script>
</head>
<body>

</body>
</html>

HELPFUL INFORMATION

Possible workaround:

Check the column's hidden property with the renderer. Return nothing if it is hidden.
Refresh the view if the column is shown. It can be done in a column's show listener.

**mitchellsimoens** · 12 Dec 2012 6:42 AM

This is because the columns are still rendered and therefore will still affect the row height. So you want normal row height but when you show the column the rows will then take up the 50px? Personally wouldn't like that UI.

**Daniil** · 12 Dec 2012 7:16 AM

Thank you for the answer.

Yes, I understand why it happens therefore suggest "renderHiddenColumns: true|false".

Personally wouldn't like that UI.

But the inadequately stretched rows also doesn't look good

Moreover, a user might not show a hidden column at all.

**evant** · 12 Dec 2012 12:32 PM

Dupe of: EXTJSIV-6734

**Daniil** · 12 Dec 2012 8:52 PM

Thank you, Evan.

Could you clarify how does this ticket sound? Is it considered a bug or a feature request?

**Juanito** · 7 Jan 2013 3:31 PM

@mitchellsimoens This report may leave whether it's a bug kind of up in the air, but if you look at the test case in http://www.sencha.com/forum/showthre...871#post926871 you'll see that the behavior in that case is unnacceptable, the row height becomes way taller than it was originally after hiding the column.

I really don't think you would like to see a lot of blank space on a grid after hiding the tall column.

The case I reported is definitely a bug, and it's the same underlying code issue. Sencha team, please take that into consideration when deciding whether to fix it.

**Daniil** · 14 Mar 2013 12:30 AM

Originally Posted by evant

Dupe of: EXTJSIV-6734

Hello Evan,

I see EXTJSIV-6734 in the Release notes for 4.2.0 Beta.
EXTJSIV-6734 Hidden grid column's height is not properly measured when wordwrap is used

But the test case in the initial post still reproduces the issue with 4.2.0 GA.

Maybe, is it another issue?

**vot** · 20 Apr 2013 4:00 AM

I can confirm the issue still exists in ExtJS 4.2.0 (GPL). As soon as a white-space:normal (in my case) is used within a column the height calculation seems to freak out.

Code:

columns: [{
        text: _("Description"),
        sortable: true,
        dataIndex: "description",
        id: "description",
        renderer: function(value, metaData, record, rowIndex, colIndex,
          store, view) {
            metaData.style = "white-space:normal;";
            var longdescription = record.get("longdescription");
            if(!Ext.isEmpty(longdescription)) {
                value = Ext.String.format("<b>{0}</b><br/>{1}",
                  value, Ext.String.htmlEncode(longdescription));
            }
            return value;
        },
        width: 340,
        hidden: true
},{
...

[4.1.3] Renderer of hidden column can cause undesired effect

Thread Tools

Search Thread

Display

[4.1.3] Renderer of hidden column can cause undesired effect

[4.1.3] Renderer of hidden column can cause undesired effect