Webix Angular Datatable Row to be assigned new background color on clicking the respective row

JayJay
edited August 29 in Technical questions

Hi,

This is my angular class for the datatable component, I am able to render the datatable without any issue with dynamic data, but there are many other DOM manipulation things missing which makes things bit complex.

Basically I wanted to click the row and apply background color to the clicked row, Webix datatable has only onItemClick which selects only the column but not the whole row.

Datatable rendering as columns, hence am unable to target one particular on row onClick, here is my code below

export class WebixdataGridComponent implements OnDestroy, OnInit {
private ui : webix.ui.datatable;
public resData: any[];

@Output() onRowSelect = new EventEmitter();

constructor(private empDetSrv: EmpDetailService, root: ElementRef) {
// webix.ready(function(){
this.ui = <webix.ui.datatable> webix.ui({
container: root.nativeElement,
view: "datatable",
autoConfig:true,
id: 'sampleTable',
columns: [
{ id:"fname", header: ["Name", {content:"serverFilter"}], width:200},
{ id:"email", header: "Mail", width:200},
{ id:"gender", header:"Gender", width:80}
],
url: '/api/details',
on: {
onItemClick: (id, col, value) => {
console.log("Row id ===> ", id.row + " Col Id ===> " + id.col + "Value ==> " + value + col);
var orgItem = this.ui.getItem(id);
var nodeItem = this.ui.getNode();
var dupItem = webix.copy(orgItem);
dupItem.id = dupItem.id + '_copied';
dupItem.gender = dupItem.gender + '_copied';
this.onRowSelect.emit(dupItem);
return false; // here it blocks the default behavior
},

    // },
    //scheme: {
      // click: function(item) {
      //   if(item.gender == 'Male') {
      //     console.log('Clicking the datatable');
      //     item.$css = 'highlight';
      //   }            
      // }
    }
    //}
  });
// });

}

Many of the snippet examples are not compatible with the angular. I just wanted to click on the row and get it applied with new bg color.

How to apply unique ids for the rows ? Any simplified DOM manipulation available which works in Angular How to set id attribute for the DOM. (like document.getElementById)

Regards

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!