Show/Hide GridGroupHeaderItem client-side

[bern]

In the code-behind in the grid_ItemDataBound event I have this code to hide a particular GridGroupHeaderItem.  Now I want to show it later in the client-side based on some condition.  I can't figure out how to do this please help.

 

if

 

(e.Item is GridGroupHeaderItem)

 

{

 

GridGroupHeaderItem groupHeaderItem = (GridGroupHeaderItem)e.Item;

 

 

DataRowView groupDataRow = (DataRowView)e.Item.DataItem;

 

 

if (String.IsNullOrEmpty(groupDataRow["TRCategoryLabel"].ToString()))

 

{

 

groupHeaderItem.Display =

false;

 

}

 

else

 

{

 

if (groupDataRow["TRCategoryLabel"].ToString() == "OnCall Time Worked")

 

groupHeaderItem.Display =

false;

 

 

else

 

groupHeaderItem.DataCell.Text =

"<b>" + groupDataRow["TRCategoryLabel"].ToString() + "</b>";

 

}

Thanks,
Bernard

[Georgi Krustev]

Hello Bern,

You can set a custom class to the group header, which will hide it. Then on the client you can find those items depending on the assigned custom class with jQuery and to remove it. Thus you will show the hidden group items.

Sincerely yours,
Georgi Krustev
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.

[bern]

Thanks but can you show me an example?  That would help very much.

-bn

[Georgi Krustev]

Hello Bern,

To achieve your goal you need to wire the ItemCreated event and apply your custom css class in order to hide the group header depending on some condition. Here is a code snippet showing how to achieve this:

C#:

    protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridGroupHeaderItem)
        {
            e.Item.CssClass = "hideGroupHeader";
        }
    }

CSS class:

    <style type="text/css">
        .hideGroupHeader
        {
            display: none;
        }
    </style>

JavaScript:

            function ShowGroupHeader() {
                var result = $telerik.$(".hideGroupHeader");
                for (var i = 0; i < result.length; i++)
                {
                    result[i].className = "rgGroupHeader";
                }
            }

As you maybe noticed I have used in the ShowGroupHeader item jQuery to find all group header rows which have the custom CSS class applied.

Below is a code excerpts which shows how to register jQuery:

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" >
    <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" />
    </Scripts>
</telerik:RadScriptManager>

Regards,
Georgi Krustev
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.

[bern]

Thank you very much.  That makes sense now.  I will try that out right now.

Bernard