Custom button in 4th column

[Jason]

I want to do something similar (I think) to this:
http://www.telerik.com/help/winforms/listview-custom-items.html 

What I want to do is this: I have a RadListView control with 4 columns in a ViewType of DetailsView. The first 3 columns will just display some text in each cell/row, but the 4th cell in each row I want to have a "Remove" button to remove it from the list. So what I need to be able to do is:

Create a Button element to serve as the value for the 4th cell in each row

and

Be able to define and handle the click event for that button (will need some way to identify the row that the button was clicked for as well)

The code I have right now (created based on the example) just displays the button in the first column and none of the text for the first 3 columns seems to get created/inserted.

public class ListViewItemButton : SimpleListViewVisualItem
    {
        private RadButtonElement buttonElement;
        private LightVisualElement contentElement;
        private StackLayoutPanel stackLayout;

        protected override void CreateChildElements()
        {
            base.CreateChildElements();

            this.stackLayout = new StackLayoutPanel();
            this.stackLayout.Orientation = Orientation.Horizontal;
            this.stackLayout.EqualChildrenWidth = true;

            this.contentElement = new LightVisualElement();
            this.contentElement.StretchHorizontally = true;
            this.contentElement.MinSize = new Size(60, 0);

            this.stackLayout.Children.Add(this.contentElement);

            this.buttonElement = new RadButtonElement();
            this.buttonElement.Text = "Remove ";
            this.stackLayout.Children.Add(this.buttonElement);

            this.Children.Add(this.stackLayout);

        }

        protected override void SynchronizeProperties()
        {
            base.SynchronizeProperties();

            this.Text = "";
            this.buttonElement.Text = "Remove ";
        }

        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(SimpleListViewVisualItem);
            }
        }
    }
}

and my handler...

private void HandleRadListViewVisualItemCreating(object sender, ListViewVisualItemCreatingEventArgs e)
        {
                    e.VisualItem = new ListViewItemButton();
        }

I don't know how to tell it to only make the VisualItem be the button for the 4th column, not all of them.

Thanks,
--Jason

[Ivan Todorov]

Hello Jason,

Thank you for contacting us.

The example in our online documentation uses the ListView view type and the SimpleListViewVisualItem should only be used in that view mode. In the case of DetailsView, it would be more convenient to create a custom cell element and replace the cells only in that specific column. I am attaching a small sample project which demonstrates this. I hope you find it useful.

Should you have any further questions, do not hesitate to ask.

All the best,
Ivan Todorov
the Telerik team

[Jason]

Thank you very much Ivan - this is exactly what I was looking for.

Regards,
--Jason

[Jason]

I have one more question about the code sample provided.

If I am in the CellCreating event handler and want to know what text has been added in the 3rd column for the current row - how would I get that value? Should I be trying to check that value in the CellCreating event or should I be checking that value in the CreateChildElements() method of the ButtonCellElement (inheriting from DetailListViewDataCellElement) ?

Thanks,
--Jason

[Ivan Todorov]

Hello Jason,

The proper way to get and use the cell value is in the Synchronize method. Because of the virtualization mechanism of RadListView, the same cell might be reused in different rows/columns and the CellCreating event stand only for creating the instance of the cell. The Synchronize method is called whenever an update is needed (upon Attach or PropertyChange) and you can rely on retrieving the correct data in it. I am attaching the modified sample project to demonstrate this. Note that I have also added an override of the IsCompatible method and another dummy cell class. This is needed because the virtualization mechanism reuses the cells and checks their compatibility and you might get "jumping" cells when scrolling horizontally.

In case you want to create different types of cells for the different rows, you can check the RowElement or Row properties of the cell in the CellCreating event:

((DetailListViewDataCellElement)e.CellElement).RowElement

Feel free to ask if you have any further questions.

Greetings,
Ivan Todorov
the Telerik team

[Jason]

Thank you this has been some great help.

I have one last issue I'm hoping you can help me with.

With the buttons I've added to the RadListView, the click event of the buttons does not fire unless the row they are in already has focus. Otherwise, I click the button and the row it is in gets selected, then I have to click it again for the button's click event to execute. This is not a problem in the sample code you provided so I looked at all of the property values on the RadListView in your sample and compared it to mine and the properties are identical. Any ideas?

Thanks,
--Jason

[Ivan Todorov]

Hello Jason,

I am not sure what is the reason for this behavior in your project. It can be other control capturing the mouse for a while (please check for any .Capture = true settings) or something related to focus changes. This might also happen if you have set the ShouldHandleMouseInput property of the button to false.

If you are not able to identify the cause, please open a new support ticket and send me a project which demonstrates this behavior. This will let me investigate it and provide you with further support.

Feel free to contact us if you need further assistance.

Greetings,
Ivan Todorov
the Telerik team