Intersoft Community - WebGrid Enterprise - How to show/hide a WebGrid column including header/footer

How to show/hide a WebGrid column including header/footer

SAgosto — Thu, 07 Apr 2011 10:25:33 GMT

Please try to use following JavaScript code in order to hide “Address” column in WebGrid from client-side.
function WebButton1_OnClientClick(controlId, parameter) {    var WebGrid1 = ISGetObject("WebGrid1");
    WebGrid1.RootTable.Columns.GetNamedItem("Address").Visible = false;
    WebGrid1.RootTable.Columns.GetNamedItem("Address").HideFromView();
    return true;
}
Please let us know whether this helps or not.

It does hide the columns but subsequent new rows display data in the wrong columns. For example, data for Field A is now in Field B. Please refer to the screen shots above. This was also reproduced by you and you said it would be given to the developers? What's the status of that?

How to show/hide a WebGrid column including header/footer

yudi — Thu, 07 Apr 2011 04:38:31 GMT

Please try to use following JavaScript code in order to hide “Address” column in WebGrid from client-side.

function WebButton1_OnClientClick(controlId, parameter) {
    var WebGrid1 = ISGetObject("WebGrid1");

    WebGrid1.RootTable.Columns.GetNamedItem("Address").Visible = false;
    WebGrid1.RootTable.Columns.GetNamedItem("Address").HideFromView();

    return true;
}

Please let us know whether this helps or not.

How to show/hide a WebGrid column including header/footer

yudi — Wed, 06 Apr 2011 22:21:47 GMT

I have re-forwarded this to the WebGrid development team to be investigated further.
I’ll keep you updated with any news I heard from the team regarding this.

How to show/hide a WebGrid column including header/footer

SAgosto — Wed, 06 Apr 2011 15:31:19 GMT

Actually, the column’s visibility and HiddenDataMember are different approach.
In order to hide a column, you can try to set column visibility to False.
The snippet code below shows how to hide the “ProductID” column by setting the the column visibility to False.
<ISWebGrid:WebGridColumn Caption="ProductID" DataMember="ProductID" Name="ProductID"
    Width="100px">
</ISWebGrid:WebGridColumn>
HiddenDataMember property sets the hidden data member to be rendered along with this column. This property allowed you to render specified hidden data member along with the cell as pseudo attribute. You can easily retrieve the hidden data member’s value in client-side by accessing the DataMember directly.
The snippet code below shows how to set the “ProductID” as HiddenDataMember in “ProductName” column.
<ISWebGrid:WebGridColumn Caption="ProductName" DataMember="ProductName" Name="ProductName"
    Width="100px" HiddenDataMember="ProductID">
</ISWebGrid:WebGridColumn>
And below is the JavaScript sample that can be used to get the value of ProductID.
function getdata() {R
    var grid = wgGetGridById("WebGrid1");
    var selObj = grid.GetSelectedObject();
    var selRow = selObj.GetRowObject();
    var cells = selRow.GetCells();
    var productName = cells.GetNamedItem("ProductName");
    var ProductID = productName.GetElement().attributes["ProductID"].value;

    alert(ProductID);
}
Hope this helps.

This is not what I need. I just need to be able to change the visiblity of a column via JavaScript either using CSS or some other property. If CSS is the wrong approach, is there another JAVASCRIPT property/method that I can use to hide/show columns dynamically?

Thanks.

How to show/hide a WebGrid column including header/footer

yudi — Tue, 05 Apr 2011 00:27:29 GMT

Actually, the column’s visibility and HiddenDataMember are different approach.

In order to hide a column, you can try to set column visibility to False.

The snippet code below shows how to hide the “ProductID” column by setting the the column visibility to False.

<ISWebGrid:WebGridColumn Caption="ProductID" DataMember="ProductID" Name="ProductID"
    Width="100px">
</ISWebGrid:WebGridColumn>

HiddenDataMember property sets the hidden data member to be rendered along with this column. This property allowed you to render specified hidden data member along with the cell as pseudo attribute. You can easily retrieve the hidden data member’s value in client-side by accessing the DataMember directly.

The snippet code below shows how to set the “ProductID” as HiddenDataMember in “ProductName” column.

<ISWebGrid:WebGridColumn Caption="ProductName" DataMember="ProductName" Name="ProductName"
    Width="100px" HiddenDataMember="ProductID">
</ISWebGrid:WebGridColumn>

And below is the JavaScript sample that can be used to get the value of ProductID.

function getdata() {
    var grid = wgGetGridById("WebGrid1");
    var selObj = grid.GetSelectedObject();
    var selRow = selObj.GetRowObject();
    var cells = selRow.GetCells();
    var productName = cells.GetNamedItem("ProductName");
    var ProductID = productName.GetElement().attributes["ProductID"].value;

    alert(ProductID);
}

Hope this helps.

How to show/hide a WebGrid column including header/footer

SAgosto — Fri, 01 Apr 2011 09:51:32 GMT

I’m really sorry to inform you that it’s an incorrect approach to hide a column by setting the display style property to ‘none’. It is suggested to set column’s visibility to false (columns.Visible=“False”).
Should you need to access the value of other columns, please try to use HiddenDataMember approach.

The HiddenDataMember approach is using the column's Visible property. Correct?

If so, I will try this and report back.

How to show/hide a WebGrid column including header/footer

yudi — Fri, 01 Apr 2011 02:31:50 GMT

I’m really sorry to inform you that it’s an incorrect approach to hide a column by setting the display style property to ‘none’. It is suggested to set column’s visibility to false (columns.Visible=“False”).

Should you need to access the value of other columns, please try to use HiddenDataMember approach.

How to show/hide a WebGrid column including header/footer

SAgosto — Thu, 31 Mar 2011 13:20:35 GMT

function HideColumn()//hide cloumn        
{            var grid = ISGetObject("WebGrid1");

            var col = grid.RootTable.Columns.GetNamedItem("Cloumn Name");          
            col.Set("Visible", "false", true);
            grid.RefreshAll();
        }

That's not an option to perform a postback to hide a column.

Can I get an update on these bugs? Are they being addressed in the next release?

Thanks.

How to show/hide a WebGrid column including header/footer

qq397472251 — Tue, 25 Jan 2011 20:27:26 GMT

function HideColumn()//hide cloumn        
{            var grid = ISGetObject("WebGrid1");

            var col = grid.RootTable.Columns.GetNamedItem("Cloumn Name");          
            col.Set("Visible", "false", true);
            grid.RefreshAll();
        }

How to show/hide a WebGrid column including header/footer

SAgosto — Tue, 25 Jan 2011 15:24:15 GMT

Thank you for the additional information.
I will have this information forwarded to the dev team and will let you know any news I heard from the team regarding this.

I found another bug that appears to be releated. This only occurs for the "NewRow", at least one column is frozen, and if you use the horizontal scrollbar to scroll a field out of view. Then, if you handle the WebGrid's AfterExitMode, the field within the EditObject isn't the correct field being edited.

How to show/hide a WebGrid column including header/footer

SAgosto — Tue, 23 Nov 2010 11:03:14 GMT

I have been using the following JavaScript to show/hide a WebGrid column including the header/footer. This works fine for WebGrids that do not have horizontal scrollbars. As soon as the user scrolls causing the "hidden" fields to be out of view, they re-appear after the user scrolls back.

Is there a better way to ensure the header/column/footer are hidden? I'd prefer something by name assuming performance isn't compromised.

function WebGrid_ShowHideColumnByPos(gridID, position, show) 
{
    var grid = WebGrid_GetGrid(gridID);
    if (grid == null) { return; }
    var rootTable = grid.GetRootTable();
    var row = rootTable.GetElement(WG40.BODY, WG40.HTMLTABLE);
    
    // Get the header and column groups
    headerGroup = rootTable.GetElement(WG40.COLHEADER, WG40.HTMLDIV);
    colGroup = rootTable.GetElement(WG40.COLGROUP, WG40.HTMLDIV);

    // Show/Hide
    var styleDisplay = "none";
    if (show == true) { styleDisplay = ""; } else { styleDisplay = "none"; }
    headerGroup.childNodes[0].childNodes[0].childNodes[0].childNodes[position].style.display = styleDisplay;
    colGroup.childNodes[position].style.display = styleDisplay;
}