removeRowCss

Webix JS
1

I am trying to allow my users to change the background color and font color for select rows.

To accomplish this, I created a button with a colorboard picker. When the user selects a color two things happen:

  • webix.ajax is used to update the metadata on the server, to preserve the CSS changes. That metadata is included in the $css parameter of my ui.datatable configuration.
  • Javascript loops through all colors on the colorboard (I used color names like pink,lightcyan,cornsilk, etc.) building the css name for each possible style (pink_stripe,blue_font, etc.) and uses $$(dtable).removeRowCss(id,style_name) to remove existing styles before using $$(dtable).addRowCss(id,style_name) to add the new style.

Problem:
The ajax side of things work fine, but the javascript removeRowCss will not remove any style that was already in the $css for ui.datatable. It will remove any style added via addRowCss, but not the existing style. I tried $$(dtable).refresh() and $$(dtable).render(). Neither helped.

Question:
How do I remove styles added via $css configuration of ui.datatable object?

2

Figured it out. Instead of using removeRowCss, I removed the CSS from item.$css, the same way it was added initially:

`itm = $$('main_table').getItem(rowID); var myCSS = itm.$css; itm.$css = myCSS.replace(/[a-z]*\\_stripe/gi,'').trim(); $$("main_table").addRowCss(rowID, color+ext);`
3

I have a new issue regarding this problem.

While the code above addresses previously applied CSS, I cannot find a way to identify CSS classes added since the document was last refreshed. So, for example:

  • If the user applies a font color, then changes his/her mind, I cannot find a way to identify which color class they added and remove it.

The only means I can think of is to loop through all available user classes and “removeRowCss” for each, but this is terribly inefficient.

Is there some form of getRowCss to help identify classes just added by the user during the current edit session? Or, should I maintain my own?

$css does not get updated until you refresh the entire page. Is there a way to refresh that, so it displays the newly added class(es)?

4

Is there some form of getRowCss to help identify classes just added by the user during the current edit session?

You can use

var cs = table.getItem(id).$css.split(" ");

to get the list of styles assigned to the item. To check that class was not initially in the $css property, you can use

//will return true for classes added by .addRowCss
var newone = table.data.getMark(cs[i]);

$css does not get updated until you refresh the entire page

Actually the item’s $css property is updated, each time as you call addRowCss

5

It will remove any style added via addRowCss, but not the existing style

It is actually a bug, will try to include a fix in the next update.