GridPicker

Description

The GridPicker component creates an interactive grid of buttons, where each cell can have multiple states. It is used for building grid-based state selectors and pickers, such as scheduling interfaces or game boards. The component is part of the Tesserae UI Components group and leverages a fluent interface to configure button appearance and behavior based on the state.

Usage

Create a GridPicker instance by providing arrays of column and row names, the number of states each cell can have, an initial state for every cell, and a function to format each button based on its state. Optionally, you can provide custom column sizes and row heights.

Below is a simple usage example:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new SampleGridPickerUsage();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class SampleGridPickerUsage : IComponent
    {
        public HTMLElement Render()
        {
            // Define column and row headers.
            var columns = new[] { "Mon", "Tue", "Wed", "Thu", "Fri" };
            var rows = new[] { "Morning", "Afternoon", "Evening" };

            // Create initial states (all zeros) for each cell in the grid.
            var initialStates = Enumerable.Range(0, rows.Length)
                                          .Select(_ => new int[columns.Length])
                                          .ToArray();

            // Define how each state should be formatted. In this example, we show an emoji.
            Action<Button, int, int> formatState = (btn, state, previousState) =>
            {
                string text;
                switch (state)
                {
                    case 0: text = "Off"; break;
                    case 1: text = "On";  break;
                    default: text = "?";  break;
                }
                btn.SetText(text);
            };

            // Instantiate the GridPicker.
            var gridPicker = GridPicker(
                columnNames: columns,
                rowNames: rows,
                states: 2,
                initialStates: initialStates,
                formatState: formatState
            );

            return gridPicker.Render();
        }
    }
}

Methods

GetState()

• Description: Retrieves the current state of all grid cells.
• Return Type: int[][] – A two-dimensional array where each element represents the state of a corresponding grid cell.
• Usage Example:
  Live PreviewCode

  grid-picker-2-sample.js

  using System;
  using System.Linq;
  using System.Threading.Tasks;
  using H5.Core;
  using Tesserae;
  using static H5.Core.dom;
  using static Tesserae.UI;
  
  namespace Tesserae.Tests
  {
      internal static class App
      {
          private static void Main()
          {
              var sample = new GridPickerGetStateSample();
              document.body.style.overflow = "hidden";
              MountCenteredToBody(sample);
          }
      }
  
      public class GridPickerGetStateSample : IComponent
      {
          public HTMLElement Render()
          {
              var columns = new[] { "A", "B", "C" };
              var rows = new[] { "Row 1", "Row 2" };
              var initialStates = new[]
              {
                  new[] { 0, 1, 0 },
                  new[] { 1, 0, 1 }
              };
  
              var gridPicker = GridPicker(
                  columnNames: columns,
                  rowNames: rows,
                  states: 2,
                  initialStates: initialStates,
                  formatState: (btn, state, prev) => btn.SetText(state == 1 ? "✔" : "·"));
  
              var output = TextBlock("Click 'Read state' to dump the current grid state.");
  
              return Stack().Children(
                  gridPicker,
                  Button("Read state").OnClick((s, e) =>
                  {
                      int[][] currentStates = gridPicker.GetState();
                      var flat = string.Join(" ", currentStates.SelectMany(r => r));
                      output.Text(flat);
                  }),
                  output
              ).Render();
          }
      }
  }
  

SetState(int[][] state)

• Parameters:
  • state: A two-dimensional integer array representing the new state for all cells.
• Description: Updates the grid with new states and refreshes the UI accordingly.
• Return Type: GridPicker – Returns the current instance for chaining.
• Usage Example:
  Live PreviewCode

  grid-picker-3-sample.js

  using System;
  using System.Threading.Tasks;
  using H5.Core;
  using Tesserae;
  using static H5.Core.dom;
  using static Tesserae.UI;
  
  namespace Tesserae.Tests
  {
      internal static class App
      {
          private static void Main()
          {
              var sample = new GridPickerSetStateSample();
              document.body.style.overflow = "hidden";
              MountCenteredToBody(sample);
          }
      }
  
      public class GridPickerSetStateSample : IComponent
      {
          public HTMLElement Render()
          {
              var columns = new[] { "A", "B", "C" };
              var rows = new[] { "Row 1", "Row 2" };
              var initial = new[]
              {
                  new[] { 0, 0, 0 },
                  new[] { 0, 0, 0 }
              };
  
              var gridPicker = GridPicker(
                  columnNames: columns,
                  rowNames: rows,
                  states: 2,
                  initialStates: initial,
                  formatState: (btn, state, prev) => btn.SetText(state == 1 ? "✔" : "·"));
  
              return Stack().Children(
                  gridPicker,
                  Button("Fill alternating").OnClick((s, e) =>
                  {
                      var newStates = new[]
                      {
                          new[] { 1, 0, 1 },
                          new[] { 0, 1, 0 }
                      };
                      gridPicker.SetState(newStates);
                  })
              ).Render();
          }
      }
  }
  

OnChange(ComponentEventHandler<GridPicker, Event> onChange)

• Parameters:
  • onChange: A callback that is invoked when any cell state changes.
• Description: Registers an event handler for change events occurring in the grid.
• Return Type: GridPicker – Returns the current instance for chaining.
• Usage Example:
  Live PreviewCode

  grid-picker-4-sample.js

  using System;
  using System.Threading.Tasks;
  using H5.Core;
  using Tesserae;
  using static H5.Core.dom;
  using static Tesserae.UI;
  
  namespace Tesserae.Tests
  {
      internal static class App
      {
          private static void Main()
          {
              var sample = new GridPickerOnChangeSample();
              document.body.style.overflow = "hidden";
              MountCenteredToBody(sample);
          }
      }
  
      public class GridPickerOnChangeSample : IComponent
      {
          public HTMLElement Render()
          {
              var columns = new[] { "Mon", "Tue", "Wed" };
              var rows = new[] { "AM", "PM" };
              var initial = new[]
              {
                  new[] { 0, 0, 0 },
                  new[] { 0, 0, 0 }
              };
  
              var changes = TextBlock("Click any cell to see the change event fire.");
  
              var gridPicker = GridPicker(
                  columnNames: columns,
                  rowNames: rows,
                  states: 2,
                  initialStates: initial,
                  formatState: (btn, state, prev) => btn.SetText(state == 1 ? "✔" : "·"));
  
              gridPicker.OnChange((picker, ev) =>
              {
                  changes.Text("Grid state changed.");
              });
  
              return Stack().Children(gridPicker, changes).Render();
          }
      }
  }
  

Properties

IsDragging

• Type: bool (read-only)
• Description: Indicates whether a drag operation is currently in progress on the grid. When true, a batch update is in progress for a group of cells.

Samples

Basic GridPicker Example

The following sample demonstrates how to instantiate a simple GridPicker with two states. Each cell displays different text based on its current state.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new BasicGridPickerExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class BasicGridPickerExample : IComponent
    {
        public HTMLElement Render()
        {
            var columns = new[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" };
            var rows = new[] { "Morning", "Afternoon", "Evening" };

            var initialStates = Enumerable.Range(0, rows.Length)
                                          .Select(_ => new int[columns.Length])
                                          .ToArray();

            Action<Button, int, int> formatState = (btn, state, previousState) =>
            {
                string text;
                switch (state)
                {
                    case 0: text = "☠"; break;
                    case 1: text = "🐢"; break;
                    default: text = "??"; break;
                }

                // Display transition if previous state is provided
                if (previousState >= 0 && previousState != state)
                {
                    string prevText;
                    switch (previousState)
                    {
                        case 0: prevText = "☠"; break;
                        case 1: prevText = "🐢"; break;
                        default: prevText = "??"; break;
                    }
                    text = $"{prevText} -> {text}";
                }
                btn.SetText(text);
            };

            var gridPicker = GridPicker(
                columnNames: columns,
                rowNames: rows,
                states: 2,
                initialStates: initialStates,
                formatState: formatState
            );

            return gridPicker.Render();
        }
    }
}

Advanced GridPicker for Hourly Schedule

This sample shows how to create an hourly schedule picker by dynamically generating column headers for each hour of the day.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new HourlyScheduleGridPicker();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class HourlyScheduleGridPicker : IComponent
    {
        public HTMLElement Render()
        {
            var days = new[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" };
            var hours = Enumerable.Range(0, 24).Select(n => $"{n:00}").ToArray();

            var initialStates = days.Select(_ => new int[hours.Length]).ToArray();

            Action<Button, int, int> formatState = (btn, state, previousState) =>
            {
                string color;
                switch (state)
                {
                    case 0: color = "#c7c5c5"; break;
                    case 1: color = "#a3cfa5"; break;
                    case 2: color = "#76cc79"; break;
                    case 3: color = "#1fcc24"; break;
                    default: color = "#ffffff"; break;
                }

                btn.Background(color);
            };

            // Optional: Providing custom column sizes and row height.
            var gridPicker = GridPicker(
                rowNames: days,
                columnNames: hours,
                states: 4,
                initialStates: initialStates,
                formatState: formatState,
                columns: new[] { 128.px(), 24.px() },
                rowHeight: 24.px()
            );

            return gridPicker.Render();
        }
    }
}

See also

• Button – Often used in combination with GridPicker for interactive elements.
• TextBlock – Useful for creating header or descriptive text in grid layouts.