Using CSS and html need the below format like category and sub-categories (Definetly it should be like expanding and collapsing functionality). Could anyone please give me some ideas on aspx side as well as code-behind. That would be great.
1 Answer, 1 is accepted
Hi spandana,
The described functionality could be achieved with our RadTreeView for ASP.NET AJAX control. You can review the control's demos and examine its functionality further here:
https://demos.telerik.com/aspnet-ajax/treeview/examples/overview/defaultcs.aspx
You can see a sample RadTreeView setup below:
<telerik:RadTreeView RenderMode="Lightweight" runat="Server" ID="RadTreeView1" EnableDragAndDrop="true" OnNodeDrop="RadTreeView1_NodeDrop"
OnClientNodeDropping="onDropping" EnableDragAndDropBetweenNodes="false" Skin="Vista" >
<Nodes>
<telerik:RadTreeNode runat="server" Text="Island" Expanded="true" AllowDrag="false"
AllowDrop="false">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Zanzibar" AllowDrag="false">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Weekend Package" AllowDrop="false" Value="1999">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="1 Week Package" AllowDrop="false" Value="2999">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="2 Week Package" AllowDrop="false" Value="3999">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Mauritius" AllowDrag="false">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Weekend Package" AllowDrop="false" Value="2999">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="1 Week Package" AllowDrop="false" Value="3999">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="2 Week Package" AllowDrop="false" Value="4999">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Maldives" Expanded="true" AllowDrag="false">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Weekend Package" AllowDrop="false" Value="3999">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="1 Week Package" AllowDrop="false" Value="4999">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="2 Week Package" AllowDrop="false" Value="5999">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
Regards,
Vessy
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hi Vessy,
Thank you so much for the response! I also need the code sample for code-behind portion for the below one.
Say for example if Madlives, Maruritius is a category and weekend package, 1 week package, 2 week package are sub-categories. I bought these from the database tables as below (This is my previous code). When i tried the below one i got the result as for each sub-category it is displaying the category name each time. But, it should be like.... it should display all the respective sub-categories and display category name only once. Any help is much appreciated!
Hi spandana,
Please, copy any code snippets that you provide as text, instead of images, so you can copy and test them directly.
As for the category hierarchy - it depends on the ParendID field structure. For example, in order to have a similar result:
You will need to configure the TreeView like follows:
<telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" Width="300px" Height="350px">
<NodeTemplate>
<table>
<tr>
<td class="ItemHeader"><%# DataBinder.Eval(Container.DataItem, "Category") %></td>
</tr>
<tr>
<td id='divN<%# DataBinder.Eval(Container.DataItem, "LORLink") %>'>
<asp:HyperLink runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Description") %>'
NavigateUrl='<%# DataBinder.Eval(Container.DataItem, "LORLink") %>' Target="_blank"></asp:HyperLink>
</td>
</tr>
</table>
</NodeTemplate>
<DataBindings>
<telerik:RadTreeNodeBinding Expanded="True"></telerik:RadTreeNodeBinding>
</DataBindings>
</telerik:RadTreeView> internal class SiteDataItem
{
private int id;
private int parentId;
private string category;
private string link;
private string description;
public int ID
{
get { return id; }
set { id = value; }
}
public int ParentID
{
get { return parentId; }
set { parentId = value; }
}
public string Category
{
get { return category; }
set { category = value; }
}
public string LORLink
{
get { return link; }
set { link = value; }
}
public string Description
{
get { return description; }
set { description = value; }
}
public SiteDataItem(int id, string category, int parentId, string link, string description)
{
this.id = id;
this.parentId = parentId;
this.link = link;
this.category = category;
this.description = description;
}
}
private static void BindToIEnumerable(RadTreeView treeView)
{
List<SiteDataItem> siteData = new List<SiteDataItem>();
siteData.Add(new SiteDataItem(1, "category 1", 0, "www.link1.com", "link 1"));
siteData.Add(new SiteDataItem(2, "category 1 sub 1", 1, "www.link2.com", "link 2"));
siteData.Add(new SiteDataItem(3, "category 1 sub 2", 1, "www.link3.com", "link 3"));
siteData.Add(new SiteDataItem(4, "category 1 sub 1 subsub 1", 2, "www.link4.com", "link 4"));
siteData.Add(new SiteDataItem(5, "category 1 sub 1 subsub 2", 2, "www.link5.com", "link 5"));
siteData.Add(new SiteDataItem(6, "category 1 sub 1 subsub 3", 2, "www.link6.com", "link 6"));
siteData.Add(new SiteDataItem(7, "category 1 sub 2 subsub 1", 3, "www.link7.com", "link 7"));
siteData.Add(new SiteDataItem(8, "category 1 sub 2 subsub 2", 3, "www.link8.com", "link 8"));
siteData.Add(new SiteDataItem(9, "category 1 sub 2 subsub 3", 3, "www.link9.com", "link 9"));
treeView.DataTextField = "LORLink";
treeView.DataFieldID = "ID";
treeView.DataFieldParentID = "ParentID";
treeView.DataSource = siteData;
treeView.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindToIEnumerable(RadTreeView1);
}
}