Intersoft Community - WebGrid Enterprise - Show/Hide WebGrid column in JavaScript

Show/Hide WebGrid column in JavaScript

yudi — Mon, 08 Mar 2010 21:16:43 GMT

The mechanism to show/hide WebGrid column that is used in SetVisibilityColumn.aspx sample file (in post #2) is by accessing the html element of the column header and column group; and then set their display style property to ‘none’. This method will make the column look as though disappear. The fact, the column actually exists in client browser, only the display property that is set to ‘none’.

SetChildTableColumnVisibilityAtClientSide.aspx sample file (in post #4) uses Visible property of WebGridColumn class. When user click the button, the page will postback – thanks to WebFlyPostBackManager that make the postback becomes FlyPostBack. Then when the Visible property is set to ‘false’, the grid that shows on the client browser will have new structure, the one without the corresponding column. Not like the first scenario, where the column is being hidden (exist but not displayed), this approach will completely remove the element of the column. Due to this reason, I hope it explains why can’t you access the column on the client side to update the value when set Visible property to ‘false’.

In order to access column value without showing the column on the grid, I suggest you to check the “HiddenDataMember” feature of WebGrid. This property allows you to render specified hidden data member along with the cell as pseudo attribute. You can easily retrieve the hidden member’s value in client side by accessing the dataMember directly. Example:

alert(cell.ProductID);

You may refer to “How-to: Use HiddenDataMember to get value from hidden column” that available in WebGrid documentation or “WriteHiddenDataMember.aspx” tutorial file in WebGridTutorial project.

Hope this helps.

Show/Hide WebGrid column in JavaScript

jcrendulic — Mon, 08 Mar 2010 10:03:54 GMT

I tried this example. The problem is that when I have set it to .visible = false on the server side, I can not access the column on the client side to update the value. Is there abother way to access the column's value without showing the column on the grid?

Show/Hide WebGrid column in JavaScript

yudi — Fri, 05 Mar 2010 04:36:53 GMT

It is possible to hide child table column in hierarchical WebGrid scenario on client side event by using the same method as shown in the “SetColumnVisibilityAtClientSide.zip” sample file on the previous post. However, this would require a lot of effort, since we’ll need to open/expand the child table and then set the display property of the particular column header and column group.

For hierarchical WebGrid scenario, I suggest you to use server side event instead of client side event. By using server side event, it’s simply set the visibility property of the child table column to false in order to hide the column (as show in the snippet code below).

WebGrid1.RootTable.ChildTables.GetNamedItem("Products").Columns.GetNamedItem("SupplierID").Visible = false;

I enclosed one simple sample (as attachment) of hierarchical WebGrid that shows how to hide “SupplierID” column in Categories-Products hierarchical table relationship from Northwind.mdb database. In this sample, I also use WebFlyPostBackManager in order to make the page fly postback when user clicks the WebButton.

For more detail information, please check the code in the attached sample file.
Please let me know whether this help or not.

Show/Hide WebGrid column in JavaScript

jcrendulic — Thu, 04 Mar 2010 15:53:52 GMT

How would you set the column to hidden on the client side for a child grid column?

Show/Hide WebGrid column in JavaScript

yudi — Wed, 18 Nov 2009 02:55:15 GMT

WebGrid column visibility can’t be set to false on client side in order to hide the column, because the column already rendered by browser. But there is a workaround to hide/show WebGrid column from client side. Simply set the display property of the column header element and column group to “none”. For detail information, please check the attached sample code.

Hope this helps.

Show/Hide WebGrid column in JavaScript

sarabjeetmarwah — Tue, 17 Nov 2009 02:59:17 GMT

Hi,

How can i show/hide a column of webgrid from javascript.

Thanks

Sarbajeet Singh Marwah