unable to get listviewitem to form properly

1 Answer 48 Views

ListView

Shuvrangshu asked on 31 Aug 2024, 05:50 AM | edited on 31 Aug 2024, 05:52 AM

Below is the code i am using for visualitemcreating, however the layout is not coming out proper, can anyone please help me with this.

When i run the code, i am getting the listview as which does not include the role and email details that should com in the second row.

Please help, i am unable to find what i am missing here.

Public Class CustomUserVisualItem
    Inherits SimpleListViewVisualItem
    Private Row1Element As LightVisualElement
    Private Row2RoleElement As LightVisualElement
    Private Row2EMailElement As LightVisualElement
    Private stackLayoutMain As StackLayoutPanel
    Private stackLayoutRow2 As StackLayoutPanel
    Protected Overrides Sub CreateChildElements()
        MyBase.CreateChildElements()
        Me.stackLayoutMain = New StackLayoutPanel()
        Me.stackLayoutMain.Orientation = Orientation.Vertical
        Me.stackLayoutMain.EqualChildrenWidth = True
        Me.stackLayoutMain.ShouldHandleMouseInput = False
        Me.stackLayoutMain.NotifyParentOnMouseInput = True
        Me.Children.Add(Me.stackLayoutMain)

        Me.Row1Element = New LightVisualElement()
        Me.Row1Element.StretchHorizontally = True
        Me.Row1Element.MinSize = New Size(120, 0)
        Me.Row1Element.ShouldHandleMouseInput = False
        Me.Row1Element.NotifyParentOnMouseInput = True
        Me.stackLayoutMain.Children.Add(Me.Row1Element)


        Me.stackLayoutRow2 = New StackLayoutPanel()
        Me.stackLayoutRow2.Orientation = Orientation.Horizontal
        Me.stackLayoutRow2.EqualChildrenWidth = True
        Me.stackLayoutRow2.ShouldHandleMouseInput = False
        Me.stackLayoutRow2.NotifyParentOnMouseInput = True
        Me.stackLayoutMain.Children.Add(Me.stackLayoutRow2)

        Me.Row2EMailElement = New LightVisualElement()
        Me.Row2EMailElement.Text = "Email"
        Me.Row2EMailElement.MinSize = New Size(60, 0)
        Me.Row2EMailElement.TextAlignment = ContentAlignment.MiddleLeft
        Me.Row2EMailElement.NotifyParentOnMouseInput = True
        Me.Row2EMailElement.ShouldHandleMouseInput = False
        Me.stackLayoutRow2.Children.Add(Me.Row2EMailElement)

        Me.Row2RoleElement = New LightVisualElement()
        Me.Row2RoleElement.Text = "Role"
        Me.Row2RoleElement.MinSize = New Size(60, 0)
        Me.Row2RoleElement.TextAlignment = ContentAlignment.MiddleRight
        Me.Row2RoleElement.NotifyParentOnMouseInput = True
        Me.Row2RoleElement.ShouldHandleMouseInput = False
        Me.stackLayoutRow2.Children.Add(Me.Row2RoleElement)


    End Sub
    Protected Overrides Sub SynchronizeProperties()
        MyBase.SynchronizeProperties()

        Dim product As UsersList = TryCast(Me.Data.Tag, UsersList)
        Dim color As String = ""

        If product.userstatus = "Active" Then
            color = "Green"
        Else
            color = "Red"
        End If

        Me.Text = ""
        Me.Row1Element.Text = "<html><span style=""color: " & color & "; font-size: 12pt;"">• </span> <span style=""font-size:12pt;"">" & product.firstName & " " & product.lastName & "</span>"
        Me.Row2RoleElement.Text = "<html><span style=""font-size:9pt;"">" & product.role & "</span>"
        Me.Row2EMailElement.Text = "<html><span style=""font-size:9pt;"">" & product.email & "</span>"
    End Sub
    Protected Overrides ReadOnly Property ThemeEffectiveType() As Type
        Get
            Return GetType(SimpleListViewVisualItem)
        End Get
    End Property
End Class

1 Answer, 1 is accepted

answered on 04 Sep 2024, 03:04 PM

Hello, Shuvrangshu,

Thank you for the provided code snippet for the CustomUserVisualItem. It seems ok to me. I used it in my sample project and actually I am able to see the second row with email and role. I populated the list view with dummy data. According to the picture you provided, I assume that you are using FluentDark theme, so I changed to it on my end as well. Can you please confirm this?

This is the result on my end:

Refering again to your picture, it seems to me that the default SimpleListViewVisualItem is used, not the custom one. Can you please check and make sure that you replace the default visual item with your CustomUserVisualItem in the VisualItemCreating event:

Private Sub RadListView1_VisualItemCreating(sender As Object, e As ListViewVisualItemCreatingEventArgs)
    If Me.RadListView1.ViewType = ListViewType.ListView Then
        e.VisualItem = New CustomUserVisualItem()
    End If
End Sub

I hope this information helps. If you have further difficulties, do not hesitate to contact me.

Regards,
Nadya | Tech Support Engineer
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.