jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by elie 7 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

create a widget column in angular 4 jqxGrid Posts
November 29, 2017 at 11:46 am create a widget column in angular 4 jqxGrid #97620

elie
Participant

hi,
i am facing the below issue with the angular 4 grid which also appears in the below example
https://www.jqwidgets.com/angular/angular-grid/angular-grid-widgetcolumn.htm

the issue is:
i created a widget column (a button) with a click event that should send the selected row’s data as a parameter to a function
however if i scroll the grid and press on a button the data send to the function is not the data of the selected row but the data of another row.
you can see it in the example that you have on your own website following the link i previously mentioned.
if you scroll down in the grid the employees picture and name remains the same of the first page

November 30, 2017 at 10:38 am create a widget column in angular 4 jqxGrid #97641
Ivo Zhulev
Participant
Hi elie,

Thanks for the feedback. We will update the demo soon. Here is the changed code:
```
columns: any[] =
    [
        {
            text: 'Picture', datafield: 'firstname', width: 100,
            createwidget: (row: number, column: any, value: string, htmlElement: HTMLElement): void => {

                const container = document.createElement('div');
                const id = 'myButton' + this.counter;
                container.id = id;
                container.style.border = 'none';
                htmlElement.appendChild(container);

                const imgurl = '../images/' + value.toLowerCase() + '.png';

                const options = {
                    width: '100%', height: 90, template: 'success',
                    imgSrc: imgurl, imgWidth: 40, imgHeight: 50, value: value,
                    imgPosition: 'center', textPosition: 'center', textImageRelation: 'imageAboveText'
                };

                const myButton = jqwidgets.createInstance('#'+ id, 'jqxButton', options);

                myButton.addEventHandler('click', function (): void {
                    const currentButtonValue = this.children[1].innerHTML;
                    alert(currentButtonValue);
                });

                this.counter++;
            },
            initwidget: (row: number, column: any, value: any, htmlElement: HTMLElement): void => {
                const imgurl = '../images/' + value.toLowerCase() + '.png';
                (<HTMLImageElement>htmlElement.children[1].children[0]).src = imgurl;
                htmlElement.children[1].children[1].innerHTML = value;
            }
        },
        { text: 'Name', datafield: 'name', width: 200 },
        { text: 'Title', datafield: 'title', width: 200 },
        { text: 'Country', datafield: 'country' }
    ];
```
Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/
December 1, 2017 at 8:21 am create a widget column in angular 4 jqxGrid #97661

elie
Participant

Hi Ivo,

kindly note that your code did not fix the problem.
that’s the code of the column i created

{
text: ”, datafield: ‘btn_account_search’, width: 20, editable: false,
createwidget: (row: any, column: any, value: string, htmlElement: HTMLElement): void => {

const container = document.createElement(‘div’);
const id = ‘btnAccountSearch_’ + row.bounddata.id;
container.id = id;
container.style.border = ‘none’;
htmlElement.appendChild(container);

const options = {
value: “<span><i class=’material-icons’>search</i></span>”,
width: ‘100%’, height: ‘100%’
};

const myButton = jqwidgets.createInstance(‘#’ + id, ‘jqxButton’, options);

myButton.addEventHandler(‘click’, (): void => {
this.ShowAccountNoSearchPopup(row.bounddata.id, row.bounddata.account_no);
});
},
initwidget: (row: number, column: any, value: any, htmlElement: HTMLElement): void => { }
},

“ShowAccountNoSearchPopup” is a typescript function that should receive 2 parameters from the row data
mainly the grid shows 14 rows with scrollbar
if i press a button contained in any of the first 14 rows the data send to the function is the correct data of the row i selected
but if i scroll down to row 30 for example and press the button of this row the data send to the function is not the data of this row but the data of one of the 14 rows initially shown in the grid.

Best Regards.
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.