Adding Seats to Tables

GoJS
1

Sir In Seating chart of gojs it contains tables and seats now i am trying to implement adding a seat when clicking add button and removing seat when clicking remove button could you please tell me how i can achieve that functionality…

2

What would you expect to happen when a seat has been added to a table? Where does it get placed? Do other seats move?

Did you see how seats are defined in the sample? You can easily create new templates just by changing the calls to the “Seat” function in the definition of the template.

3

Hi Walter,
Yes I want to add seats around the tables(like seating chart) and adjust seat position when adding seat and removing seat automatically with respect to the length and width of tables

4

What have you tried to do? What problems did you encounter?
I just tried adding this “Button” to the Spot Panel of the “TableR8” template:

      $("Button",
        {
          desiredSize: new go.Size(20, 20),
          click: function(e, obj) {
            myDiagram.startTransaction("add seat");
            // you need to figure out the arguments to the Seat function
            obj.part.add(Seat(9, "1 1", "0 0"));
            // and you need to figure out if and how to modify the
            // alignment and alignmentFocus of the other seats
            myDiagram.commitTransaction("add seat");
          }
        })

and it worked fine the first time.

Of course, you still need to figure out what you want to do, besides just adding a seat to a table – the number, the alignment, and the alignmentFocus of not only the new seat but perhaps of all the other seats at the table and the desiredSize of the table Shape itself.

5

Hi @walter,
If the button is not in Canvas tag. How to add a seat to a table?

6

I haven’t tried this, but you could use an HTML Button instead of a GoJS “Button”:

<button onclick="addSeatToTable()">Add a seat to the selected table</button>

function addSeatToTable() {
    var table = myDiagram.selection.first();
    if (!(table instanceof go.Node)) return;
    if (table.category == "") return;  // must not be a Person
    myDiagram.startTransaction("add seat");
    // you need to figure out the arguments to the Seat function
    table.add(Seat(9, "1 1", "0 0"));
    // and you need to figure out if and how to modify the
    // alignment and alignmentFocus of the other seats
    myDiagram.commitTransaction("add seat");
}
1 Like