Thank you for your reply :)
So since I still want to have icons in my treeView, I came up with this code below, BUT I still can't get the icon displayed and the navigateUrl is also not working... could there be anything that I am missing?
NB: The 'mailicons.png' and other images are located in the same directory as the default.aspx file (for convenience' sake)
Visual Basic: (see highlighted code)
Private Sub LoadTreeView()
treeData.Add(New LoadData With {.MenuNo = 1, .ParentId = 0, .Description = "Operator: ADMIN", .MenuModule = "", .MenuProgram = "", .SpriteCssClass = "mailicon sprite-folder", .Expanded = True})
treeData.Add(New LoadData With {.MenuNo = 2, .ParentId = 1, .Description = "Manager Self Service", .MenuModule = "", .MenuProgram = "", .navigateUrl = "", .SpriteCssClass = "", .Expanded = False})
treeData.Add(New LoadData With {.MenuNo = 3, .ParentId = 1, .Description = "Employee Self Service", .MenuModule = "", .MenuProgram = "", .navigateUrl = "", .SpriteCssClass = "", .Expanded = False})
treeData.Add(New LoadData With {.MenuNo = 4, .ParentId = 2, .Description = "Human Reasources", .MenuModule = "", .MenuProgram = "", .navigateUrl = "", .SpriteCssClass = "", .Expanded = False})
treeData.Add(New LoadData With {.MenuNo = 5, .ParentId = 4, .Description = "Leave Management", .MenuModule = "", .MenuProgram = "", .navigateUrl = "", .SpriteCssClass = "", .Expanded = False})
treeData.Add(New LoadData With {.MenuNo = 6, .ParentId = 5, .Description = "Leave Mgt", .MenuModule = "", .MenuProgram = "", .navigateUrl = "https://www.google.com", .SpriteCssClass = "mailicon sprite-folder", .Expanded = False})
treeData.Add(New LoadData With {.MenuNo = 7, .ParentId = 2, .Description = "Payroll", .MenuModule = "", .MenuProgram = "", .navigateUrl = "", .SpriteCssClass = "", .Expanded = False})
treeData.Add(New LoadData With {.MenuNo = 8, .ParentId = 7, .Description = "Utilities", .MenuModule = "", .MenuProgram = "", .navigateUrl = "", .SpriteCssClass = "", .Expanded = False})
treeData.Add(New LoadData With {.MenuNo = 9, .ParentId = 8, .Description = "Transaction Utilities", .MenuModule = "", .MenuProgram = "", .navigateUrl = "", .SpriteCssClass = "", .Expanded = False})
treeData.Add(New LoadData With {.MenuNo = 10, .ParentId = 8, .Description = "Loan Utilities", .MenuModule = "", .MenuProgram = "PYLOAN_UTILITY", .navigateUrl = "", .SpriteCssClass = "", .Expanded = False})
Me.treeview.DataSource = treeData
End Sub
Public Class LoadData
Public Property MenuNo As String
Public Property ParentId As String
Public Property Description As String
Public Property MenuModule As String
Public Property MenuProgram As String
Public Property navigateUrl As String
Public Property SpriteCssClass As String
Public Property Expanded As Boolean
End Class
default.aspx:
<ej:TreeView Font-Size="10px"
ID="treeview"
runat="server"
DataTextField="Description"
DataIdField="MenuNo"
DataParentIdField="ParentId"
DataSpriteCssField="SpriteCssClass"
DataExpandedField="Expanded">
</ej:TreeView>
CSS:
<style>
.darktheme .cols-sample-area .mailicon, .darktheme .cols-sample-area .e-node-hover .mailicon, .darktheme .cols-sample-area .e-node-focus.e-active .mailicon {
background-image: url("mailicons.png");
}
.cols-sample-area .e-active .mailicon {
background-image: url("mailicons.png");
}
.cols-sample-area .mailicon, .cols-sample-area .e-editable .mailicon, .cols-sample-area .e-node-hover .mailicon, .cols-sample-area .e-node-focus.e-active .mailicon {
background-image: url("mailicons.png");
}
.material .cols-sample-area .mailicon, .material .cols-sample-area .e-editable .mailicon, .material .cols-sample-area .e-node-hover .mailicon, .material .cols-sample-area .e-node-focus.e-active .mailicon {
background-image: url("mailicons.png");
}
.office-365 .cols-sample-area .e-active .mailicon {
background-image: url("mailicons.png");
}
.mailicon {
display: inline-block;
overflow: hidden;
background-repeat: no-repeat;
text-align: center;
vertical-align: middle;
width: 20px;
height: 18px;
}
.sprite-calendar {
background-position: -25px -255px;
}
.sprite-contacts {
background-position: -26px -429px;
}
.sprite-deleted {
background-position: -24px -152px;
}
.sprite-drafts {
background-position: -24px -83px;
}
.sprite-folder {
background-position: -24px -464px;
}
.sprite-folders {
background-position: -24px -222px;
}
.sprite-inbox {
background-position: -25px -13px;
}
.sprite-junk {
background-position: -23px -187px;
}
.sprite-notes {
background-position: -26px -394px;
}
.sprite-outbox {
background-position: 0 -414px;
width: 16px;
height: 16px;
}
.sprite-root {
background-position: -25px -49px;
}
.sprite-sentitems {
background-position: -26px -118px;
}
</style>
