CODEWITHSUNDEEP
datatablewebix
A.G.Progm.Enthusiast
A.G.Progm.Enthusiast

Reputation: 1010

How to apply a common dropdown value on multiple selected rows in a Webix datatable

I need a help on applying common drop down values to multiple selected rows in a Webix datatable. Let's say I want to select all the rows of my datatable (by Ctrl+click) for which the 'Name' column has value as 'Mark' and then want to apply a common color for them (for example : green) by clicking so that it gets applied on all the rows at one go.

The snippet is here : https://webix.com/snippet/1162ccd1

Any help on how can this be achieved would be appreciated.

Thanks in advance.

Further to this post, I am including a re-phrased and a half-way solution below for the experts to dispel any confusion about the requirement :

It does not necessarily have to be those rows which have 'Name' as 'Mark'. I put it that way to give an example. Basically, it could be any randomly selected row either consecutive or haphazard and selecting a common value for them from the drop down of the 'color' column (it could be any color in that drop down ) so that its value gets assigned to those cells of those selected rows. Note, selecting a color should not change the color of the row, so there is no css effect I want here.

I have so far written the code like below, which is able to fetch the selected rows.

rows = $$("mytable").getSelectedId(true);

for (i in rows) {
    id = rows[i];
    item = $$("mytable").getItem(id);

    /* below effect has to happen from the drop down of data table gui */
    item.id2 = "green"; //for example, it could be any value
  }

Can anybody please help me in:

i) how can I apply the value selected from the drop down of data table to all the selected rows ?

ii) Secondly, how can I trigger this code ( through which event ?) once they are selected in the data table and the value is chosen from the drop down ?

Thanks.

Upvotes: 0

Views: 473

Answers (1)

Slide
Slide

Reputation: 36

You can do something like this by adding the onBeforeFilter event, and track only color filter ("id2" in your snippet):

    onBeforeFilter: function(id, value, config) {
      if (id === "id2") {
      const selected = this.getSelectedId(true);
      const color = this.getFilter("id2").value;
        for (let row in selected) {
          const item = this.getItem(selected[row]);
          item["id2"] = color;
          this.updateItem(item.id, item);
        }
      }
   }

Sample is here https://webix.com/snippet/538e1ca0

But I think this is not the best way.

You can also create a context menu that is displayed by right-clicking on the table and making a choice of values in it.

Upvotes: 1

Related Questions