Hide a column programmatically

[Clive Hoggar]

Hi

I have searched the forums and can't see anything that seesm to match my case.

I want to hide a column based on a value set in a settings table.  No problem getting the
setting value as true or false, but I can't make the column hidden.

Columns are not autogenerated and the column in question is declared like this

<telerik:GridBoundColumn DataField="StockQuantity" DataType="System.Int16"
            HeaderText="Stock" SortExpression="StockQuantity"
            UniqueName="StockQuantity">
</telerik:GridBoundColumn>

How can this be made visible/invisble from the code behind?
I have tried this below but I think it is applicable only to autogenerated columns.. Anyway it does not do anything.

Protected Sub RadGrid1_ColumnCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridColumnCreatedEventArgs) Handles RadGrid1.ColumnCreated

        If e.Column.UniqueName = "StockQuantity" Then
            e.Column.Visible = False
        End If

    End Sub

Thanks for help here!

Clive

[Daniel]

Hello Clive,

Please try the following approach:

protected void Page_PreRender(object o, EventArgs e)
{
    RadGrid1.MasterTableView.GetColumn("IDColumn").Display = false;
}

I hope this helps. Let me know if you need more information.

Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Clive Hoggar]

Hi

Thanks for this.

In fact I could not get this to work 'as is' but when I put the action in the onload event,
it worked! 

Just giving feedback in case it helps someone else..

Clive 

[Gene]

I am using RadAjaxManager and have a similar problem to the one described in this old post.  In my situation, I first display my grid and then, based on a selection from a rad ComboBox whose SelectedIndexChanged event I handle in the code behind.  Depending on what the user has selected in the ComboBox, I want to programmatically hide a column or change something about it.  For an example below, I am attempting to hide a column (which was already rendered) from view after the user makes a selection.  I confirmed that I am "hooked up" because when the user makes a selection, I can see in debug mode that the code executes in the event handler.  But, even though I set the Visible property of the column to false, it still appears in the grid after the event handler is done.  What I am doing wrong or perhaps forgetting to do?

Much thanks for whomever can please help me!

protected void comboRouteTypeSelector_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            GridColumn gridColumn = this.gridSites.MasterTableView.Columns.FindByUniqueName("SiteSeqNum");
            int Idx = this.gridSites.MasterTableView.Columns.IndexOf(gridColumn);
            this.gridSites.MasterTableView.Columns[Idx].Visible = false;
            this.gridSites.MasterTableView.Rebind();            
        }

[Clive Hoggar]

Hi I think you need to use display=false not visible=false to make this work client side without another postback... Clive

[Gene]

Thanks for responding, Clive, but I also tried using Display=false previously, but to no avail.  So, I have tried both ways in my code behind's event handler, once I tried Display=false and another time I tried Visible=false, but unfortunately, the column with which I am trying to hide still appears.  I also noticed that calling Rebind() in my code behind intiates my grid's PreRender event handler.  I also tried setting Display and Visible to false in the PreRender's event handler, such as is shown below, but that doesn't work, either; after the PreRender event handler finishes execution, I still see my grid containing the column I wish to hide.  

The situation I have is that the controls, including GridColumns and GridTemplateColumns, all first display and are rendered.  Then, depending on a user's criteria selections, I wish to hide or display columns.  There are times in which I would like to toggle the visibility of my grid columns from my code behind and other times I would like to toggle the visibility of the columns from the JavaScript.  Shouldn't it be possible to show or hide columns after they've been previously rendered through both means - from the code behind or from the client JavaScript?  I would like to know how to accomplish this, if it is possible. And, if it is not too much to ask, I would like to know how to access and change other attributes of a grid's column, such as it's header text and it's DataField, from both JavaScript and from the code behind.

protected void gridSites_PreRender(object sender, EventArgs e)
        {
            gridSites.MasterTableView.GetColumn("SiteSeqNum").Visible = false;
        }

 

[Glenn]

I'm looking into the same exact thing that @Gene was looking into here. I have a RadComboBox and on the SelectedIndexChanged event I want it to make one column's Visibility set to true, and another one's set to false, based on the selected option. However, even when changing column visibility and calling Rebind() it doesn't change the column visibility. However, when the page is initially loaded, it does work. How can I have an control Ajax controlling a grid change column visibility?

[Rumen]

Hi Glenn,

You can toggle RadGrid columns during an AJAX postback, but a few details matter:

1. Use Display, not Visible - Display removes the column from the rendered output.
2. Apply the flags every request - set Display in PreRender and persist the user choice in ViewState (or Session).
3. Wire up AJAX correctly - the RadComboBox must AJAX-update the grid, and you should call Rebind() after updating state.
4. Check UniqueName exactly - typos here will no-op.

Markup - AJAX wiring

     <!-- AJAX wiring: ComboBox updates the Grid -->
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rcbMode">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="lblState" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

Code-behind - store choice and rebind

    protected void rcbMode_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
    {
        // Persist the user choice
        switch (e.Value)
        {
            case "stock":
                ViewState[VsShowStock] = true;
                ViewState[VsShowPrice] = false;
                break;
            case "price":
                ViewState[VsShowStock] = false;
                ViewState[VsShowPrice] = true;
                break;
            default: // both
                ViewState[VsShowStock] = true;
                ViewState[VsShowPrice] = true;
                break;
        }

        UpdateStateLabel();

        // Rebind so the grid reconstructs with columns added or removed
        RadGrid1.Rebind();
    }

Code-behind - apply on every request

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    bool showStock = (ViewState["SHOW_STOCK"] is bool) && (bool)ViewState["SHOW_STOCK"];
    bool showPrice = (ViewState["SHOW_PRICE"] is bool) && (bool)ViewState["SHOW_PRICE"];

    SetColumnDisplay("StockQuantity", showStock);
    SetColumnDisplay("UnitPrice", showPrice);
}

private void SetColumnDisplay(string uniqueName, bool show)
{
    var col = SafeGetColumn(uniqueName);
    if (col != null) col.Display = show; // use Display, not Visible
}

private Telerik.Web.UI.GridColumn SafeGetColumn(string uniqueName)
{
    try { return RadGrid1.MasterTableView.GetColumn(uniqueName); }
    catch { return null; }
}

Common pitfalls

• Only toggling in SelectedIndexChanged without also setting in PreRender.
• Using Visible instead of Display.
• Mismatched column UniqueName.
• Missing AJAX setting, so the grid is not refreshed on partial postback.

Here is the complete example:
ASPX

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
     <!-- AJAX wiring: ComboBox updates the Grid -->
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rcbMode">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="lblState" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <div style="margin-bottom:12px;">
            <telerik:RadComboBox
                ID="rcbMode"
                runat="server"
                AutoPostBack="true"
                OnSelectedIndexChanged="rcbMode_SelectedIndexChanged"
                Width="260px"
                Label="Choose view: ">
                <Items>
                    <telerik:RadComboBoxItem Text="Show Stock only" Value="stock" />
                    <telerik:RadComboBoxItem Text="Show Price only" Value="price" />
                    <telerik:RadComboBoxItem Text="Show both" Value="both" />
                </Items>
            </telerik:RadComboBox>
            <asp:Label ID="lblState" runat="server" />
        </div>

        <telerik:RadGrid
            ID="RadGrid1"
            runat="server"
            AutoGenerateColumns="false"
            OnNeedDataSource="RadGrid1_NeedDataSource"
            OnPreRender="RadGrid1_PreRender"
            Width="100%">
            <MasterTableView DataKeyNames="Id">
                <Columns>
                    <telerik:GridBoundColumn DataField="Id" UniqueName="Id" HeaderText="ID" ReadOnly="true" />
                    <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Product" />
                    <telerik:GridBoundColumn DataField="StockQuantity"
                        DataType="System.Int32"
                        UniqueName="StockQuantity"
                        HeaderText="Stock" />
                    <telerik:GridBoundColumn DataField="UnitPrice"
                        DataType="System.Decimal"
                        UniqueName="UnitPrice"
                        HeaderText="Price" DataFormatString="{0:C}" />
                </Columns>
            </MasterTableView>
            <ClientSettings EnablePostBackOnRowClick="false" />
        </telerik:RadGrid>

ASPX.CS

public partial class Default3 : System.Web.UI.Page
{
    private const string VsShowStock = "VS_SHOW_STOCK";
    private const string VsShowPrice = "VS_SHOW_PRICE";

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // Default to showing both on first load
            ViewState[VsShowStock] = true;
            ViewState[VsShowPrice] = true;

            // Reflect default in UI
            var item = rcbMode.FindItemByValue("both");
            if (item != null) item.Selected = true;
            UpdateStateLabel();
        }
    }

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        // Dummy datasource
        RadGrid1.DataSource = GetSampleData();
    }

    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        // Apply column Display flags on every request so the grid renders correctly
        bool showStock = ToBool(ViewState[VsShowStock]);
        bool showPrice = ToBool(ViewState[VsShowPrice]);

        SetColumnDisplay("StockQuantity", showStock);
        SetColumnDisplay("UnitPrice", showPrice);
    }

    protected void rcbMode_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
    {
        // Persist the user choice
        switch (e.Value)
        {
            case "stock":
                ViewState[VsShowStock] = true;
                ViewState[VsShowPrice] = false;
                break;
            case "price":
                ViewState[VsShowStock] = false;
                ViewState[VsShowPrice] = true;
                break;
            default: // both
                ViewState[VsShowStock] = true;
                ViewState[VsShowPrice] = true;
                break;
        }

        UpdateStateLabel();

        // Rebind so the grid reconstructs with columns added or removed
        RadGrid1.Rebind();
    }

    private void SetColumnDisplay(string uniqueName, bool show)
    {
        var col = RadGrid1.MasterTableView.GetColumnSafe(uniqueName);
        if (col != null)
        {
            // Use Display to add-remove the column from rendered output
            col.Display = show;
        }
    }

    private static bool ToBool(object o)
    {
        return (o is bool) && (bool)o;
    }

    private void UpdateStateLabel()
    {
        bool showStock = ToBool(ViewState[VsShowStock]);
        bool showPrice = ToBool(ViewState[VsShowPrice]);
        lblState.Text = string.Format(
            "Showing - Stock: {0}, Price: {1}",
            showStock ? "Yes" : "No",
            showPrice ? "Yes" : "No"
        );
    }

    private static List<Product> GetSampleData()
    {
        return new List<Product>
        {
            new Product { Id = 1, Name = "Pencil",  StockQuantity = 120, UnitPrice = 0.50m },
            new Product { Id = 2, Name = "Notebook",StockQuantity = 45,  UnitPrice = 2.99m },
            new Product { Id = 3, Name = "Eraser",  StockQuantity = 300, UnitPrice = 0.25m },
            new Product { Id = 4, Name = "Marker",  StockQuantity = 10,  UnitPrice = 1.75m },
        };
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int StockQuantity { get; set; }
        public decimal UnitPrice { get; set; }
    }
}

// Small helper extension so GetColumn does not throw if not found
public static class RadGridExtensions
{
    public static GridColumn GetColumnSafe(this GridTableView view, string uniqueName)
    {
        try { return view.GetColumn(uniqueName); }
        catch { return null; }
    }
}

Regards,
Rumen
Progress Telerik