Hide/Show rad grid

[Eva]

Hi, 

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

Thanks
Eva

[Shinu]

Hi Eva,

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

JS:

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

ASPX:

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

Shinu

[Lee]

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.

[Viktor Tachev]

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

        }
    </script>
</telerik:RadScriptBlock>

<telerik:RadGrid runat="server" ID="RadGrid1"
    OnNeedDataSource="RadGrid1_NeedDataSource"
    AutoGenerateColumns="false"
    AllowPaging="true" PageSize="10">

    <MasterTableView DataKeyNames="ID">

        <Columns>
            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" ReadOnly="true" InsertVisiblityMode="AlwaysVisible">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Description" HeaderText="Description" UniqueName="Description">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

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));
    data.Columns.Add("Name");
    data.Columns.Add("Description");

    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.

Regards,
Viktor Tachev
Telerik

[Lee]

Works great thank you