4 icons/Images in 3rd level depth of tree

13 posts, 0 answers
  1. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 05 Jul Link to this post

    I have a treeview  that has text in 3 levels and on the third level/depth I want to show 4 clickable icons infront of said text, which link to a controler action that fetches an image with a certain id. that is all 4 icons/images have links with different id's

     

    What is the simplest way to do this ?

    Regards,

    Emil

  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 06 Jul Link to this post

    Hello,

    This is a simple sample in the dojo: http://dojo.telerik.com/@ruzhenov/OCOMO

    It uses jQuery in order to add 4 anchor elements before the text on the third level.
    On the prepneded element, you could choose what HTML to construct, that will best fit your scenario. This is just en example of a four elements with different ids and different icons.

    Regards,
    Bozhidar
    Telerik by Progress
    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 06 Jul in reply to Bozhidar Link to this post

    This is a very good answer, but.

    Im using a MVC view, with a bound model to display the treeview, so I would rather do this serverside if possible.

    I basicly have this code for each level of my tree, and then each node has a items list which are its children.

     

                        Kendo.Mvc.UI.TreeViewItemModel itm = new Kendo.Mvc.UI.TreeViewItemModel();
                        teljari = teljari + 1;
                        itm.Id = teljari.ToString();
                        itm.Text = innerItem.gotuheiti;
                        find = itm.Id;
                        itm.Items = new List<Kendo.Mvc.UI.TreeViewItemModel>();

    is there a way to add those icons at this stage, I could probably make some html to add in there, just not sure how/where to add it.

    Regards,

    Emil

  5. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 06 Jul Link to this post

    Hi,

    Here you could find what is supported on the server side by the control: http://docs.telerik.com/kendo-ui/api/aspnet-mvc/Kendo.Mvc.UI.Fluent/TreeViewItemBuilder

    I have tried to use something like:

    @(Html.Kendo().TreeView()
                  .Name("treeview") //The name of the treeview is mandatory. It specifies the "id" attribute of the widget.
                  .Items(items =>
                  {
                      items.Add().Text("Item 1").Content("<a href='#' id='id1'></a><a href='#' id='id2'></a><a href='#' id='id3'></a><a href='#' id='id4'></a>"); //Add item with text "Item1")
                      items.Add().Text("Item 2"); //Add item with text "Item2")
                  })
    )

    But it does not work as expected. So I would suggest to make on the client.

    Regards,
    Bozhidar
    Telerik by Progress
    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
  6. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 06 Jul in reply to Bozhidar Link to this post

    ok, if I do this in the client then I have to stop binding to the model and somehow populate the treeView in the client.

     

    Any suggestions ? I tried setting 

    dataSource: 
        Read(read => read.Action("Read", "Home"))

    but that doesnt work clientside.

     

    Regards,

    Emil

  7. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 07 Jul in reply to Emil Link to this post

    if I do

     

    <div class="demo-section k-content">
            @(Html.Kendo().TreeView()
                .Name("treeview")
                .BindTo((IEnumerable<Kendo.Mvc.UI.TreeViewItemModel>)Model)

    then I get the databinding server side 

    then I do what you suggested with 

    <script>
      $(document).ready(function(){
        $('#treeview ul ul ul .k-in').prepend('<a href="#" id="icon4" class="click-icon"></a>');
        $('#treeview ul ul ul .k-in').prepend('<a href="#" id="icon3" class="click-icon"></a>');
        $('#treeview ul ul ul .k-in').prepend('<a href="#" id="icon2" class="click-icon"></a>');
      $('#treeview ul ul ul .k-in').prepend('<a href="#" id="icon1" class="click-icon"></a>');

      });
    </script>

    then I get the icons correctly, but I need to get id's from the current item in the model, the view is bound to. that is the current item in the model has 4 id's one for each image I want to download on image click. I have a controller action that takes said Id and returns the image.

    this is the model binding in the view

    @model List<Kendo.Mvc.UI.TreeViewItemModel>

    so thats where Im kinda stuck right now.

    Regards,

    Emil

  8. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 07 Jul Link to this post

    Hello,

    You can check following resource: http://docs.telerik.com/kendo-ui/api/aspnet-mvc/Kendo.Mvc.UI.Fluent/TreeViewBuilder#methods-Template(System.String)

    I created a simple sample using the following code:

    @(Html.Kendo().TreeView()
                .Name("treeview") //The name of the treeview is mandatory. It specifies the "id" attribute of the widget.
                .Template("<span>#= item.Icon1 #</span>")
                .DataSource(dataSource => dataSource
                    .Model(model => model
                        // The property that uniquely identieis a node.
                        // The value of this property is the argument of the action method
                            .Id("ID")
                        // the boolean property that tells whether a node has children
                    )
                    .Read(read => read
                        // The action method which will return JSON
                        .Action("Employees_Read", "Home")
                    )
                )
    )


    and:

    using Kendo.Mvc.Extensions;
    using Kendo.Mvc.UI;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
     
    namespace MVC.Controllers
    {
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                ViewBag.Message = "Welcome to ASP.NET MVC!";
     
                return View();
            }
     
            public JsonResult Employees_Read()
            {
                var list = new List<Item>() {
                    new Item() { ID = 1, Content = "dasdas", Icon1 = "Icon1" },
                    new Item() { ID = 2, Content = "asdasd", Icon1 = "Icon12" }
                };
     
                return Json(list, JsonRequestBehavior.AllowGet);
            }
     
        }
     
        public class Item
        {
            public int ID { get; set; }
            public string Content { get; set; }
            public string Icon1 { get; set; }
        }

    Can you try to use a similar approach and if it does not work, please send us a runnable example with your code, so we will be able to test it on our side.

    Regards,
    Bozhidar
    Telerik by Progress
    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
  9. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 07 Jul in reply to Bozhidar Link to this post

    this sounds and feels like the right path for this.

    For it to work though I have to get more elaborate examples of templates since each row in my database table basicly consists of level1 text, level2 text, level 3  4 id's that are to be used with a controller action with id to fetch a download file(image) and level 3 text.

    is that suitable for a template ? only level 3 items cointain icons everything else is just text, those icons having href on them.

    Regards,

    Emil

     

  10. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 08 Jul Link to this post

    Hello,

    You can check the following resources about templates: http://docs.telerik.com/kendo-ui/framework/templates/overview

    The templates could be really complicated, so I think it should be possible to achieve your scenario.

    Regards,
    Bozhidar
    Telerik by Progress
    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
  11. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 08 Jul in reply to Bozhidar Link to this post

    do you have an example of how to create lets say a 3 level treeView with templates ?

    how would you go about doing each level ?

    these are basicly the texts to display for each level

    @Model.streetname

    @Mode.type 

    @Model.description

    are the levels just <ul></ul> ? or how does it work ?

    Regards,

    Emil

  12. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 11 Jul Link to this post

    Hello,

    We do not have an example about your case exactly, but you can check the following demo: http://demos.telerik.com/aspnet-mvc/treeview/templates and http://demos.telerik.com/aspnet-mvc/treeview/index

    Regards,
    Bozhidar
    Telerik by Progress
    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
  13. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 12 Jul in reply to Bozhidar Link to this post

    Yes these examples arent really helping. Do I use a template to do all the levels of the grid ? or do I bind to the model and just set the 4 images I need to set with a template ?

    if I use the template to do the whole thing how do I create html that conforms with the treeview control itself ?

    I can do either seperately, that is, bind to a model or insert images with links behind them, but I need those images to have id's from the model that is where it becomes complicated.

     

    Regards,

    Emil

  14. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 14 Jul Link to this post

    Hello,

    Here is a similar example, which gets data for the image form the server. Also the tree view is nested:

    <script id="treeview-template" type="text/kendo-ui-template">
        #: item.text #
        # if (item.iconUrl) { #
        <img src="#=item.iconUrl#" id="#=item.id#" />
        # } #
    </script>
    <div class="demo-section k-content">
        @(Html.Kendo().TreeView()
            .Name("treeview")
            .TemplateId("treeview-template")
            .DataSource(source =>
            {
                source.Read(read => read.Action("Read_TemplateData", "Home"));
            })
        )
    </div>

    using Kendo.Mvc.Extensions;
    using Kendo.Mvc.UI;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
     
    namespace MVC.Controllers
    {
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                ViewBag.Message = "Welcome to ASP.NET MVC!";
     
                return View();
            }
     
            public ActionResult Read_TemplateData(string id)
            {
                IEnumerable<TreeViewItemViewModel> result;
                if (string.IsNullOrEmpty(id))
                {
                    result = TreeViewRepository.GetProjectData().Select(o => o.Clone());
                }
                else
                {
                    result = TreeViewRepository.GetChildren(id);
                }
     
                return Json(result, JsonRequestBehavior.AllowGet);
            }
     
        }
     
        public class Item
        {
            public int ID { get; set; }
            public string Content { get; set; }
            public string Icon1 { get; set; }
        }
     
        public class TreeViewItemViewModel
        {
            public string id { get; set; }
            public string text { get; set; }
            public string spriteCssClass { get; set; }
            public string iconUrl { get; set; }
            public bool expanded { get; set; }
            public bool hasChildren { get; set; }
            public IEnumerable<TreeViewItemViewModel> items { get; set; }
     
            public TreeViewItemViewModel Clone()
            {
                TreeViewItemViewModel clone = new TreeViewItemViewModel
                {
                    id = this.id,
                    iconUrl = this.iconUrl,
                    spriteCssClass = this.spriteCssClass,
                    text = this.text,
                    expanded = this.expanded,
                    hasChildren = this.hasChildren
                };
                return clone;
            }
        }
     
        public static class TreeViewRepository
        {
            private static List<TreeViewItemViewModel> projectData;
     
            static TreeViewRepository()
            {
                projectData = new List<TreeViewItemViewModel>();
                projectData.Add(new TreeViewItemViewModel
                {
                    id = "1",
                    text = "My Documents",
                    iconUrl = "../Images/bullet.png",//D:\work\MVC-Test\MVC\MVC\
                    expanded = true,
                    hasChildren = true,
                    spriteCssClass = "rootfolder",
                    items = new List<TreeViewItemViewModel>
                           {
                               new TreeViewItemViewModel
                               {
                                    id = "2",
                                    text = "Kendo UI Project",
                                    expanded  = true,
                                    spriteCssClass = "folder",
                                    hasChildren = true,
                                    items = new List<TreeViewItemViewModel>
                                    {
                                        new TreeViewItemViewModel
                                        {
                                                id = "3",
                                                text ="about.html",
                                                spriteCssClass = "html"                                              
                                        },
                                        new TreeViewItemViewModel
                                        {
                                                id = "4",
                                                text ="index.html",
                                                spriteCssClass = "html"                                              
                                        },
                                        new TreeViewItemViewModel
                                        {
                                                id = "5",
                                                text ="logo.png",
                                                spriteCssClass = "image"                                              
                                        }
                                    }
                               },
                               new TreeViewItemViewModel
                               {
                                    id = "6",
                                    text = "New Web Site",
                                    expanded  = true,
                                    spriteCssClass = "folder",
                                    hasChildren = true,
                                    items = new List<TreeViewItemViewModel>
                                    {
                                        new TreeViewItemViewModel
                                        {
                                                id = "7",
                                                text ="mockup.jpg",
                                                spriteCssClass = "image"                                              
                                        },
                                        new TreeViewItemViewModel
                                        {
                                                id = "8",
                                                text ="Research.pdf",
                                                spriteCssClass = "pdf"                                              
                                        }
                                    }
                               },
                               new TreeViewItemViewModel
                               {
                                    id = "9",
                                    text = "Reports",
                                    expanded  = true,
                                    spriteCssClass = "folder",
                                    hasChildren = true,
                                    items = new List<TreeViewItemViewModel>
                                    {
                                        new TreeViewItemViewModel
                                        {
                                                id = "10",
                                                text ="February.pdf",
                                                spriteCssClass = "pdf"                                              
                                        },
                                        new TreeViewItemViewModel
                                        {
                                                id = "11",
                                                text ="March.pdf",
                                                spriteCssClass = "pdf"                                              
                                        },
                                            new TreeViewItemViewModel
                                        {
                                                id = "12",
                                                text ="April.pdf",
                                                spriteCssClass = "pdf"                                              
                                        }
                                    }
                               }
                           }
                });
     
            }
     
            public static List<TreeViewItemViewModel> GetProjectData()
            {
                return projectData;
            }
     
            public static IEnumerable<TreeViewItemViewModel> GetChildren(string id)
            {
                Queue<TreeViewItemViewModel> items = new Queue<TreeViewItemViewModel>(projectData);
     
                while (items.Count > 0)
                {
                    var current = items.Dequeue();
                    if (current.id == id)
                    {
                        return current.items.Select(o => new TreeViewItemViewModel
                        {
                            id = o.id,
                            text = o.text,
                            expanded = o.expanded,
                            hasChildren = o.hasChildren,
                            iconUrl = o.iconUrl,
                            spriteCssClass = o.spriteCssClass
                        });
                    }
     
                    if (current.hasChildren)
                    {
                        foreach (var item in current.items)
                        {
                            items.Enqueue(item);
                        }
                    }
                }
     
                return new List<TreeViewItemViewModel>();
            }
        }
     
    }

    I hope this is the case that you want to cover. If it is not, try to rework the example in a way to shows us what you want to achieve.

    Regards,
    Bozhidar
    Telerik by Progress
    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready