TreeViewItem Vertical Alignment Center Text

[Joel]

I have this definition for my treeview:

<script id="treeview-template" type="text/kendo-ui-template">
    #: item.text #
    # if (!item.items) { #
    <a class='delete-link' href='\#'></a>
    # } #
</script>

<div class="demo-section k-content">
    <h4>Recursive data</h4>
    @(
    Html.Kendo().TreeView()
        .TemplateId("treeview-template")
        .Name("treeview-right")
        .BindTo((IEnumerable<Item>)ViewBag.recursive, (NavigationBindingFactory<TreeViewItem> mappings) =>
        {
            mappings.For<Item>(binding => binding.ItemDataBound((item, group) =>
            {
                item.Text = group.Name;
                item.ImageUrl = group.ImageUrl;
            })
                .Children(group => group.Items));
        })
          )
</div>

 

I'm generally struggling with formatting.  How do I vertically center the item.Text so that the Text is not posted at the top of the image?  The image url is quite tall and it doesn't look right.  Also, how do I ensure that the text is not cut off when it is long.  I attached a picture.

[Joel]

The previous question still applies...I am adding further questions about formatting.  My tree definition has changed a little... but not much.

<div class="demo-section k-content">
    <h4>Recursive data</h4>
    @(
        Html.Kendo().TreeView()
            .Name("grouptreeview")
            .BindTo((IEnumerable<Group>)ViewBag.recursive, (NavigationBindingFactory<TreeViewItem> mappings) =>
            {
                mappings.For<Group>(binding => binding.ItemDataBound((item, group) =>
                {
                    item.Text = group.Name;
                    item.ImageUrl = group.ImageUrl;
                })
                    .Children(group => group.Children));
            })
    )
</div>

<style>


    .demo-section {
        display: inline-block;
        font-size: large;
        vertical-align: middle;
        text-align: left;
        margin: 0 2em;
    }



</style>

 

I am attaching a picture of my hierarchy to help frame this question.  For some reason, I have lost the expansion arrow in my TreeView and now have bullet points.  I don't know where or when this changed.  So, there is no visual indicator to tell me if that item has children. 

Secondly, I'm making a very "large" (image size) tree view and would like to style that arrow decorator to be comparatively large.  How do I change this format?

 

 

 

[Marin Bratanov]

Hi Joel,

To each question in turn.

First, vertical alignment of images and text - to get that you'd need to add a CSS rule that will align the image and the text as you prefer. Here's an example I made for you based on this demo and the provided code, and you can find attached below a screenshot of the expected results. I highlighted the changes. You can inspect the rendered HTML to see what styles are applied to the nodes in order to tweak them further so they match your needs. The following blog post can help you get started with that: https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools#see-the-applied-styles.

<script id="treeview-template" type="text/kendo-ui-template">
    #: item.text #
    # if (!item.items) { #
    <a class='delete-link' href='\#'></a>
    # } #
</script>

<style>
    .k-treeview.verticallyCenteredTreeViewItems img {
        vertical-align: middle;
    }
</style>

<div class="demo-section k-content">
    <h4>Inline data</h4>
    @(
        Html.Kendo().TreeView()
            .Name("treeview-right")
             .TemplateId("treeview-template")
             .HtmlAttributes(new { @class = "verticallyCenteredTreeViewItems" })
            .BindTo((IEnumerable<CategoryItem>)ViewBag.inline, (NavigationBindingFactory<TreeViewItem> mappings) =>
            {
                mappings.For<CategoryItem>(binding => binding.ItemDataBound((item, category) =>
                {
                    item.Text = category.CategoryName;
                    item.ImageUrl = Url.Content("~/shared/web/treeview/large-treeview-image.png");
                })
                    .Children(category => category.SubCategories));

                mappings.For<SubCategoryItem>(binding => binding.ItemDataBound((item, subCategory) =>
                {
                    item.Text = subCategory.SubCategoryName;
                    item.ImageUrl = Url.Content("~/shared/web/treeview/large-treeview-image.png");
                }));
        })
    )
</div>

On the missing arrow and increasing their size - the most likely reason for them to go missing is that something is wrong with the stylesheets loaded on the page. For example, not all Kendo stylesheets are properly loaded, or themes are mixed, or there is some rule(s) from the site stylesheet that break the kendo widget (e.g., element rules like ul { list-type: disc !important } that would affect many elements. You can inspect the rendered HTML to see where the rules come from and to compare it against our live demo to see what is the difference that breaks the arrows. With that approach you can also devise rules that will enlarge the arrows - they are font icons, so you only need to set dimensions and font size. Here's an example that modifies the snippet above and a screenshot of its effect is also attached below.

<style>
    .k-treeview.verticallyCenteredTreeViewItems img {
        vertical-align: middle;
    }

    .k-treeview.verticallyCenteredTreeViewItems span.k-icon {
        width: 40px;
    }

    .k-treeview.verticallyCenteredTreeViewItems span.k-icon::before{
        font-size: 40px;
    }
</style>

Regards,
Marin Bratanov
Progress Telerik

[Joel]

As I'm sure you're painfully aware, I am new to ASP.NET Core and general web page technologies.  I've been a developer for a long time and have been asked to go up this learning curve.  I appreciate you taking the time to step me through some of these things.  I am also heavily utilizing PluralSight and other training sources.

When I use Chrome's developer tools and look at the Styling I see nothing about Kendo.  When I do the same and with the Kendo.Mvc.Examples project almost all styling starts with Kendo.  I'm sure that it has to do with my startup scripts.  In my next post I will share my Shared._Layout and Shared_StylesScriptsPartial code in hope that you can give me some guidence as to what I've done wrong.  Thanks, Joel

 

[Marin Bratanov]

Hey Joel,

The learning curve may be a bit steep in the beginning but I'm sure you'll get the hang of it.

To get a better idea of what web assets the widgets require (ultimately, those are Kendo UI for jQuery widgets that get instantiated in the browser), I recommend you review the following resources

• get started with understanding how the underlying widgets work and what resources they need: https://docs.telerik.com/kendo-ui/intro/installation/getting-started
• details on what script files contain what, so you can know what you need to include (short version: kendo.all.min.js contains almost everything): https://docs.telerik.com/kendo-ui/intro/installation/what-you-need
• similar details for the stylesheets and themes: http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#getting-started
• how to do that in a Core app: https://docs.telerik.com/aspnet-core/getting-started/getting-started-copy-client-resources

So, it is possible that not all files you need are presently referenced in your layout (so they are not fetched in the browser) and that's why you don't see the same styles, rules and appearance you see in our demos app.

If anything is unclear on what you need to include in the layout and what scripts you need, I'd recommend you open up a new thread so we keep each one concise, in case someone else has a similar question in the future - that would spare them some wading through irrelevant information :)

Regards,
Marin Bratanov
Progress Telerik

[Joel]

I appreciate your help.  Thanks much.

[Joel]

I'm working through your referenced resources.  Questions:

For your first bullet point, you reference https://docs.telerik.com/kendo-ui/intro/installation/getting-started.  I have added the Kendo UI Core from Github.  The next line it says after you download the bundles that I should have a given list of folders.  However, that is not true.  Those folders aren't part of my solution and after searching the file system the folders do not exist.  Is there potentially something wrong with the Github download?  I have attached a picture of my nuget references.

 

[Marin Bratanov]

Hi Joel,

Let's keep threads concise. You can find more details on the necessary resources in your other threads: https://www.telerik.com/forums/asp-net-core-javascript and https://www.telerik.com/forums/asp-net-core-using-razor-pages. Said shortly, the NuGet package will get you the Kendo.Mvc.dll assembly, and then you need to either use the CDN to reference the needed assets in your layout, or include local files (for example, by adding them to your project with NPM). You do not need and should not use the Kendo UI Core GitHub repo for this, it is a limited subset of the Kendo widgets and so does not contain everything that you can access as a licensed user.

Regards,
Marin Bratanov
Progress Telerik