Hi Vince,

I am really sorry but for now we dont have API to hide the column from client side. We have workaround for this but it only works in IE. You can use the following code:

function Button1_onclick()
        {
            var grid = ISGetObject("WebGrid1");
            HideColumn(grid.RootTable.Columns.GetNamedItem("ContactName").Position);
        }

        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';
        }

Once again this only works for IE.

Best Regards,

Gordon Tumewu

Hi Gordon ,

is this solution Works With Nested Grid 

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

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

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.

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?

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.

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

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.

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

Hi Julia,

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

Thanks,

Vince.

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