How to apply a common value on multiple selected rows in data table ?

Please consider this data table example https://webix.com/snippet/1162ccd1

I want to select all the rows which has 'Mark' as their cell value under 'Name' column and apply a common color (for example 'yellow') on them.

How can I accomplish this ?

Comments

  • You can use find or eachRow API to iterate through data and add/removeCss to the rows:

    var rows = $$("mytable").find(function(obj){
        return obj.id1.toLowerCase().indexOf("some_param") != -1;
    });
    
    webix.toArray(rows).each(function(row){
      $$("mytable").addRowCss(row.id, "classname");
    });
    
    // reset style on the entire grid
    $$("mytable").clearCss("classname");
    

    To update the cell style on the go, please checkcssFormat property.

  • Hi Listopad,

    Thanks for the answer.

    The solution is working for how I have described my requirement.
    However, I described my requirement a bit wrongly, apologies for that.

    Basically, I want to select some rows randomly (does not matter whether the names are 'Mark' or not, that I mentioned to give an example) irrespective of their values and assign a particular value from the dropdown on all of them.

    It does not have to be 'yellow' color, so I do not need any css. It has to be some value from the dropdown.

    I have tried to write the code in the following manner :

    var rows = $$("mytable").getSelectedId(true);
    
    for (i in rows) {
        var id = rows[i];
        var item = $$("mytable").getItem(id);
        item.id2 = "yellow"; //for example, it could be any value
    }
    

    Please let me know below things :
    i) how can I make this above code working ?
    ii) how can I trigger (by which event) the above code when multiple rows are selected ?

    Thanks,

  • Just to add, I want item.id2 = "yellow" to be done from the datatable drop down in the gui, so that it affects all the selected rows.

  • You can apply mapSelection method imstead of iteration:

    https://webix.com/snippet/98a23127

    On the other hand, the pure update according to your code snippet will look as follows:

    https://webix.com/snippet/3edc05f8

    > how can I trigger (by which event) the above code when multiple rows are selected ?

    There's a special event onAfterBlockSelect for blockselection mode and onAfterSelect for the cell selection. Both solutions above use onChange of the combo dropdown to update the grid.

    Also, you can check the log of all events in your UI via debug version of the library

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!