DOM Manipulation in Webix

hi,

am trying to change the background color of the entire row using addRowCss on onItemClick event, by default webix datatable renders as columns clubbed inside one div. In such case how can I target one complete row. Other than acessing the row items using ui.getItem(id), I dont have much control over the DOM elements by dynamically assigning the Ids to it.

Is there anything similar to document.getElementbyId or jquery’s $(’’).attr() etc.

Regards,
Jay

Hey @Jay, as far as I know there is no separate DOM element responsible for the whole row of a datatable, it is only possible to get the whole particular column of the datatable.

Am I getting this right, or are you having some issues implementing the feature you’ve mentioned using addRowCss and onItemClick, or do you need this for something else?

In essence, it should be pretty straightforward: https://snippet.webix.com/7a3fkmg4.

As you might’ve noticed, addRowCss will add the specified CSS class to the individual webix_cell elements within the row.

You can try and get the cells within the specified rows yourself as well, in two ways:

1\. With the help of the getItemNode method by iterating throught the columns and by getting the clicked row: https://snippet.webix.com/a0v2ashi.

2\. With the help of aria-rowindex attribute: https://snippet.webix.com/wdpal133.

Also, is this thread by any chance related to thread you’ve created not too long, mentioning the same type of issue? (https://forum.webix.com/discussion/36746/webix-angular-datatable-row-to-be-assigned-new-background-color-on-clicking-the-respective-row#latest).

Hi Dzmitry,

thanks a lot for the reply again. Looks like querySelectorAll() should be used in the Angular 2 context, it works only with the Webix. I need to do some work around for the same will share with you if works with Angular

I have mentioned the same issue in another thread as well :slight_smile:

Regards