How to use cell rendering

[praneethParticipant]

I want to show tthe image but its not working
My code,
photoRenderer = (row: number, column: any, value: string): string =>
{
let name = this.myGrid.getrowdata(row).photo;
let img = ‘<div style=”background: white;”></div>’;
return img;
}
grid () {
this.source =
{
localdata: this.group,
datafields:
[
{ name: ‘name’, type: ‘string’ },
{ name: ‘owner’, type: ‘string’ },
{ name: ‘city’, type: ‘string’ },
{ name: ‘country’, type: ‘string’ },
{ name: ‘formatted_address’, type: ‘string’ }
],
datatype: “array”
};
this.dataAdapter = new $.jqx.dataAdapter(this.source);
this.columns =
[
{ text: ‘Photo’, width: 50, cellsrenderer: this.photoRenderer },
{ text: ‘Group Name’, filtertype: ‘input’, datafield: ‘name’,cellsrenderer:this.renderer, width: 160 },
{ text: ‘Owner’, filtertype: ‘input’, datafield: ‘owner’, width: 160 },
{ text: ‘City’, filtertype: ‘input’, datafield: ‘city’, width: 170 },
{ text: ‘Country’, filtertype: ‘input’, datafield: ‘country’ },
{ text: ‘Adddress’, filtertype: ‘input’,datafield: ‘formatted_address’ }
]
}

Here what I am getting is undefined for value in photorenderer.When i debud i did not found this function getrowdata(row) exits.

[Ivo ZhulevParticipant]

HI praneeth,

getrowdata exist and its working fine.
Value returns undefined because you don’t have datafield in that column => { text: ‘Photo’, width: 50, cellsrenderer: this.photoRenderer }

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[praneethParticipant]

Thanks Ivo,how can I send id to a function when a cell id clicked?Its not working with me.,

var cellsrenderer = function (row, column, value ) {
return ‘<select style=”width:80px; height:25px; font-size: 14px” >’ +
‘+<option (click)=”open(value)”>’ + ‘Edit’ + ‘</option>’ +
‘<option>’ + ‘Delete’ + ‘</option>’ +
‘</select>’;

}

this.columns =
[
{
text: ‘S.NO’, columntype: ‘textbox’, filtertype: ‘input’, width: 100, cellsalign: ‘center’
},
{
text: ‘Name’, columntype: ‘textbox’, filtertype: ‘input’, datafield: ‘name’, width: 215
},

text: ‘Description’, columntype: ‘textbox’, filtertype: ‘input’, datafield: ‘desc’, width: 215
},
{
text: ‘Created By’, columntype: ‘textbox’, filtertype: ‘input’, datafield: ‘created_by’, width: 100, cellsalign: ‘center’
},
{
text: ‘Actions’, filtertype: ‘input’,datafield: ‘id’, cellsrenderer: cellsrenderer, width: 80, filterable: false
}
];

[Ivo ZhulevParticipant]

Hi praneeth,

Do you want to get the ID of a cell when it is clicked?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[praneethParticipant]

Hi Ivo Zhulev,

I want to call a function when clicked.
var cellsrenderer = function (row, column, value ) {
return ‘<select style=”width:80px; height:25px; font-size: 14px” >’ +
‘+<option (click)=”open(value)”>’ + ‘Edit’ + ‘</option>’ +
‘<option>’ + ‘Delete’ + ‘</option>’ +
‘</select>’;
}

I want to call this open() {} unction when clicked.

[Ivo ZhulevParticipant]

Hi praneeth,

The browser reads that code like a simple HTML. not an Angular template. click is an Angular event so it won’t work here. Try attaching a javascript one <select onclick="open(value)">Click me</select>

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[praneethParticipant]

Hi Ivo Zhulev,

It throws error open is not defined.

open(value:any) {
console.log(value);
}

<select onclick=”open(value)”>Click me</select> ’ +
‘+<option>’ + ‘Edit’ + ‘</option>’ +
‘<option>’ + ‘Delete’ + ‘</option>’ +
‘</select>

[Ivo ZhulevParticipant]

Hi praneeth,

Set a class to the option:

'<select class="select">' +
     '<option>Edit</option>' +
     '<option>Delete</option>' +
'</select>'

Then in ngAfterViewInit(or some other state where the component is rendered) do this:

ngAfterViewInit() {
    let select = document.getElementsByClassName('select');
    for (let i = 0; i < select.length; i++) {
       select[i].addEventListener('change', (e) => {
          if ($(e.target).val() === 'Edit') {
             this.open();
          }
       })
    }
}

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts