How to i trigger an update in Tabulator when using a select editor

Viewed 374

I'm trying to get the row ID of a select editor in Tabulator. I have a few hundred rows of values, some i want to have a value of yes, some of no. When I change the value I then need to know which row it is for. Here is my table.

              adtable = new Tabulator("#adtable", {
                ajaxURL: "getinfo.php",
                layout: "fitColumns",
                pagination:"local",
                placeholder: "No Data Set available",
                paginationSize: 40,
                paginationSizeSelector: [100, 200, 500, 1000],
                columns: [{
                    title: "Key Name",
                    field: "keyname",
                    formatter: "textarea",
                    sorter: "string",
                    headerFilter: "input"
                  },
                  {
                    title: "Active",
                    field: "display",
                    editor: "select",
                    editorParams: {
                      values: ["Yes", "No"], 
                      sortValuesList: "asc", 
                      defaultValue: "Yes",
                      elementAttributes: {
                        maxlength: "10", 
                      },
                    },
                  ],
                });
            });

Where can I put a command which will give me the row number.? I need to update a db record. basiclaly, set display = either yes or no. My preference was a tickCross but couldnt work that out either.

Any assistance is greatly appreciated. using Tabulator 4.9

1 Answers

After a bit more thinking... it was actually blindingly simple.

    {
                title: "Active",
                field: "display",
                editor: "select",
                editorParams: {
                  values: ["Yes", "No"], //create list of values from all values contained in this column
                  sortValuesList: "asc", //if creating a list of values from values:true then choose how it should be sorted
                  defaultValue: "Yes", //set the value that should be selected by default if the cells value is undefined
                  elementAttributes: {
                    maxlength: "10", //set the maximum character length of the input element to 10 characters
                  },
                },
                cellEdited: function(row) {
                  let thisrow = row.getData()
                  alert(thisrow.id + "is  now " + thisrow.display)
                }
              },

Added here to help others who might be banging their head against a wall. I was obviously thinking of something more complicated.

Related