Hierarchial Grouping using Rad Grid

17 posts, 0 answers
  1. Bala
    Bala avatar
    2 posts
    Member since:
    Jan 2012

    Posted 30 Jan 2012 Link to this post

    Hi,

    Using RadGrid Control i need to implement Grouping Based upon the hierarchy for eg. My data will be look like this
         Name                       Age                  Status
    ---------------------------------------------------------------------------
    + CategoryA
       + CategoryB
             Person 1               25                    Working
             Person  2              26                    Self Employment
       + CategoryC
             Person 3               23                    Student
             Person 4               23                    Student
             +  Category F
                      Person 5      24                     Agriculture
     + CategoryD
         + Category E
               Person 6             25                     Software Engineer

    In the above example the Category will be having a hierarchy structure and the details inside that will be fetched out different table based on reference.

    Hope you can understand the scenario which i am trying to convey and waiting for your quick response. Also don wanna use nested grid to implement this. Kindly share me how can i acheive the above using rad grid.

    Thanks
    Bala
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 30 Jan 2012 Link to this post

    Hello Bala,

    For that please used Treelist in-place of Radgrid.

    http://demos.telerik.com/aspnet-ajax/treelist/examples/firstlook/defaultcs.aspx

    Let me know if any concern.

    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bala
    Bala avatar
    2 posts
    Member since:
    Jan 2012

    Posted 30 Jan 2012 Link to this post

    Hi,

    Thanks for the reply. Is it possible to perform client side action in the treelist control instead of doing server side action to expand the node? Also will it support tool tip functionality as like in rad grid?

    Thanks
    Bala
  5. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 30 Jan 2012 Link to this post

    Hello Bala,

    Yes,
    For more information please check below link.
    http://demos.telerik.com/aspnet-ajax/treelist/examples/client/clientsideevents/defaultcs.aspx

    Thanks,
    Jayesh Goyani
  6. Serkan
    Serkan avatar
    6 posts
    Member since:
    Jan 2012

    Posted 02 Apr 2012 Link to this post

    how we use radgrid in radtreelist?
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 02 Apr 2012 Link to this post

    Hello Serkan,

    You can use DetailTemplate of RadTreeList for nesting a RadGrid. Here is the sample code.
    aspx:
    <telerik:RadTreeList Skin="Hay" ID="RadTreeList1" runat="server" OnNeedDataSource="RadTreeList1_NeedDataSource" ParentDataKeyNames="ParentID" DataKeyNames="ID" AllowPaging="true" PageSize="5" AutoGenerateColumns="false" AllowSorting="true" OnItemDataBound="RadTreeList1_ItemDataBound">
     <DetailTemplate>
       <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true" DataSourceID="SqlDataSource1"></telerik:RadGrid>
     </DetailTemplate>
      <Columns>
       <telerik:TreeListBoundColumn DataField="ID" UniqueName="ID" HeaderText="Category ID" />
        . . . .
      </Columns>
    </telerik:RadTreeList>

    Thanks,
    Shinu.
  8. Serkan
    Serkan avatar
    6 posts
    Member since:
    Jan 2012

    Posted 02 Apr 2012 Link to this post

    i use radtreelist in radgrid where, according to MENU_ID radtreelist come in RadGrid. but not: ( 



    <telerik:RadGrid ID="rgManagementList" runat="server" ShowStatusBar="true"
                    PageSize="20" AllowSorting="true" AllowMultiRowSelection="True" AllowPaging="true"
                    GridLines="None" OnItemDataBound="rgManagementList_ItemDataBound" OnInsertCommand="rgManagementList_InsertCommand"
                    OnItemCreated="rgManagementList_ItemCreated" OnUnload="rgManagementList_Unload"
                    OnNeedDataSource="rgManagementList_NeedDataSource" 
                    OnUpdateCommand="rgManagementList_UpdateCommand" 
                    OnItemCommand="rgManagementList_ItemCommand" OnPreRender="rgManagementList_PreRender">
                    <PagerStyle Mode="NumericPages" />
                    <MasterTableView DataKeyNames="MENU_ID" AutoGenerateColumns="False" 
                        CommandItemDisplay="Top" GroupLoadMode="Server">
                         <NestedViewSettings>
                    <ParentTableRelation>
                        <telerik:GridRelationFields DetailKeyField="MENU_ID" MasterKeyField="MENU_ID" />
                    </ParentTableRelation>
                </NestedViewSettings>
                        <NestedViewTemplate>
                            <telerik:RadTreeList runat="server" ID="rtreeDersYonetimi" AllowPaging="true" PageSize="20"
                                PagerStyle-AlwaysVisible="true" AllowSorting="true" AllowFilteringByColumn="true"
                                ShowGroupPanel="false" DataKeyNames="ID" ParentDataKeyNames="PARENT_ID" AutoGenerateColumns="false"
                                OnNeedDataSource="rtreeDersYonetimi_NeedDataSource" OnUpdateCommand="rtreeDersYonetimi_Updatecommand"
                                OnInsertCommand="rtreeDersYonetimi_Insertcommand" OnDeleteCommand="rtreeDersYonetimi_Deletecommand"
                                OnUnload="rtreeDersYonetimi_Unload" 
                                onitemcommand="rtreeDersYonetimi_ItemCommand" 
                                onitemdatabound="rtreeDersYonetimi_ItemDataBound" >
                                
                                <Columns>
                                    <telerik:TreeListBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID" Visible="false"
                                        ReadOnly="true" />
                                    <telerik:TreeListBoundColumn DataField="TITLE" UniqueName="TITLE" HeaderText="BAŞLIK" />
                                    <telerik:TreeListBoundColumn DataField="MENU_ID" UniqueName="MENU_ID" HeaderText="MENU_ID"></telerik:TreeListBoundColumn>
                                    <telerik:TreeListHyperLinkColumn DataTextFormatString="Düzenle" DataNavigateUrlFields="ID"
                                        UniqueName="ID" DataNavigateUrlFormatString="~/PageEdit.aspx?PgId={0}" HeaderText=""
                                        DataTextField="ID">
                                    </telerik:TreeListHyperLinkColumn>
                                    <telerik:TreeListEditCommandColumn UniqueName="InsertCommandColumn" ButtonType="ImageButton"
                                        ShowEditButton="false" HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center" />
                                    <telerik:TreeListButtonColumn CommandName="Edit" Text="Edit" UniqueName="EditCommandColumn"
                                        ButtonType="ImageButton" HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center" />
                                    <telerik:TreeListButtonColumn UniqueName="DeleteCommandColumn" Text="Delete" CommandName="Delete"
                                        ButtonType="ImageButton" HeaderStyle-Width="30px" />
                                </Columns>
                            </telerik:RadTreeList>
                        </NestedViewTemplate>
                        <CommandItemSettings ExportToPdfText="Export to PDF" />
                        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" 
                            Visible="True">
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" 
                            Visible="True">
                        </ExpandCollapseColumn>
                        <Columns>
                        
                            <telerik:GridTemplateColumn DataField="MENU_ID" HeaderText="MENU_ID" UniqueName="MENU_ID" Visible="false"
                                ReadOnly="true">
                                <ItemTemplate>
                                <asp:Label ID="lblmenu" runat="server" Text='<%# Bind("MENU_ID") %>'></asp:Label>
                                </ItemTemplate>
                                <InsertItemTemplate>
                                    <telerik:RadTextBox ID="RadTextBox1" runat="server" Text='<%# Bind("MENU_ID") %>' Width="150px"
                                        Visible="false" />
                                </InsertItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadTextBox ID="RadTextBox1" runat="server" Text='<%# Eval("MENU_ID") %>' ReadOnly="true"
                                        Width="150px" />
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="TITLE" HeaderText="BAŞLIK" UniqueName="TITLE" />
                            <telerik:GridTemplateColumn DataField="DEF" HeaderText="AKTİF/PASİF" UniqueName="DEF"
                                AllowFiltering="false">
                                <ItemTemplate>
                                    <asp:Label ID="lblDef" runat="server" Text='<%# Bind("DEF") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:CheckBox ID="CheckBoxActive" runat="server"></asp:CheckBox>
                                </EditItemTemplate>
                                <InsertItemTemplate>
                                    <asp:CheckBox ID="CheckBoxActive" runat="server"></asp:CheckBox>
                                </InsertItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="COMPANY_ID" HeaderText="COMPANY_ID" UniqueName="COMPANY_ID"
                                ReadOnly="true" Visible="false" />
                                <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
                        </Columns>
                        <EditFormSettings CaptionFormatString="<h5>Edit properties of Menu [{0}]</h5>" CaptionDataField="TITLE"
                            InsertCaption="<h5>NEW TITLE</h5>" FormMainTableStyle-Width="100%" FormMainTableStyle-BackColor="LightBlue">
                            <EditColumn ButtonType="ImageButton" UpdateText="Update record" CancelText="Cancel edit">
                            </EditColumn>
                            <FormMainTableStyle BackColor="LightBlue" Width="100%" />
                        </EditFormSettings>
                        <PagerStyle AlwaysVisible="True" />
                    </MasterTableView>
                    <PagerStyle AlwaysVisible="True" />
                    <FilterMenu AppendDataBoundItems="True" EnableImageSprites="False">
                    </FilterMenu>
                    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Windows7">
                    </HeaderContextMenu>
                </telerik:RadGrid>
  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 06 Apr 2012 Link to this post

    Hello Serkan,

    Can you open a formal support ticket and send us a sample runnable project where the problem you are facing can be replicated? Thus we will be able to debug it locally and provide a proper solution/fix. Thank you for your cooperation in advance.

    Regards,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 19 Feb in reply to Serkan Link to this post

    Hello.  Did you ever get this sorted out?  I have exactly the same problem.  I am getting RadTreeList displayed as many times as there are categories.  The TreeList structure is correct.  It is just that instead of a specific treeList per category, I get the whole treeList (for all categories) listed under each category!

    If I knew how to access Menu_Id (or categoryId in your example) in RadTreeList1_NeedDataSource event handler, I could filter it out.

     

    Thank you, Raka.

  11. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 24 Feb Link to this post

    Hello Raka,

    Could you specify a bit more what is the exact scenario you have and what you can not sorted out? Which is the Telerik RadTreelist online example that you mentioned? Do you have Treelist inside grid NestedViewTemplate or your scenario is different?

    Regards,
    Pavlina
    Telerik
    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
  12. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 24 Feb in reply to Pavlina Link to this post

    Hello Pavlina

    I have a RadGrid that contains a UserControl inside NextedViewTemplate as follows --

    Grid

    ============

    <telerik:RadGrid ID="rgPeople" runat="server" AutoGenerateColumns="False" AllowMultiRowSelection="true"
        OnItemCommand="rgPeople_ItemCommand" ClientSettings-AllowExpandCollapse="true"
        OnPreRender="rgPeople_PreRender" OnNeedDataSource="rgPeople_NeedDataSource"
        AllowSorting="false" AllowPaging="false" ShowFooter="false" PageSize="100" BorderStyle="None">
        <ClientSettings>
            <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"></Selecting>
            <Scrolling AllowScroll="True" SaveScrollPosition="True" UseStaticHeaders="true">
            </Scrolling>
        </ClientSettings>
        <MasterTableView DataKeyNames="DirID, IsDeletable" ClientDataKeyNames="DirID"
            AllowMultiColumnSorting="false" BorderStyle="None" HierarchyLoadMode="Client"
            HierarchyDefaultExpanded="true" EnableNoRecordsTemplate="true" NoDetailRecordsText="" Name="People">
            <NoRecordsTemplate>
                <div style="display:none; visibility:hidden; background-color: blue;"></div>
            </NoRecordsTemplate>
            <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true"></PagerStyle>
            <NestedViewSettings>
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="DirID" MasterKeyField="DirID" />
                </ParentTableRelation>
            </NestedViewSettings>
            <NestedViewTemplate>
                <div style="background-color: #d9d9d9; padding: 0px 25px 0px 25px;">
                    <uc1:PersonTreeList ID="PersonGrid1" runat="server" ShowFooter="false"   AllowPaging="false"  />
                </div>
            </NestedViewTemplate>
            <Columns>
                <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" ItemStyle-Width="25px"
                    HeaderStyle-Width="25px" />
                <telerik:GridTemplateColumn UniqueName="ClientSelectColumnPlaceHolder" ItemStyle-Width="15px"
                    HeaderStyle-Width="15px" Visible="false">
                    <ItemTemplate>
                        &nbsp;
                    </ItemTemplate>
                </telerik:GridTemplateColumn>

                   .. and so on.

     

    TreeList (User Control - PersonTreeList) definition

    ------------------------------------------------------------------------

    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTreeList1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1" ></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
     
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadTreeList RenderMode="Classic" ID="RadTreeList1" runat="server" DataKeyNames="PersonId" ParentDataKeyNames="ParentId"
                AllowPaging="false" OnNeedDataSource="RadTreeList1_NeedDataSource" OnItemDataBound="RadTreeList1_ItemDataBound"
                AutoGenerateColumns="false" ExpandCollapseMode="Client"   >
                <ClientSettings>
                    <Selecting AllowItemSelection="true" AllowToggleSelection="true" />
                </ClientSettings>
                <Columns>
                    <telerik:TreeListSelectColumn UniqueName="ClientSelectColumn" ItemStyle-Width="25px" HeaderStyle-Width="25px" />
                    <telerik:TreeListBoundColumn DataField="PersonId" HeaderText="" ReadOnly="true"
                        HeaderStyle-Width="0px" ItemStyle-Width="0px" ForceExtractValue="Always">
                    </telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="DirID" HeaderText="Directorate"  Visible="false">
                    </telerik:TreeListBoundColumn>
                    <telerik:TreeListTemplateColumn UniqueName="ClientSelectColumnPlaceHolder" HeaderStyle-Width="28px" ItemStyle-Width="28px" Visible="true">
                        <ItemTemplate>
                            <asp:Image ID="imgConcurred" runat="server" ImageUrl="/Portal/Images/Update.gif"
                                Height="22px" Visible="false" />
                        </ItemTemplate>
                    </telerik:TreeListTemplateColumn>
                    <telerik:TreeListTemplateColumn HeaderText="Assigned To">
                        <ItemTemplate>
                            <asp:Label ID="lblUserInfo" runat="server"></asp:Label>
                        </ItemTemplate>
                    </telerik:TreeListTemplateColumn>

                             and so on...

     

     

    Problems

    =====================

    1) I have 3 GridRows. For each Grid Row, I have a TreeList.  Everything is expanded by default.  If I try to collapse TreeList in one of the GridRow, it doesn't behave properly.  For example if I am collapsing TreeList in GridRow-0, it seems to collapse TreeList in GridRow-1 and GridRow-2.  Collapsing doesn't seem to change '-' to '+'.  So the expand-collapse is not working.

    2) How do I get the selected TreeList node in Javascript?  I need to know the Id associated with the selected node in JS.

     

    Thank you

    Raka



     

  13. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 29 Feb Link to this post

    Hi,

    As your scenario is quite complicated may I ask you isolate the issue in a runnable project and send it to us via support ticket. We will debug it locally and will get back to you with our findings.

    Regards,
    Pavlina
    Telerik
    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
  14. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 29 Feb Link to this post

    Hello Pavina

    My scenario is very similar to the example I was pointed to.  Instead of RadTree being nested I have TreeList.  TreeList doesn't seem to behave the same way.  I can't even find many examples on line.  Most examples are talking about RadTreeView.

    Thanks,

    Raka

  15. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 29 Feb in reply to Raka Link to this post

    I was pointed to --

    http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/hierarchy-with-templates/defaultcs.aspx

     

    This ex has RadListView inside RadGrid.  I want to have RadTreeList. 

    Thanks, Raka

  16. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 01 Mar in reply to Raka Link to this post

    Hello -- Originally I had a RadGrid insided RadGrid as Self-Hierarchy.  It works well except for one thing.  If I have HierarchyDefaultExpanded set to true for MasterTableView, then it adds lots of empty/grey lines which looks very ugly.  The only way I can get rid of these is by setting the DefaultExpand property to 'false'.  Please see attached for a screenshot.

    How can I get rid of these lines?  If I can remove these then I won't have to use RadTreeList or anything else.  I really like the look of how RadTreeList looks but it is too complicated and is taking too long.

    So, if you could please help me to remove these extra lines, I would greatly appreciate it.

    The code is below --

    <telerik:RadGrid ID="rgPerson" runat="server" AutoGenerateColumns="False"
        AllowMultiRowSelection="true" OnPreRender="rgPerson_PreRender" OnItemCommand="rgPerson_ItemCommand"
        OnItemDataBound="rgPerson_ItemDataBound" OnItemCreated="rgPerson_ItemCreated"
        OnNeedDataSource="rgPerson_NeedDataSource" AllowSorting="false" AllowPaging="false"
        ShowFooter="false" BorderStyle="Solid" BorderWidth="1px" PageSize="100">
        <ClientSettings >
            <Selecting AllowRowSelect="True"></Selecting>
            <Scrolling AllowScroll="True" SaveScrollPosition="True" UseStaticHeaders="true">
            </Scrolling>
        </ClientSettings>
        <MasterTableView DataKeyNames="AssignmentId, ParentId" AllowMultiColumnSorting="false"
            HierarchyDefaultExpanded="true" HierarchyLoadMode="Client" EnableNoRecordsTemplate="false" NoDetailRecordsText=""
            Width="100%">
            <SelfHierarchySettings ParentKeyName="ParentId" KeyName="AssignmentId" />
            <Columns>
                <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" ItemStyle-Width="25px"
                    HeaderStyle-Width="25px" />
                <telerik:GridTemplateColumn UniqueName="ClientSelectColumnPlaceHolder" ItemStyle-Width="15px"
                    HeaderStyle-Width="15px" Visible="false">
                    <ItemTemplate>
                        &nbsp;
                    </ItemTemplate>
                </telerik:GridTemplateColumn>

                       ...

    Thank you
    Raka

  17. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 02 Mar Link to this post

    Hi,

    Self-referencing hierarchy is not supported in RadGrid as it is a custom scenario and needs to be implemented manually. This said it is highly recommended to use RadTreeList control in cases where you need self-referencing hierarchy.

    If you need to present such hierarchical relations I would suggest using RadTreeList control as it is designed to handle self-referencing hierarchy. An online demo illustrating the functionality is available here.
    http://demos.telerik.com/aspnet-ajax/treelist/examples/overview/defaultcs.aspx

    Regards,
    Pavlina
    Telerik
    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
  18. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 02 Mar in reply to Pavlina Link to this post

    Hello

    But that is the problem.  I did manually implement it and it works beautifully - except for the look.  As I explained, it is adding extra lines under each row which looks ugly.  My question was how to get rid of these.

    If you see my posts earlier, I did try RadTreeList but it almost works.  I had question on this --

    1) I have 3 GridRows. For each Grid Row, I have a TreeList.  Everything is expanded by default.  If I try to collapse TreeList in one of the GridRow, it doesn't behave properly.  For example if I am collapsing TreeList in GridRow-0, it seems to collapse TreeList in GridRow-1 and GridRow-2.  Collapsing doesn't seem to change '-' to '+'.  So the expand-collapse is not working.
    2) How do I get the selected TreeList node in Javascript?  I need to know the Id associated with the selected node in JS.

     

    I cannot send you the code for it.  That is why I wanted to get back to using RadGrid with Self-Hierarchy as it is working and has been in production for a while.  I just want to get rid of the extra lines so that it doesn't look ugly.  Please see the screenshot.png that I attached.

    Thank you

    Raka

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017