Hide/Show rad grid

5 posts, 0 answers
  1. Eva
    Eva avatar
    65 posts
    Member since:
    Oct 2007

    Posted 10 Dec 2008 Link to this post


    Is there  any way to Hide /show rad grid like detail table.

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Dec 2008 Link to this post

    Hi Eva,

    You can hide  or show RadGrid on the Client side using the following javascript code.

    <script type="text/javascript"
     function ShowGrid() 
       $find("<%=RadGrid1.ClientID %>").get_element().style.display = ""
     function HideGrid() 
       $find("<%=RadGrid1.ClientID %>").get_element().style.display = "none"

    <telerik:RadGrid ID="RadGrid1" runat="server" ...> 
     -----your grid definition here 
    <br /> 
    <input id="btnShowGrid" type="button" value="Show grid" onclick="ShowGrid()" /> 
    <input id="btnHideGrid" type="button" value="Hide grid" onclick="HideGrid()" /> 

  3. Lee
    Lee avatar
    4 posts
    Member since:
    Feb 2015

    Posted 05 Nov 2015 in reply to Shinu Link to this post

    That method doesn't work for me. My code:

    var grid = $find("<%=gvReport.ClientID %>");
    var MasterTable = grid.get_masterTableView();
    var Rows = MasterTable.get_dataItems();
    if (Rows.length > 0) {
        $find("<%=gvReport.ClientID %>").get_element().style.display = "none";


    Any suggestions?  I just want to hide the grid when I reset; if there are no rows then no reason to hide.

  4. Viktor Tachev
    Viktor Tachev avatar
    2469 posts

    Posted 10 Nov 2015 Link to this post

    Hello Lee,

    I tested the described approach and it is working as expected on my end. The markup I am using is below.

    <telerik:RadScriptBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            function pageLoad() {
                var grid = $find("<%=RadGrid1.ClientID %>");
                var masterTable = grid.get_masterTableView();
                var rows = masterTable.get_dataItems();
                if (rows.length > 0) {
                    grid.get_element().style.display = "none";
    <telerik:RadGrid runat="server" ID="RadGrid1"
        AllowPaging="true" PageSize="10">
        <MasterTableView DataKeyNames="ID">
                <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" ReadOnly="true" InsertVisiblityMode="AlwaysVisible">
                <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name">
                <telerik:GridBoundColumn DataField="Description" HeaderText="Description" UniqueName="Description">

    And this is in the code-behind:

    protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        DataTable data = new DataTable();
        data.Columns.Add("ID", typeof(int));
        for (int i = 1; i < 31; i++)
            data.Rows.Add(i, "Name" + (i % 5).ToString(), "Description" + i.ToString());
        RadGrid1.DataSource = data;

    Let me know how the approach works for you and what is different in your scenario.

    Viktor Tachev
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Lee
    Lee avatar
    4 posts
    Member since:
    Feb 2015

    Posted 17 Nov 2015 in reply to Viktor Tachev Link to this post

    Works great thank you
Back to Top