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
16 Answers, 1 is accepted
Rank 2
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
Rank 1
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
Rank 2
Yes,
For more information please check below link.
http://demos.telerik.com/aspnet-ajax/treelist/examples/client/clientsideevents/defaultcs.aspx
Thanks,
Jayesh Goyani
Rank 1
Rank 2
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.
Rank 1
<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>
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
Rank 1
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.
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
Rank 1
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>
</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
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
Rank 1
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
Rank 1
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
Rank 1
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>
</ItemTemplate>
</telerik:GridTemplateColumn>
...
Thank you
Raka
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
Rank 1
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