grid button

[gregory.michelParticipant]

Hi,
I need to make a grid with button for CRUD.
those button must contain icons ans their callback must use another typescript methods.
How can i do that?
I try all solution exposed on this forum, but none respond to all my needs.
i wrote a JS Editor: https://jseditor.io/?key=5b872c09ad2a11e88bf900224d6bfcd5
but the used library is 5.4.0… so buttonClick “row” parameter dont work.
with version 6.0.6 is work fine, but still can t put icons in my buttons.

[MartinParticipant]

Hello gregory.michel,

So, is your issue displaying the icons?
The cellsRenderer callback that you are using is the correct way to display an icon in the buttons.
I see that you are using “font awesome” icons. Are you sure that otherwise(i.e. outside the grid) the icon is loaded correctly?
Also, you could check if you shouldn’t set the size of the icon, as it may be too big.

Best Regards,
Martin

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

[gregory.michelParticipant]

Hi,
If I replace

cellsRenderer: (row: number, column: any, value: any, defaulthtml: string, columnproperties: any, rowdata: any) => {
        return 'edit';
},

by

cellsRenderer: (row: number, column: any, value: any, defaulthtml: string, columnproperties: any, rowdata: any) => {
        return '<i class="fa fa-pencil"></i>';
},

the icon is correctly displayed, but the buttonclick callback does’nt work anymore…

[MartinParticipant]

Hello gregory.michel,

When you are using cellsRenderer you need to create the buttons separately, not by using columnType: 'button'.
I have updated your Fiddle Example for the edit buttons.

Best Regards,
Martin

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

[gregory.michelParticipant]

Hi,
This solution don’t work, several actions make buttons disappear:
scrollbar, sort, filter,…

[Peter StoevKeymaster]

Hi Gregory,

I would like to suggest you another approach. By using the createWidget callback of our Grid. Here is the sample: https://stackblitz.com/github/jqwidgets/angular_demos/tree/master/grid/widgetcolumn/. It displays an icon in each Button in that column.

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[gregory.michelParticipant]

Hi,
I tried this solution too, but i can’t access to my typescript methods/properties in the button callback.
“this” in the callback seems to be html element, not the typescript component…

[MartinParticipant]

Hello gregory.michel,

You need to change the button callback to an arrow function, so it keeps the context of the typescript component:

myButton.addEventHandler('click', () => {
   console.log(this);
});

I’ve updated the Example.

Best Regards,
Martin

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

[Author]

Posts