Hiding a GridTableView in a Hierarchical RadGrid?

[Augusto]

Hello,

I have a Hierarchical RadGrid with 3 Detail tables nested inside. I'd like to know if it's possible to hide the tables if they have no records instead of showing them with the "No child records to display." message?

Note: I do not want to do this: http://www.telerik.com/help/aspnet-ajax/grdhideexpandcollapseimageswhennorecords.html. I just need to hide tables that might have no records, but one will always have records.

Thanks!

[Veli]

Hi Augusto,

If you do not need to prevent the parent item from expanding on no details records, then you can use something very simple - RadGrid's ItemCreated event:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridNoRecordsItem) e.Item.OwnerTableView.Visible = false;
}

The logic is simple - if a GridNoRecordsItem is created, hide the parent table.

Sincerely yours,
Veli
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Augusto]

Hello Veli,

This is not what I'd like to accomplish. They way I understood your code, this will work for the items on a RadGrid. But what I want to hide are items on GridTableView nested in a Hierarchical RadGrid.

Have a look at this code:

            <telerik:RadGrid ID="Grid1" runat="server" AllowSorting="True"
                AutoGenerateColumns="False" DataSourceID="SQL" GridLines="None">
                <mastertableview datakeynames="Name,Main_ID" datasourceid="SQL">
                    <rowindicatorcolumn>
                        <HeaderStyle Width="20px" />
                    </rowindicatorcolumn>
                    <DetailTables>
                        <telerik:GridTableView runat="server" DataKeyNames="Name,Main_ID" DataSourceID="SQL_DETAILS" Caption="Options1"  Width="100%">
                            <ParentTableRelation>
                                <telerik:GridRelationFields DetailKeyField="Name" MasterKeyField="Name" />
                                <telerik:GridRelationFields DetailKeyField="Main_ID" MasterKeyField="Main_ID" />
                            </ParentTableRelation>
                            <Columns>
                                ...
                            </Columns>
                        </telerik:GridTableView>
                        <telerik:GridTableView runat="server" DataKeyNames="Name,Main_ID" DataSourceID="SQL_DETAILS_2" Caption="Options2" Width="100%">
                            <ParentTableRelation>
                                <telerik:GridRelationFields DetailKeyField="Name" MasterKeyField="Name" />
                                <telerik:GridRelationFields DetailKeyField="Main_ID" MasterKeyField="Main_ID" />
                            </ParentTableRelation>
                            <Columns>
                                ...
                            </Columns>
                        </telerik:GridTableView>
                        <telerik:GridTableView runat="server" DataKeyNames="Name,Main_ID" DataSourceID="SQL_DETAILS_3" Caption="Options3"  Width="100%">
                            <ParentTableRelation>
                                <telerik:GridRelationFields DetailKeyField="Name" MasterKeyField="Name" />
                                <telerik:GridRelationFields DetailKeyField="Main_ID" MasterKeyField="Main_ID" />
                            </ParentTableRelation>
                            <Columns>
                                ...
                            </Columns>
                        </telerik:GridTableView>
                    </DetailTables>
                    <expandcollapsecolumn visible="True">
                    </expandcollapsecolumn>
                    <Columns>
                        ...
                    </Columns>
                    <ItemStyle HorizontalAlign="Left" Wrap="False" />
                    <AlternatingItemStyle HorizontalAlign="Left" Wrap="False" />
                </mastertableview>
                <headercontextmenu enableautoscroll="True">
                </headercontextmenu>
            </telerik:RadGrid>

What I want is that if any of the GridTableViews have no results they will be hidden. Grid1 should always be visibile but it is possible that one for the 3 DetailTables (GridTableViews) have 0 records; if that's the case I want to hide that particuler GridTableView.
Is that possible?

Thanks,

Augusto.

 

 

 

[Veli]

Hello Augusto,

Have you tried my suggestion? It is supposed to do exactly what you need - hide the GridTableView instance that has no records.

Best wishes,
Veli
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Ryan Grossman]

Is there anyway this can be altered to only hide detail tables? If i use that exact logic, my main radgrid is hidden when no records are displayed. I'm trying to find a way to only hide detail tables that are empty...

[Veli]

Hello Ryan,

Yes, just use this modified code:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridNoRecordsItem && e.Item.OwnerTableView != RadGrid1.MasterTableView)
        e.Item.OwnerTableView.Visible = false;
}

Veli
the Telerik team

[Caleb]

We are having a similar situation, but want to implement a javascript client based solution. We found difficulty with finding an online example,  so here's one that works for us, hope anyone seeing this has the same luck!
 
things that are needed:

1. MasterTableView must have HierarchyLoadMode="Client"

2. GridTableView must have HierarchyLoadMode="Client" 
3. ClientSettings in radgrid must have hooks into client event (we used OnTableCreated)

so parsing thru mulitple telerik threads, we came up with this solution, if you see your code, take credit and TYVM.
the javascript:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 

<script type="text/javascript">

    function HideEmptyDetailGrid() {

            var grid = $find("<%= RadGrid1.ClientID %>");

  

                        var master = grid.get_masterTableView();

                        var detailTables = grid.get_detailTables();

                        var detailTableCount = detailTables.length;

  

                        for (detailTableIndex = 0; detailTableIndex < detailTableCount; detailTableIndex++) {

                              

                            var detailTable = detailTables[detailTableIndex];

                            var rowCount = detailTable.get_dataItems().length;

  

                            if (rowCount < 1) {

  

                                //keep arrow but hide detail grid

                               // detailTable.set_visible(false);

                               // master.expandItem(detailTableIndex);

  

                                //hide arrow and detail grid

                                master.getCellByColumnUniqueName(master.get_dataItems()[detailTableIndex], "ExpandColumn").innerHTML = "";

  

                            }

                        }

        }

</script>

</telerik:RadCodeBlock>

 

last is a hierarchial radgrid and sqldatasources based on the telerik documentation:

<telerik:RadGrid ID="RadGrid1"  ShowStatusBar="true" DataSourceID="SqlDataSource1"
    runat="server" AutoGenerateColumns="False" PageSize="7" AllowSorting="True" AllowMultiRowSelection="False"
    AllowPaging="True" GridLines="None">
    <PagerStyle Mode="NumericPages"></PagerStyle>
     <ClientSettings>
        <ClientEvents  OnTableCreated ="HideEmptyDetailGrid"/>
    </ClientSettings>
    <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AllowMultiColumnSorting="True" HierarchyLoadMode="Client">
        <DetailTables>
            <telerik:GridTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource2" Width="100%" HierarchyLoadMode="Client"
                runat="server">
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />
                </ParentTableRelation>
                <Columns>
                    <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                        DataField="OrderID" UniqueName="OrderID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
                        DataField="OrderDate" UniqueName="OrderDate" DataFormatString="{0:D}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="Freight" HeaderText="Freight" HeaderButtonType="TextButton"
                        DataField="Freight" UniqueName="Freight">
                    </telerik:GridBoundColumn>
                </Columns>
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="OrderDate"></telerik:GridSortExpression>
                </SortExpressions>
            </telerik:GridTableView>
        </DetailTables>
        <Columns>
            <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
                DataField="CustomerID" UniqueName="CustomerID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                DataField="ContactName" UniqueName="ContactName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
                DataField="CompanyName" UniqueName="CompanyName">
            </telerik:GridBoundColumn>
        </Columns>
        <SortExpressions>
            <telerik:GridSortExpression FieldName="CompanyName"></telerik:GridSortExpression>
        </SortExpressions>
    </MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers where CustomerID in ('ALFKI','FISSA','PARIS','SEVES')"
    runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders Where CustomerID = @CustomerID"
    runat="server">
    <SelectParameters>
        <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" />
    </SelectParameters>
</asp:SqlDataSource>

[Nag]

small error in the below mentioned code, I changed this code little bit here and there, it's working good for me.

function HideExpandColumnRecursive(sender, eventArgs) {
            //debugger;          
            var radGrid = $find('<%= RadGrid1.ClientID %>');
            var master = radGrid.get_masterTableView();
            var detailTables = radGrid.get_detailTables();
            var detailTableCount = detailTables.length;
            //for (detailTableIndex = 0; detailTableIndex < detailTableCount; detailTableIndex++) {
            //var detailTable = detailTables[detailTableIndex];
            var detailTable = detailTables[detailTableCount - 1];
            if (detailTable.get_dataItems() != null) {
                var rowCount = detailTable.get_dataItems().length;
                if (rowCount < 1) {
                    //keep arrow but hide detail grid
                    // detailTable.set_visible(false);
                    // master.expandItem(detailTableIndex);
                    //hide arrow and detail grid
                    //master.getCellByColumnUniqueName(master.get_dataItems()[detailTableIndex], "ExpandColumn").innerHTML = "";
                    master.getCellByColumnUniqueName(master.get_dataItems()[detailTableCount - 1], "ExpandColumn").innerHTML = "";
                    //master.getCellByColumnUniqueName(master.get_dataItems()[detailTableIndex], "ExpandColumn").innerHTML.display = "none";
                    detailTable.get_element().innerHTML = "";
                    detailTable.get_element().style.overflow = "hidden"; //.innerHtml.css('display', 'none');
                    // detailTable.style('visible', false);
                }
            }
            //}
        }

//ASPX page code:

<telerik:RadGrid ID="RadGrid1"  ShowStatusBar="true" DataSourceID="SqlDataSource1"
 
    runat="server" AutoGenerateColumns="False" PageSize="7" AllowSorting="True" AllowMultiRowSelection="False"
 
    AllowPaging="True" GridLines="None">

    <PagerStyle Mode="NumericPages"></PagerStyle>

     <ClientSettings>

        <ClientEvents  OnTableCreated ="HideEmptyDetailGrid"/>

    </ClientSettings> 

    <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AllowMultiColumnSorting="True" HierarchyLoadMode="Client">

        <DetailTables>

            <telerik:GridTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource2" Width="100%" HierarchyLoadMode="Client"
 
                runat="server">

                <ParentTableRelation>

                    <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />

                </ParentTableRelation>

                <Columns>

                    <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
 
                        DataField="OrderID" UniqueName="OrderID">

                    </telerik:GridBoundColumn>

                    <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
 
                        DataField="OrderDate" UniqueName="OrderDate" DataFormatString="{0:D}">

                    </telerik:GridBoundColumn>

                    <telerik:GridBoundColumn SortExpression="Freight" HeaderText="Freight" HeaderButtonType="TextButton"
 
                        DataField="Freight" UniqueName="Freight">

                    </telerik:GridBoundColumn>

                </Columns>

                <SortExpressions>

                    <telerik:GridSortExpression FieldName="OrderDate"></telerik:GridSortExpression>

                </SortExpressions>

            </telerik:GridTableView>

        </DetailTables>

        <Columns>

            <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
 
                DataField="CustomerID" UniqueName="CustomerID">

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
 
                DataField="ContactName" UniqueName="ContactName">

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
 
                DataField="CompanyName" UniqueName="CompanyName">

            </telerik:GridBoundColumn>

        </Columns>

        <SortExpressions>

            <telerik:GridSortExpression FieldName="CompanyName"></telerik:GridSortExpression>

        </SortExpressions>

    </MasterTableView>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

    ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers where CustomerID in ('ALFKI','FISSA','PARIS','SEVES')"

    runat="server"></asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

    ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders Where CustomerID = @CustomerID"

    runat="server">

    <SelectParameters>

        <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" />

    </SelectParameters>

</asp:SqlDataSource>

[Nag]

var k = 0;
        function HideExpandColumnRecursive(sender, eventArgs) {
            var grid = $find('<%=rgScTrack.ClientID %>');
            var masterTable = grid.get_masterTableView();
            traverseChildTables(masterTable);
            k = k + 1;
        }

        function traverseChildTables(gridTableView) {
            debugger;
            var dataItems = gridTableView.get_dataItems();
            if (k == dataItems.length) {
                for (var i = 0; i < dataItems.length; i++) {

                    if (dataItems[i].get_nestedViews().length > 0) {
                        var nestedView = dataItems[i].get_nestedViews()[0];
                        var childdataItems = nestedView.get_dataItems();
                        if (childdataItems.length != 0) {
                            for (var j = 0; j < childdataItems.length; j++) {

                                if (childdataItems[j].get_nestedViews().length == 0) {
                                    debugger;
                                    gridTableView.getCellByColumnUniqueName(gridTableView.get_dataItems()[i], "ExpandColumn").innerHTML = "";
                                }
                            }
                        }
                        else
                            gridTableView.getCellByColumnUniqueName(gridTableView.get_dataItems()[i], "ExpandColumn").innerHTML = "";

                    }
                    else {
                        gridTableView.getCellByColumnUniqueName(gridTableView.get_dataItems()[i], "ExpandColumn").innerHTML = "";
                    }
                }
            }
        }

//ASPX page code:

<telerik:RadGrid ID="RadGrid1" ShowStatusBar="true" DataSourceID="SqlDataSource1"
 runat="server" AutoGenerateColumns="False" PageSize="7" AllowSorting="True" AllowMultiRowSelection="False"
 AllowPaging="True" GridLines="None">
<PagerStyle Mode="NumericPages"></PagerStyle>
<ClientSettings>
<ClientEvents OnTableCreated ="HideExpandColumnRecursive"/>
</ClientSettings>
<MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AllowMultiColumnSorting="True" HierarchyLoadMode="Client">
<DetailTables>
<telerik:GridTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource2" Width="100%" HierarchyLoadMode="Client"
 runat="server">
<ParentTableRelation>
<telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />
</ParentTableRelation>
<Columns>
<telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
 DataField="OrderID" UniqueName="OrderID">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
 DataField="OrderDate" UniqueName="OrderDate" DataFormatString="{0:D}">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="Freight" HeaderText="Freight" HeaderButtonType="TextButton"
 DataField="Freight" UniqueName="Freight">
</telerik:GridBoundColumn>
</Columns>
<SortExpressions>
<telerik:GridSortExpression FieldName="OrderDate"></telerik:GridSortExpression>
</SortExpressions>
</telerik:GridTableView>
</DetailTables>
<Columns>
<telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
 DataField="CustomerID" UniqueName="CustomerID">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
 DataField="ContactName" UniqueName="ContactName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
 DataField="CompanyName" UniqueName="CompanyName">
</telerik:GridBoundColumn> </Columns>
<SortExpressions>
<telerik:GridSortExpression FieldName="CompanyName"></telerik:GridSortExpression>
</SortExpressions>
</MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers where CustomerID in ('ALFKI','FISSA','PARIS','SEVES')"
runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders Where CustomerID = @CustomerID"
runat="server">
<SelectParameters>
<asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" />
</SelectParameters>
</asp:SqlDataSource>

 

[Caleb]

Nag,

 

Thanks for your contribution. Are you asking for help?

I see your first post is not working as mentioned, neither is the second one updated two days ago  (rgScTrack.ClientID doesnt exist).

Also when replacing  rgScTrack with RadGrid1 or vice versa, the child GridTableView still displays.

 

 

 

By the way,

I verified my code worked by creating a Visual Studio 2010 web application project and pasted my code sample in.

It hid the expand arrows for FISSA and Paris (empty children) as expected.

  

I'm using :

 

• IE 8
• Firefox 15

• Telerik.Web.UI/Telerik.Web.Design v4.0.30319 and 2011.1.413.40