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

Community / WebGrid

Latest Development Blogs

Retrieving News

ForumPostTopic

WebGrid Enterprise

2138

8348

357

1383

430

1620

63

263

253

944

118

423

89

357

34

134

36

98

42

114

567

1861

305

768

366

1443

Browse By Tag

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

21 replies. Last post: April 7, 2011 10:25 AM by Shawn August

Tags :

(None)

Create New

New Discussion
New Question
New Product Feedback

Post Reply

Shawn AugustMember

Posted: November 23, 2010 11:03 AM

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

Reply

Quick Reply

Quote

All Replies

Yudi Member

Posted: November 23, 2010 4:09 PM in response to Shawn August

You can try to set the visibility of the corresponding column from server-side action, for example: using ASP.NET button click event. Below is the snippet code that shows how to set the visibility of a column from ASP.NET button click event.

protected void Button1_Click(object sender, EventArgs e)
{
    WebGrid1.RootTable.Columns.GetNamedItem("SupplierID").Visible = false;
}

Pushing the ASP.NET button will cause the page to PostBack. We can utilize the WebFlyPostBackManager control to make the column-hiding becomes FlyPostBack. Please add WebFlyPostBack control to the WebGrid page and set the properties of the WebFlyPostBackManager control as shown in the snippet code below.

<ISWebDesktop:WebFlyPostBackManager ID="WebFlyPostBackManager1" runat="server" ServiceUrl="~/UnderTest/HideColumnFromServerSide.aspx"
    EnableUIMode="True">
    <FlyPostBackSettings PostViewState="true" PostInputControls="True" PostHiddenFields="True"
        PostControlState="True" />
</ISWebDesktop:WebFlyPostBackManager>

Next, simply add two lines of code in Page_Load event and the ASP.NET button click event.

protected void Page_Load(object sender, EventArgs e)
{
    WebFlyPostBackListener listener = new WebFlyPostBackListener(this.Page);
}

protected void Button1_Click(object sender, EventArgs e)
{
    WebGrid1.RootTable.Columns.GetNamedItem("SupplierID").Visible = false;
    WebGrid1.RequiresUIRefresh = true;
}

I enclosed one simple sample of WebGrid that shows how to set the WebGridColumn visibility from server-side as attachment. Please have the attached sample tested on your end and let us hear your response.

PS: you need to change the ServiceUrl property of WebFlyPostBackManager control in order to get the sample works on your end.

1 attachment

Sample File.zip

Shawn AugustMember

Posted: November 23, 2010 4:11 PM in response to Yudi

Sorry, I wasn't clear. My sample code is JavaScript so client. What is wrong with my approach?

Yudi Member

Posted: November 24, 2010 11:49 AM in response to Shawn August

There is nothing wrong with the approach, to set column visibility from client-side.

I created one simple sample test page of WebGrid based on the information of your first post in this thread. The test page was created to test whether the WebGridColumn is re-appearing or not as soon as the user scrolls on WebGrid that has horizontal scrollbar.

I’m using WebGrid 7.0 build 406 and WebUI.NET Framework 3.0 build 757 (the recent latest hotfix). The reported issue is not replicable in my local test, everything worked smoothly and the WebGridColumn is not re-appearing when I tried to scroll.

I enclosed the test page as attachment. Please kindly check the test page on your end and let us know if I might miss anything during my attempt to replicate the issue.

The approach on my previous post, to set WebGridColumn visibility from server-side, was presented as an alternative of the client-side approach. I’m really sorry for the inconvenience if the alternative doesn’t suit with your scenario.

1 attachment

Sample File.zip

Shawn AugustMember

Posted: November 29, 2010 10:06 AM in response to Yudi

There is nothing wrong with the approach, to set column visibility from client-side.
I created one simple sample test page of WebGrid based on the information of your first post in this thread. The test page was created to test whether the WebGridColumn is re-appearing or not as soon as the user scrolls on WebGrid that has horizontal scrollbar.
I’m using WebGrid 7.0 build 406 and WebUI.NET Framework 3.0 build 757 (the recent latest hotfix). The reported issue is not replicable in my local test, everything worked smoothly and the WebGridColumn is not re-appearing when I tried to scroll.
I enclosed the test page as attachment. Please kindly check the test page on your end and let us know if I might miss anything during my attempt to replicate the issue.
The approach on my previous post, to set WebGridColumn visibility from server-side, was presented as an alternative of the client-side approach. I’m really sorry for the inconvenience if the alternative doesn’t suit with your scenario.

The JS you provided is very similiar to the one I am using yet I still have columns re-appearing after scrolling. It must be an issue with a WebGrid property (or markup). I have attached the WebGrid's markup to see if you can reproduce.

  <CommonCtrl:EnduranceWebGrid runat="server" ID="grdTreatyClaims" DefaultStyleMode="Elegant"
                Height="100%" Width="100%" UseDefaultStyle="True" EnableViewState="false" ViewStateStorage="None"
                OnInitializeDataSource="grdTreatyClaims_OnInitializeDataSource" OnInitializeLayout="grdTreatyClaims_OnInitializeLayout"
                OnInitializePostBack="grdTreatyClaims_OnInitializePostBack" OnPrepareDataBinding="grdTreatyClaims_OnPrepareDataBinding"
                OnExport="grdTreatyClaims_OnExport" OnBatchUpdate="grdTreatyClaims_OnBatchUpdate"
                OnInitializeRow="grdTreatyClaims_OnInitializeRow">
                <LayoutSettings AllowBatchUpdate="true" BatchUpdateSettings-PromptUnsavedChanges="false"
                    AllowAddNew="Yes" AllowEdit="Yes" AllowDelete="Yes" EditOnClick="True" AutoHeight="false" RowHeightDefault="22px"
                    AutoWidth="false" AllowColumnFreezing="Yes" AllowExport="No" AllowFilter="No"
                    AllowSelectColumns="Yes" AllowSorting="No" AlwaysShowHelpButton="False" ApplyFiltersKey="Enter"
                    CellPaddingDefault="0" FilterBarVisible="True" HideColumnsWhenGrouped="Default"
                    InProgressUIBehavior="ChangeCursorToHourGlass" NewRowLostFocusAction="AlwaysPrompt"
                    PagingExportMode="ExportAllData" PagingMode="VirtualLoad" ResetNewRowValuesOnError="False"
                    ShowFilterStatus="True" VerboseEditingInformation="False" VirtualPageSize="200">
                    <ClientSideEvents OnInitialize="grdTreatyClaims_OnInitialize" OnRowContextMenu="grdTreatyClaims_OnRowContextMenu"
                        OnCheckBoxClick="grdTreatyClaims_OnCheckBoxClick" 
                        OnExitEditMode="grdTreatyClaims_OnExitEditMode"
                        OnAfterExitEditMode="grdTreatyClaims_OnAfterExitEditMode" 
                        OnRowValidate="grdTreatyClaims_OnRowValidate" />
                    <FrameStyle>
                        <BorderSettings>
                            <Top Style="none" />
                            <Bottom Style="none" />
                            <Left Color="#6593cf" Style="solid" Width="1" />
                            <Right Color="#6593cf" Style="solid" Width="1" />
                        </BorderSettings>
                    </FrameStyle>
                    <HeaderStyle CssClass="WebGridHeaderStyle" />
                    <StatusBarStyle CssClass="WebGridStatusBarStyle" />
                    <StatusBarCommandStyle Active-CssClass="WebGridStatusBarCommandStyleActive" Normal-CssClass="WebGridStatusBarCommandStyleNormal"
                        Over-CssClass="WebGridStatusBarCommandStyleOver">
                        <Normal CssClass="WebGridStatusBarCommandStyleNormal" />
                        <Over CssClass="WebGridStatusBarCommandStyleOver" />
                        <Active CssClass="WebGridStatusBarCommandStyleActive" />
                    </StatusBarCommandStyle>
                    <FilterRowStyle CssClass="WebGridFilterRowStyle" />
                    <PreviewRowStyle CssClass="WebGridRowStyle" />
                    <RowStyle CssClass="WebGridRowStyle" />
                    <QuickFilterBarStyle CssClass="WebGridRowStyle" />
                    <RowHeaderStyle CssClass="WebGridRowHeaderStyle" />
                    <SelectedRowStyle CssClass="WebGridSelectedRowStyle" />
                    <EditFocusCellStyle CssClass="WebGridRowStyle" />
                    <FocusCellStyle CssClass="WebGridRowStyle" />
                    <LostFocusRowStyle CssClass="WebGridRowStyle" />
                    <NewRowStyle CssClass="WebGridRowStyle" />
                    <SortedColumnStyle CssClass="WebGridSortedColumnStyle" />
                    <AlternatingRowStyle CssClass="WebGridAlternatingRowStyle" />
                    <EditTextboxStyle CssClass="WebGridEditTextboxStyle" />
                    <FreezePaneSettings AbsoluteScrolling="True" ActiveFrozenColumns="1" MaxFrozenColumns="1"
                        ShowInContextMenu="False" ShowSplitterLine="False" SplitterLineColor="ActiveBorder"
                        SplitterLineWidth="1" />
                </LayoutSettings>
                <RootTable Caption="Claims Transaction" DataKeyField="UniqueID" ColumnFooters="Yes">                
                    <Columns>
                        <ISWebGrid:WebGridColumn Caption="UniqueID" Name="UniqueID" DataType="System.Integer"
                                                 ColumnType="Text" EditType="NoEdit" NewRowEditType="NoEdit" FilterEditType="NoEdit"
                                                 Width="0px" Visible="false">
                        </ISWebGrid:WebGridColumn>
                                            
                        <ISWebGrid:WebGridColumn Caption="Claim Number" Name="ClaimMasterReference" DataMember="ClaimMasterReference"
                            DataType="System.String" EditType="NoEdit" FilterEditType="TextBox" Width="150px"
                            FooterText="Total">
                        </ISWebGrid:WebGridColumn>                                
                        <ISWebGrid:WebGridColumn Caption="Description" Name="ClaimTitle" DataMember="ClaimTitle"
                            DataType="System.String" EditType="TextBox" FilterEditType="TextBox" Width="275px">
                        </ISWebGrid:WebGridColumn>                                
                        <ISWebGrid:WebGridColumn Caption="Date of Loss Qualifier" Name="DateOfLossQualifier" DataMember="DateOfLossQualifier"
                            DataType="System.Integer" ColumnType="Custom" EditType="DropdownList" NewRowEditType="DropdownList"
                            FilterEditType="DropdownList" Width="125px">
                        </ISWebGrid:WebGridColumn> 
                        <ISWebGrid:WebGridColumn Caption="Claims Made Date/Date of Loss" Name="ClaimsMadeDate" DataMember="ClaimDateOfLossFrom"
                            DataFormatString="dd-MMM-yyyy" DataType="System.String" ColumnType="Text" EditType="CalendarCombo"
                            NewRowEditType="CalendarCombo" FilterEditType="CalendarCombo" Width="175px">
                        </ISWebGrid:WebGridColumn>                                                                                                                
                        <ISWebGrid:WebGridColumn Caption="Reported Date" Name="ClaimAdvisedDate" DataMember="ClaimAdvisedDate"
                            DataFormatString="dd-MMM-yyyy" DataType="System.String" ColumnType="Text" EditType="CalendarCombo"
                            NewRowEditType="CalendarCombo" FilterEditType="CalendarCombo" Width="90px">
                        </ISWebGrid:WebGridColumn>   
                        <ISWebGrid:WebGridColumn Caption="Event Date" Name="EventDate" DataMember=""
                            DataFormatString="dd-MMM-yyyy" DataType="System.String" ColumnType="Text" EditType="CalendarCombo"
                            NewRowEditType="CalendarCombo" FilterEditType="CalendarCombo" Width="90px">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption="Level 1 Cat" Name="ClaimLevel1CATCode" DataMember="ClaimLevel1CATCode"
                            DataType="System.Integer" ColumnType="Custom" EditType="DropdownList" NewRowEditType="DropdownList"
                            FilterEditType="DropdownList" Width="100px">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption="Level 3 Cat" Name="ClaimLevel3CATCode" DataMember="ClaimLevel3CATCode"
                            DataType="System.Integer" ColumnType="Custom" EditType="DropdownList" NewRowEditType="DropdownList"
                            FilterEditType="DropdownList" Width="100px">
                        </ISWebGrid:WebGridColumn>                            
                        <ISWebGrid:WebGridColumn Caption="Cause of Loss" Name="LossAnalysis1Code" DataMember="LossAnalysis1Code"
                            DataType="System.Integer" ColumnType="Custom" EditType="DropdownList" NewRowEditType="DropdownList"
                            FilterEditType="DropdownList" Width="120px">
                        </ISWebGrid:WebGridColumn>
                        
                        
                        <ISWebGrid:WebGridColumn Caption="Paid" Name="Paid" DataMember="Paid" DataFormatString="#,##0.00"
                            DataType="System.Decimal" DefaultValue="0" EditType="TextBox" FilterEditType="TextBox" Width="80px"
                            AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption="Expenses" Name="Expenses" DataMember="Expenses" DataFormatString="#,##0.00" 
                            DataType="System.Decimal" DefaultValue="0" EditType="TextBox" FilterEditType="TextBox"
                            Width="80px" AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption="Salvage" Name="Salvage" DataMember="Salvage" DataFormatString="#,##0.00"
                            DataType="System.Decimal" DefaultValue="0" EditType="TextBox" FilterEditType="TextBox" Width="80px"
                            AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption="Cash Loss" Name="CashLoss" DataMember="CashLoss" DataFormatString="#,##0.00"
                            DataType="System.Decimal" DefaultValue="0" EditType="TextBox" FilterEditType="TextBox"
                            Width="80px" AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption="Refund" Name="Refund" DataMember="Refund" DataFormatString="#,##0.00"
                            DataType="System.Decimal" DefaultValue="0" EditType="TextBox" FilterEditType="TextBox" Width="80px"
                            AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption="Port In" Name="ClaimPortfolioIn" DataMember="ClaimPortfolioIn"
                            DataFormatString="#,##0.00" DefaultValue="0" DataType="System.Decimal" EditType="TextBox" FilterEditType="TextBox"
                            Width="80px" AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption="Port Out" Name="ClaimPortfolioOut" DataMember="ClaimPortfolioOut"
                            DataFormatString="#,##0.00" DefaultValue="0" DataType="System.Decimal" EditType="TextBox" FilterEditType="TextBox"
                            Width="80px" AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        
                        
                        <ISWebGrid:WebGridColumn Caption="Current Indemnity O/S" Name="CurrentINDOutstanding" DataMember="CurrentINDOutstanding"
                            DataFormatString="#,##0.00" DataType="System.Decimal" DefaultValue="0" EditType="NoEdit" FilterEditType="TextBox"
                            Width="130px" AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption=" " Name="IncludeINDOutstanding" DataMember="IncludeINDOutstanding"
                            ColumnType="CheckBox" EditType="Checkbox" FilterEditType="NoEdit" Width="25px">
                        </ISWebGrid:WebGridColumn>                          
                        <ISWebGrid:WebGridColumn Caption="New Indemnity O/S" Name="INDOutstanding" DataMember="INDOutstanding"
                            DataFormatString="#,##0.00" DataType="System.Decimal" DefaultValue="0" EditType="TextBox" FilterEditType="TextBox"
                            Width="130px" AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        
                        <ISWebGrid:WebGridColumn Caption="Current Fee O/S" Name="CurrentFEEOutstanding" DataMember="CurrentFEEOutstanding"
                            DataFormatString="#,##0.00" DataType="System.Decimal" DefaultValue="0" EditType="NoEdit" FilterEditType="NoEdit"
                            Width="130px" AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption=" " Name="IncludeFEEOutstanding" DataMember="IncludeFEEOutstanding"
                            ColumnType="CheckBox" EditType="Checkbox" FilterEditType="NoEdit" Width="25px">
                        </ISWebGrid:WebGridColumn>                          
                        <ISWebGrid:WebGridColumn Caption="New Fee O/S" Name="FEEOutstanding" DataMember="FEEOutstanding"
                            DataFormatString="#,##0.00" DataType="System.Decimal" DefaultValue="0" EditType="TextBox" FilterEditType="TextBox"
                            Width="130px" AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                                                                                
                        <ISWebGrid:WebGridColumn Caption="Current ACR O/S" Name="CurrentACROutstanding" DataMember="CurrentACROutstanding"
                            DataFormatString="#,##0.00" DataType="System.Decimal" DefaultValue="0" EditType="TextBox" FilterEditType="TextBox"
                            Width="130px" AggregateFunction="Sum">                              
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption=" " Name="IncludeACROutstanding" DataMember="IncludeACROutstanding"
                            ColumnType="CheckBox" EditType="Checkbox" FilterEditType="NoEdit" Width="25px">
                        </ISWebGrid:WebGridColumn>                          
                        <ISWebGrid:WebGridColumn Caption="New ACR O/S" Name="ACROutstanding" DataMember="ACROutstanding"
                            DataFormatString="#,##0.00" DataType="System.Decimal" DefaultValue="0" EditType="TextBox" FilterEditType="TextBox"
                            Width="130px" AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        
                        <ISWebGrid:WebGridColumn Caption="ACE O/S" Name="CurrentACEOutstanding" DataMember="CurrentACEOutstanding"
                            DataFormatString="#,##0.00" DataType="System.Decimal" DefaultValue="0" EditType="TextBox" FilterEditType="TextBox"
                            Width="130px" AggregateFunction="Sum">                              
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption=" " Name="IncludeACEOutstanding" DataMember="IncludeACEOutstanding"
                            ColumnType="CheckBox" EditType="Checkbox" FilterEditType="NoEdit" Width="25px">
                        </ISWebGrid:WebGridColumn>                          
                        <ISWebGrid:WebGridColumn Caption="New ACE O/S" Name="ACEOutstanding" DataMember="ACEOutstanding"
                            DataFormatString="#,##0.00" DataType="System.Decimal" DefaultValue="0" EditType="TextBox" FilterEditType="TextBox"
                            Width="130px" AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>                       
  
  
                        <ISWebGrid:WebGridColumn Caption="Current IND" Name="CurrentIND" DataMember="CurrentIND"
                            DataFormatString="#,##0.00" DataType="System.Decimal" EditType="NoEdit" FilterEditType="NoEdit"
                            AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption="Current FEE" Name="CurrentFEE" DataMember="CurrentFEE"
                            DataFormatString="#,##0.00" DataType="System.Decimal" EditType="NoEdit" FilterEditType="NoEdit"
                            AggregateFunction="Sum" />                            
                        <ISWebGrid:WebGridColumn Caption="Current REC" Name="CurrentREC" DataMember="CurrentREC"
                            DataFormatString="#,##0.00" DataType="System.Decimal" EditType="NoEdit" FilterEditType="NoEdit"
                            AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption="Current Incurred" Name="CurrentIncurred" DataMember="CurrentIncurred"
                            DataFormatString="#,##0.00" DataType="System.Decimal" EditType="NoEdit" FilterEditType="NoEdit"
                            AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption="Incurred" Name="Incurred" DataMember="" DataFormatString="#,##0.00"
                            DataType="System.Decimal" EditType="TextBox" FilterEditType="NoEdit"
                            AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                        <ISWebGrid:WebGridColumn Caption="Movement" Name="IncurredMovement" DataMember=""
                            DataFormatString="#,##0.00" DataType="System.Decimal" EditType="TextBox" FilterEditType="NoEdit"
                            AggregateFunction="Sum">
                        </ISWebGrid:WebGridColumn>
                    </Columns>
                </RootTable>
            </CommonCtrl:EnduranceWebGrid>

Yudi Member

Posted: November 29, 2010 11:08 PM in response to Shawn August

I modified my sample based on your WebGrid’s markup on your previous post, but my efforts were not successful – everything worked smoothly and the re-appearing column on scroll issue is not reproducible.

I enclosed the video when the page is viewed in browser as attachment. Please download the video at here. Should you find any steps that I missed during my attempt to reproduce the issue, please let us know.

Shawn AugustMember

Posted: November 30, 2010 10:28 AM in response to Yudi

I modified my sample based on your WebGrid’s markup on your previous post, but my efforts were not successful – everything worked smoothly and the re-appearing column on scroll issue is not reproducible.
I enclosed the video when the page is viewed in browser as attachment. Please download the video at here. Should you find any steps that I missed during my attempt to reproduce the issue, please let us know.

The bug only occurs when you scroll PAST the column that is hidden.

For example, consider a WebGrid with the following fields:

Field 1, Field2, Field3, HiddenField1, HiddenField2, Field4, Field5, Field6

If you scroll using the WebGrid's horizontal scroll bar so that any of the hidden fields are hidden from the UI, as soon as you scroll back, they re-appear.

Please see the screen shots which show the various fields in a visible state, then hidden, and then they re-appear.

3 attachments

WebGridWithPaidExpensesSalvageCashLossFieldsVisible.jpg

WebGridWithPaidExpensesSalvageCashLossFieldsHidden.jpg

WebGridWithPaidExpensesSalvageCashLossFieldsReAppearAfterScrollingToRightAndThenLeft.jpg

Yudi Member

Posted: December 1, 2010 2:40 AM in response to Shawn August

I apologize for any inconvenience this problem may have caused you. Finally, I was able to reproduce the issue on my end.

I have forwarded this issue to WebGrid development team to be fixed. The issue is filed under work item #863 of WebGrid 7.
I’ll keep you updated with any news I heard from the team regarding work item #863.

Shawn AugustMember

Posted: December 1, 2010 9:48 AM in response to Yudi

I apologize for any inconvenience this problem may have caused you. Finally, I was able to reproduce the issue on my end.
I have forwarded this issue to WebGrid development team to be fixed. The issue is filed under work item #863 of WebGrid 7.
I’ll keep you updated with any news I heard from the team regarding work item #863.

Thank you for the fast update. Can you respond to this thread when the bug is resolved? Thanks.

Yudi Member

Posted: December 3, 2010 9:52 AM in response to Shawn August

I’ll update the news to this thread when the nightly-build (pre-release) hotfix of WebGrid that address work item #863 issue is available.

Thank you for your cooperation and patience. J

Shawn AugustMember

Posted: December 9, 2010 2:04 PM in response to Yudi

I’ll update the news to this thread when the nightly-build (pre-release) hotfix of WebGrid that address work item #863 issue is available.
Thank you for your cooperation and patience. J

FYI. I hope this helps but this bug opens up a bunch of other issues when creating a NewRow where the column alignment is completely off. Take a look at this screenshot and notice that the fields don't align with the other binding fields (Look for the checkbox control).

1 attachment

IntersoftBugWithHidingColumnsThatReAppearWithScrollInWrongPosition.jpg

Yudi Member

Posted: December 13, 2010 1:41 AM in response to Shawn August

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.

Shawn AugustMember

Posted: January 25, 2011 3:24 PM in response to Yudi

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.

Frank BruceMember

Posted: January 25, 2011 8:27 PM in response to Shawn August

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

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

Shawn AugustMember

Posted: March 31, 2011 1:20 PM in response to Frank Bruce

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.

Yudi Member

Posted: April 1, 2011 2:31 AM in response to Shawn August

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.

Shawn AugustMember

Posted: April 1, 2011 9:51 AM in response to Yudi

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.

Yudi Member

Posted: April 5, 2011 12:27 AM in response to Shawn August

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.

Shawn AugustMember

Posted: April 6, 2011 3:31 PM in response to Yudi

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.

Yudi Member

Posted: April 6, 2011 10:21 PM in response to Shawn August

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.

Yudi Member

Posted: April 7, 2011 4:38 AM in response to Shawn August

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.

Shawn AugustMember

Posted: April 7, 2011 10:25 AM in response to Yudi

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 retrieve data from dropdown combo

set the web grid cell background color

All times are GMT -5. The time now is 11:09 AM.

Previous Next