Customize image padding

[Jonas Züger]

Hi, 

I use a tree view with custom images. 

I was not able to figure out how I can change the padding of the images, as it's default value is too big.

The following code does not work, because it overrides the automated padding for child items too.

        .eimage {
            height: 25px;
            width: 25px;

            padding: 5px;
        }

How can I change the image padding? The vertical space between my rows is too big and that's because the image padding.

Cheers,

Jonas

[Piramanayagam Ramakrishnan]

Hi Jonas Züger, 

 

Thanks for contacting Syncfusion support. 

 

You can add the images in TreeView by using ImageUrl (which is the inner property of Fields property) or NodeTemplate property. If you want to add only images to TreeView node then, you can use ImageUrl property. If you want to customize the TreeView node with more than one attribute then, you can use NodeTemplate property. 

 

You can customize the images when you are using ImageUrl property. Please refer to below code example. 

 

[cshtml] 

 

@Html.EJS().TreeView("tree").Fields(ViewBag.iconFields).Render() 

 

[cs] 

 

TreeviewImageIcons treeviewIcon = new TreeviewImageIcons(); 

iconFields.DataSource = treeviewIcon.getTreeviewImageIconsModel(); 

iconFields.Id = "NodeId"; 

iconFields.Text = "NodeText"; 

iconFields.ImageUrl = "Image"; 

iconFields.Child = "NodeChild"; 

iconFields.Expanded = "Expanded"; 

ViewBag.iconFields = iconFields; 

 

[Style] 

 

/*TreeView image customization*/ 

.e-treeview .e-list-img { 

    width: 25px; 

    height: 25px; 

} 

 

  

You can also customize the TreeView node height and spacing as you like when you are using NodeTemplate property. Please refer to below example. 

 

[cshtml] 

 

@Html.EJS().TreeView("template").NodeTemplate("#treeTemplate").CssClass("custom").Fields(ViewBag.templatefields).Render() 

 

<script id="treeTemplate" type="text/x-template"> 

    <div> 

        <img class="eimage" src="Images/${EImg}.png" alt="${EImg}" /> 

        <div class="ename">${Name}</div> 

        <div class="ejob">${Job}</div> 

    </div> 

</script> 

 

[Style] 

 

/*TreeView template customization*/ 

 

/*Customize the height of TreeView node*/ 

.custom.e-treeview .e-fullrow { 

    height: 38px; 

} 

 

/*Customize the template image*/ 

.eimage { 

    float: left; 

    padding: 5px; 

    height: 25px; 

    width: 25px; 

    box-sizing: content-box; 

} 

 

 

For your reference, we have prepared a sample based on this and it can be downloaded from the below location: Sample 

 

Please let us know whether the provided sample is helpful in achieving your requirement. If not, revert with more information to proceed further. 

Regards,
Piramanayagam R