This is a migrated thread and some comments may be shown as answers.

Hiding a GridTableView in a Hierarchical RadGrid?

9 Answers 425 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Augusto
Top achievements
Rank 1
Augusto asked on 19 Mar 2010, 05:15 PM
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!

9 Answers, 1 is accepted

Sort by
0
Veli
Telerik team
answered on 24 Mar 2010, 10:53 AM
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.
0
Augusto
Top achievements
Rank 1
answered on 24 Mar 2010, 02:59 PM

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.

 

 

 

0
Veli
Telerik team
answered on 24 Mar 2010, 05:09 PM
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.
0
Ryan Grossman
Top achievements
Rank 1
answered on 02 Dec 2010, 03:19 AM
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...
0
Veli
Telerik team
answered on 02 Dec 2010, 08:43 AM
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
Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Caleb
Top achievements
Rank 1
answered on 06 Aug 2012, 07:08 PM
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>

0
Nag
Top achievements
Rank 1
answered on 21 Aug 2012, 01:55 PM
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>

0
Nag
Top achievements
Rank 1
answered on 21 Sep 2012, 08:46 PM
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>

 

0
Caleb
Top achievements
Rank 1
answered on 24 Sep 2012, 01:10 PM

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
      Tags
      Grid
      Asked by
      Augusto
      Top achievements
      Rank 1
      Answers by
      Veli
      Telerik team
      Augusto
      Top achievements
      Rank 1
      Ryan Grossman
      Top achievements
      Rank 1
      Caleb
      Top achievements
      Rank 1
      Nag
      Top achievements
      Rank 1
      Share this question
      or