Icons View: Buttons

[Jay]

I'm open to any idea besides using a ListView for this.  (I've thought of using a flow layout panel and RadButton as one alternative.)

In my project where we are picking items for customer orders a "License Plate" is a number that uniquely identifies the box that we are using to put the items that we pick for the order.  There are normally three license plates per order and there could be a few more added as we pick.  The user would like to see all of the license plates in a horizontal row (scrolling won't be a problem) and have the person click one of them to assign whatever quantity of an item to that box.  (That is as simple as a button or something that looks like a button with the license plate number for its text.)

So, if a ListView is a good idea here, I'm trying to use one in IconsView mode to take advantage of the horizontal orientation.  I did this so far...

lvLicensePlates.ViewType = ListViewType.IconsView;
lvLicensePlates.AllowArbitraryItemWidth = true;
lvLicensePlates.AllowArbitraryItemHeight = true;
lvLicensePlates.AllowEdit = false;
lvLicensePlates.AllowRemove = false;
lvLicensePlates.SelectLastAddedItem = false;
lvLicensePlates.ListViewElement.ViewElement.Orientation = Orientation.Horizontal;
lvLicensePlates.ListViewElement.ViewElement.ItemSpacing = 20;

 

I would like to give the items more of the RadButton appearance.  I started experimenting with VisualItemFormatting...

private void LvLicensePlates_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
{
    e.VisualItem.BorderBoxStyle = BorderBoxStyle.SingleBorder;
    e.VisualItem.DrawBorder = true;

}

but that hasn't produced a border for me.

If you could first tell me if a different control would be a better choice and, if not, can you help me make the item look like a RadButton (or better, since I suspect that you have better ideas than I would).

 

Thank you,

Gary

 

[Hristo]

Hello Gary,

Thank you for writing.

The described scenario suggests that you would like to have several buttons arranged horizontally. If that is really the case I think that RadGridView and its GridViewCommandColumn could fit your scenario. You can have the grid built only with command columns, if necessary you can also easily add new rows to it: GridViewCommandColumn.

Can you please try this suggestion and let me know how it works for your actual project?

I hope this helps. Please let me know if yo need further assistance.

Regards,
Hristo
Telerik by Progress

[Jay]

Thank you, Hristo,

That's an interesting idea.  I have a question about some details that I'll have to resolve but first let me explain it by showing what I did with the ListView so far.  

The user wants the button text to show both the license plate number and the weight that has been picked for that license plate.  I got into the VisualItemFormatting event to deal with that.

private void LvLicensePlates_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
{
    e.VisualItem.BorderBoxStyle = BorderBoxStyle.SingleBorder;
    e.VisualItem.DrawBorder = true;
    e.VisualItem.BackColor = Color.CornflowerBlue;
    DataRow x = ((DataRowView)e.VisualItem.Data.DataBoundItem).Row;
    decimal weightPicked = Convert.ToDecimal(x["TotalWeightPicked"]);

    e.VisualItem.Text = string.Format("{0}{2}Weight: {1:0.00}", x["LicensePlate"].ToString(), weightPicked, Environment.NewLine);
    if (weightPicked > 0)
        e.VisualItem.BackColor = Color.LightCoral;

}

 

Notice also that the color of each item reflects whether the weight is greater than zero.  With those properties it is easy to distinguish which items have a positive weight and which item was the last item the user clicked.  I'll want to accomplish both the text and visual effects (color and clicked) with the (CommandColumn) cells in the RadGridView.  Can you recommend the event to manage that?

 

With the ListView I tried to use the Click event to trigger an action (picking items into the license plate) for the item that I click.  I have a number pad where I click buttons to enter the quantity and then immediately click one of the items in the ListView to select the license plate to complete the physical picking action.  The only problem so far is that on that first click in the ListView, the item I click is not selected.  How do I make the first click in the ListView actually select the item that I clicked?

 

Thank you,

Gary

[Hristo]

Hi Gary,

Thank you for writing back.

Similarly like in RadListView one needs to handle a formatting event in order to change the appearance of the cells in RadGridView: Formatting Cells. Please note that any colors set to the cells and its elements will override the default theme settings and you will lose the styles for the various element states, e.g. "MouseOver", "Pressed", etc. In order to handle this, you may want to use our API for overriding the theme settings at run-time. Alternatively, you may consider changing your theme. The following documentation articles provide additional information: Override Theme Settings at Run Time, Visual Style Builder.

I am sending you attached my test project in which I have setup the grid with command columns and I am overriding the theme setting in the CellFormatting event. In this event, you would also be able to change the text of the button element if you need to. I am also sending you a short video showing the result on my end.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik by Progress

[Jay]

In VisualItemFormatting (or elsewhere), how do you set the border width for the items when the ViewType is IconsView?

[Hristo]

Hi Gary,

Thank you for writing back.

You can handle the VisualItemFormatting event and set the BorderWidth and BoderColor properties of the item. Please bear in mind that the control is virtualized and you need to reset the styles set in a formatting event: 

private void radListView1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
{
    if (e.VisualItem.Text == "1")
    {
        e.VisualItem.BorderWidth = 3;
        e.VisualItem.BorderColor = Color.LightCoral;
    }
    else
    {
        e.VisualItem.ResetValue(LightVisualElement.BorderWidthProperty, ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.BorderColorProperty, ValueResetFlags.Local);
    }
}

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik by Progress