Need help on bringing up the data driven format below.

1 Answer 21 Views
DataForm
spandana
Top achievements
Rank 1
spandana asked on 24 Nov 2021, 05:40 PM

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

Sort by
0
Vessy
Telerik team
answered on 25 Nov 2021, 10:04 AM

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.

spandana
Top achievements
Rank 1
commented on 29 Nov 2021, 02:31 PM | edited

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! 

 

Vessy
Telerik team
commented on 02 Dec 2021, 09:58 AM

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);
        }
    }

 

Tags
DataForm
Asked by
spandana
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or