How to Create a Cart List using DataGrid for WinForms

Available in over 10 platforms (including Xamarin and Wijmo JavaScript) our ComponentOne FlexGrid .NET data grid offers a small footprint and an extensible API, while providing the same basic features in any device. Customers use FlexGrid for data presentation and manipulation; however, Flexgrid offers a host of other features.

Recently, we received an inquiry from a customer asking if they could create a cart list using a grid. With such a unique request, we wanted to share this process. This article demonstrates how to create a cart list using DataGrid for WinForms.

Cart lists

A cart list records and displays all of the items that a customer selects from an online store.

For the purpose of implementation, we'll divide the list into four main sections:

1. Title area
2. List of items
3. Subtotals and total
4. Payment option

Each section is represented with the help of a grid.

Create a cart list using a grid

First, in the title, we can see a purchase date and time along with a menu button “+”. When clicked, this button allows items to pop-up on a menu screen. To do this, we'll use the MouseDown event on the grid.

private void _gridTitle_MouseDown(object sender, MouseEventArgs e)
{
     HitTestInfo hti = _gridTitle.HitTest(e.Location);
     if (hti.Row == 0 && hti.Column == 2)
     {
           int min = _gridTitle.Cols[0].WidthDisplay + _gridTitle.Cols[1].WidthDisplay + _gridTitle.Cols[2].WidthDisplay - Image.FromFile(@"..\..\Resources\Img_Add.png").Width;
           int max = _gridTitle.Cols[0].WidthDisplay + _gridTitle.Cols[1].WidthDisplay + _gridTitle.Width - 2;
           if ((min < hti.X) && (max > hti.X))
           {
                 //Add Clicked
                 _frmMenu.Show();
                 _flag = true;
           }
     }
}

From the menu screen, the customer can select multiple items and add each of them to the cart.

The cart list section allows the customer to view all of the items added to the cart. In this list, the customer can also change units of each item. We need a dedicated separate integer type column that shows NumericUpDown control through OwnerDrawCell event of this second grid.

In the cart list section, you can to view the items that have been added to the cart. In this list, you can change units of each item. We've dedicated a separate integer type column that shows NumericUpDown control through OwnerDrawCell event of this second grid.

private void _gridItems_OwnerDrawCell(object sender, OwnerDrawCellEventArgs e)
{
    if(e.Col == 3 && (e.Row % 2 == 0))
    {
         var result = _gridItems.Controls.Find("NumUpDown" + e.Row.ToString(), false);
         if (result.Count() == 0)
         {
               NumericUpDown numUpDown = new NumericUpDown();
               numUpDown.Name = "NumUpDown" + e.Row.ToString();
               _gridItems.Controls.Add(numUpDown);
               numUpDown.Minimum = 1;
               numUpDown.Size = new Size(55, 47);
               numUpDown.Value = 1;
               numUpDown.Tag = e.Row;
               numUpDown.ValueChanged += NumUpDown_ValueChanged;

               _gridItems[e.Row, e.Col] = numUpDown.Value;

               Rectangle rc = _gridItems.GetCellRect(e.Row, e.Col, false);
               numUpDown.SetBounds(rc.X, rc.Y + 7, rc.Width, rc.Height);
          }
    }
    else if(e.Col == 0 && e.Row % 2 == 0)
    {
          _gridItems[e.Row, e.Col] = e.Row / 2 + 1;
    }
}

With each change in this grid, the subtotal is re-calculated in GridChanged.

private void _gridItems_GridChanged(object sender, GridChangedEventArgs e)
{
     // Update count of cart items in title section
     _gridTitle[1, 1] = "Cart (" + (_gridItems.Rows.Count / 2) + " items)";
     // Calculate subtotal for cart items
     double subtotal = 0;
     for (int r = 1; r < _gridItems.Rows.Count; r = r + 2)
     {
           subtotal += (Convert.ToDouble(_gridItems[r, 2]) * Convert.ToDouble(_gridItems[r - 1, 3]));
     }
     // Show this subtotal value in the third section, that is, Subtotal & total
     _gridTotals[0, 1] = subtotal;
}

In the third section, we'll update the discounted amount, tax amount, and total price. The new subtotal value can be captured in the CellChanged of third grid.

private void _gridTotals_CellChanged(object sender, RowColEventArgs e)
{
     //Subtotal changed
     if(e.Col == 1 && e.Row == 0)
     {
           double subtotal = Convert.ToDouble(_gridTotals[0, 1]);
           double tax = Math.Round((subtotal * 0.05));
           double discount = Math.Round(subtotal * 0.10);
           _gridTotals[1, 1] = discount;
           _gridTotals[2, 1] = tax;
           _gridTotals[3, 1] = subtotal + tax - discount;
     }
}

The last step is the payment option screen. This is a redirect to the payment gateway. Here we'll display an option in the grid cell to initiate the payment process. Next, we'll capture clicks on the cell in MouseDown event of the grid.

private void _gridButtons_MouseDown(object sender, MouseEventArgs e)
{
     int colButton = _gridButtons.HitTest(e.Location).Column;
     if (colButton == 3)
     {
           RedirectingForm frm = new RedirectingForm();
           frm.Show();
     }
}

Now the cart list is ready to use!

This article demonstrates Flexgrid's versatility, highlighting additional ways you can use data grids. Do you have a data grid question, suggestion, or challenge? Comment in the thread below and we'll create a demo based on your question or need!

Download a free trial of ComponentOne's Flexgrid