Toggle State in Listview with Keyboard Input

[Mike]

Hello,

I'm having an issue incorporating a RadToggleSwitchElement into a SimpleListViewVisualItem I'm using in a RadListView.  I incorporated it a while ago, and thought it was working as expected.

During testing, I noticed some odd behavior when I scroll up and down with the keyboard and not the mouse.  If a RadToggleSwitchElement as been set to off and I scroll up and down with the keyboard, the switch state turns on and off as well the moment I change direction (up to down or visa versa).  Oddly, I don't have to be iterating over that index alone but any index up/down will make it toggle.  Also, switches from other indexes in the list that I have not touched are toggled on/off as well as I scroll further down the list.  I'm assuming this has something to do with component re-use.

In order to test and make sure it's not behavior I've programmed into the code somehow, I've created a separate little project that does nothing but add a list and a very simple SimpleListViewVisualItem class containing the RadToggleSwitchElement in a StackLayoutPanel.  I stripped any code that should tell the control which state to be in, as well as any other components I have in the listview control as well. 

This class has exactly the same problem I am having in my solution which makes me think it's not something that I am doing.  If I change the ListView selection via mouse click after setting a toggle to Off state there is no problem.  If I toggle to Off and then use the keyboard keys to go up/down through the list, the toggle state is changed on/off repeatedly as I change from Up/Down or Down/Up.  It seems that the moment I click with the mouse, this problem goes away entirely.

class Toggle_Test_Class : SimpleListViewVisualItem
    {
        private StackLayoutPanel StackLayout_Horizontal;
        public RadToggleSwitchElement IR_Switch;
        bool disposed = false;

        protected override void CreateChildElements()
        {
            base.CreateChildElements();
            this.BackColor = Color.Black;

            this.StackLayout_Horizontal = new StackLayoutPanel()
            {
                Orientation = Orientation.Horizontal,
                EqualChildrenWidth = true,
                ShouldHandleMouseInput = false,
                NotifyParentOnMouseInput = true,
            };

            this.IR_Switch = new RadToggleSwitchElement()
            {
                MaxSize = new Size(150, 40),
                OnText = "Color",
                OffText = "IR",
            };

            this.StackLayout_Horizontal.Children.Add(this.IR_Switch);

            this.Children.Add(StackLayout_Horizontal);
        }

        protected override void SynchronizeProperties()
        {
            this.BackColor = Color.Black;
            base.SynchronizeProperties();
        }

        protected override Type ThemeEffectiveType => typeof(SimpleListViewVisualItem);

        //Dispose items 
        public new void Dispose()
        {
            Dispose(true);
            GC.SuppressFinalize(this);
        }

        // Protected implementation of Dispose pattern.
        protected new virtual void Dispose(bool disposing)
        {
            if (disposed)
                return;

            if (disposing)
            {
                StackLayout_Horizontal.Dispose();
                IR_Switch.Dispose();
            }

            disposed = true;
        }
    }   

Please let me know I am overlooking a setting or there is some other solution to this problem.

Thanks!

[Dess | Tech Support Engineer, Principal]

Hello, Mike,   

Following the provided code snippet, I have created a sample project on my end to test the exact behavior that you are facing. Note that due to the UI virtualization visual elements are created only for the currently visible items and they are being reused during operations like scrolling. The SynchronizeProperties method of the custom SimpleListViewVisualItem is the appropriate place to set the toggle state of the RadToggleSwitchElement considering the respective value from the associated data item. This logic should be added to the custom implementation that you have.

Please refer to the following help article which demonstrates how to create custom visual items. In the SynchronizeProperties methods all internal elements extract the necessary information from the data item in order to display the relevant information: https://docs.telerik.com/devtools/winforms/controls/listview/custom-items

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik