Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Drawing colored grid with clickable cells
Forum Update on Monday, May 27th 2025

Drawing colored grid with clickable cells

Scheduled Pinned Locked Moved Solved General and Desktop
3 Posts 2 Posters 1.5k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K Offline
    K Offline
    kpusmo
    wrote on last edited by
    #1

    Hi there,
    I don't know if I solve this problem correctly and efficiently. I have to draw grid of elements, with row and column counts provided by user. After drawing it, I want user to be able to click the cells to select them (selected items are marked with different color). I've got spin inputs for rows and columns, push button to start drawing. I extend QWidget class as follows:

    class Box : public QWidget
    {
        Q_OBJECT
    public:
        Box(QWidget *parent = nullptr) = delete;
        explicit Box(Cell *cell, QWidget *parent = nullptr);
        bool event(QEvent *event);
    
    protected:
        Cell *cell;
    };
    
    Box::Box(Cell *c, QWidget *parent) : cell(c), QWidget(parent) {}
    
    bool Box::event(QEvent *event)
    {
        if (event->type() == QEvent::MouseButtonRelease)
        {
            cell->setState((cell->getState() + 1) % 2); //changing state, not important here
            QPalette palette;
            palette.setColor(QPalette::Background, cell->getColor());
            setPalette(palette);
            return true;
        }
        return QWidget::event(event);
    }
    

    (Cell is class storing the state on which the color is based)
    On button clicked, I create as many Box objects as user requested and add them to grid layout defined in .ui file.
    It works perfectly, but I wonder if there is some simpler or more efficient way to achieve such grid with accessible (and clickable) items.
    Also, I have problem with keeping this grid layout fixed to window width (as its height is based on row number provided by user), but I think that this is problem for another topic.

    jsulmJ 1 Reply Last reply
    0
    • K kpusmo

      Hi there,
      I don't know if I solve this problem correctly and efficiently. I have to draw grid of elements, with row and column counts provided by user. After drawing it, I want user to be able to click the cells to select them (selected items are marked with different color). I've got spin inputs for rows and columns, push button to start drawing. I extend QWidget class as follows:

      class Box : public QWidget
      {
          Q_OBJECT
      public:
          Box(QWidget *parent = nullptr) = delete;
          explicit Box(Cell *cell, QWidget *parent = nullptr);
          bool event(QEvent *event);
      
      protected:
          Cell *cell;
      };
      
      Box::Box(Cell *c, QWidget *parent) : cell(c), QWidget(parent) {}
      
      bool Box::event(QEvent *event)
      {
          if (event->type() == QEvent::MouseButtonRelease)
          {
              cell->setState((cell->getState() + 1) % 2); //changing state, not important here
              QPalette palette;
              palette.setColor(QPalette::Background, cell->getColor());
              setPalette(palette);
              return true;
          }
          return QWidget::event(event);
      }
      

      (Cell is class storing the state on which the color is based)
      On button clicked, I create as many Box objects as user requested and add them to grid layout defined in .ui file.
      It works perfectly, but I wonder if there is some simpler or more efficient way to achieve such grid with accessible (and clickable) items.
      Also, I have problem with keeping this grid layout fixed to window width (as its height is based on row number provided by user), but I think that this is problem for another topic.

      jsulmJ Offline
      jsulmJ Offline
      jsulm
      Lifetime Qt Champion
      wrote on last edited by
      #2

      @kpusmo Maybe https://doc.qt.io/qt-5/qtablewidget.html matches your requirements?

      https://forum.qt.io/topic/113070/qt-code-of-conduct

      1 Reply Last reply
      3
      • K Offline
        K Offline
        kpusmo
        wrote on last edited by
        #3

        @jsulm thank you for your response. I achieved this using QTableView and model, that's much faster for large amount of cells than using QWidgets and grid layout. Also, it was easy to make QTableView expand on window resize.

        1 Reply Last reply
        1

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved