Intersoft Community - WebGrid Enterprise - how to hide a column on clientSide

how to hide a column on clientSide

julia — Wed, 10 Feb 2010 06:28:28 GMT

Hi Vincenzo,

Currently there is no method to change the position of WebGrid columns. However, you can do it manually from server-side by deleting the column first and then re-add the column into new position.

If you want to request for this feature, please send your feedback to Developer Network > Community Center > Product Feedback > Feature Request with details description on how this feature should be implemented.

Please let me know if you need another help.

Regards,

Julia

how to hide a column on clientSide

vangeloni — Tue, 09 Feb 2010 03:16:17 GMT

Hi Julia,

it could be fine if you can tell me how to change programmatically the position of a column.

Thanks,

Vince.

how to hide a column on clientSide

julia — Fri, 05 Feb 2010 06:32:52 GMT

Hi Vincenzo,

Unfortunately it is the default behavior. As when you hide it, the column would be removed from the grid. When it being show again, it will render as new column and being placed in the last position.

Regards,

Julia

how to hide a column on clientSide

vangeloni — Thu, 04 Feb 2010 10:21:38 GMT

Hi James,

I'm using your solution to hide and unhide a column. When the column appear is the last column of the grid. How can I have the column at the same place when I unhide it?

Thanks,

Vince.

how to hide a column on clientSide

indra.anggala@gmail.com — Thu, 03 Sep 2009 05:19:39 GMT

Thank you James. I've tried your solution. It works.

how to hide a column on clientSide

james — Wed, 02 Sep 2009 11:13:57 GMT

Hi Indra,

The following Javascript code will hide the column using Grid's built-in AJAX request.

<script type="text/javascript">
    
        function HideColumn()
        {
            var grid = ISGetObject("WebGrid1");
            var col = grid.RootTable.Columns.GetNamedItem("EmployeeID");
            
            col.Set("Visible", "false", true);
            grid.RefreshAll();
        }
        
    </script>

This approach should be more solid since the Grid will re-initialize all settings after the column is removed.

I hope it works for you.

- James.

how to hide a column on clientSide

indra.anggala@gmail.com — Wed, 02 Sep 2009 02:50:37 GMT

I've tried the solutions. Well, it did hide the header, but not the data columns. Example, the columns are :

Employee
Date01
Date02

I would like to hide the "Date01" column. The solustions above will make the display like this :

Employee Date02

Emp01 d01 d02

Emp02 d01 d02

Could you tell me if there is something else that I have to configure. By the way, I'm using WebGrid 7.0.7200.301 and IE 7.

@James

Could you show me how to hide the column through the FlyPostBack request?

how to hide a column on clientSide

james — Wed, 02 Sep 2009 00:38:32 GMT

FYI, although the solution above will work for display scenario, please be aware that it won't work very well when used in editing scenario, especially during keyboard navigation. It also won't work properly with Column Freezing enabled.

The best and suggested way to hide/remove a column is through a FlyPostBack request, so that will ensure the Grid to take account all settings properly when editing and other advanced features are used.

how to hide a column on clientSide

gordont — Tue, 01 Sep 2009 23:47:20 GMT

Hi Gordon ,
is this solution Works With Nested Grid

Hi Koby,

For hierarchical grid you need to use this code:

function HideHierarchicalColumn(pos)
        {
            var grid = ISGetObject("WebGrid1");
            var table = grid.GetRootTable();

            headerGroup = table.GetElement(WG40.COLHEADER, WG40.HTMLDIV);
            colGroup = table.GetElement(WG40.COLGROUP, WG40.HTMLDIV);

            headerGroup.childNodes[0].childNodes[0].childNodes[0].childNodes[pos].style.display = (headerGroup.childNodes[0].childNodes[0].childNodes[0].childNodes[pos].style.display == 'none') ? '' : 'none';
            colGroup.childNodes[pos].style.display = (colGroup.childNodes[pos].style.display == 'none') ? '' : 'none';

            if (!IS.ie)
            {
                rowList = colGroup.nextSibling.childNodes;

                for (var i = 0; i < rowList.length; i++)
                {
                    if (rowList[i].childNodes[pos])
                    {
                        rowList[i].childNodes[pos].style.display = rowList[i].childNodes[pos].style.display == 'none' ? '' : 'none';
                    }
                }
            }
        }

Best Regards,

Gordon Tumewu

how to hide a column on clientSide

gordont — Tue, 01 Sep 2009 23:35:51 GMT

Hi Vince,

After discussing with my colleague, he help me with additional code so this will works in all browser. This is the complete code:

function HideColumn(pos)
        {
            var grid = ISGetObject("WebGrid1");
            var table = grid.GetRootTable();
            
            headerGroup = table.GetElement(WG40.COLHEADER, WG40.HTMLDIV);   
            colGroup = table.GetElement(WG40.COLGROUP, WG40.HTMLDIV);
            
            headerGroup.childNodes[0].childNodes[0].childNodes[0].childNodes[pos].style.display = (headerGroup.childNodes[0].childNodes[0].childNodes[0].childNodes[pos].style.display == 'none') ? '' : 'none';
            colGroup.childNodes[pos].style.display = (colGroup.childNodes[pos].style.display == 'none') ? '' : 'none';

            if (!IS.ie)
            {
                rowList = colGroup.nextSibling.childNodes;

                for (var i = 0; i < rowList.length; i++)
                {
                    rowList[i].childNodes[pos].style.display = rowList[i].childNodes[pos].style.display == 'none' ? '' : 'none';
                }
            }
        }

Best Regards,

Gordon Tumewu

how to hide a column on clientSide

vangeloni — Sun, 30 Aug 2009 04:32:56 GMT

Hi,

could you tell me how to hide a column on clientSide, and also to reset it to visible?

Thanks,

Vince