Grid

[angulardev19Participant]

Hi,

I face some issue in a grid column 10-15 columns are there. For the first column, I created a column with createwidget and rest are simple ones. So when my cell focus is on the last column and click to add a new row in the grid I got an error like “Error: Invalid Selector – .edibutton3! Please, check whether the used ID or CSS Class name is correct.”

Please let me know as soon as possible. client-side: angular7
My widget column code is as below:

{
                    text: this.resourceModel.pur_purodr_serpo_itemcode, datafield: 'itemCode', width: '150', editable: true,
                    createwidget: (row: any, column: any, value: string, htmlElement: HTMLElement): void => {
                        const rowValue = row.bounddata;

                        let inputCont = document.createElement(<code>input</code>);
                        let btnCont = document.createElement(<code>button</code>);
                        inputCont.innerHTML = <code></code>;
                        btnCont.innerHTML = <code><i class='icon-search mr-0'></i></code>;

                        let inputclassName = <code>edibutton${counter}</code>;
                        let butnclassName = <code>deltbutton${counter}</code>;

                        inputCont.className = inputclassName + ' form-control search-input';
                        btnCont.className = butnclassName + ' btn btn-outline-secondary btn-search border-0';
                        inputCont.setAttribute('spellcheck', 'false');

                        htmlElement.appendChild(inputCont);
                        htmlElement.appendChild(btnCont);

                        let inputOptions = {
                            disabled: this.isView || this.servicePOinfoForm.controls['poType'].value === 2, value: value, theme: 'imms', maxLength: 25
                        };
                        let btnOptions = {
                            disabled: this.isView || this.servicePOinfoForm.controls['poType'].value === 2
                        };

                        let inputbtn = jqwidgets.createInstance(<code>.${inputclassName}</code>, 'jqxInput', inputOptions);
                        let buttonbtn = jqwidgets.createInstance(<code>.${butnclassName}</code>, 'jqxButton', btnOptions);

                        inputbtn.addEventHandler('click', (event): void => {
                            this.itemDetailGrid.selectrow(row.boundindex);
                        });

                        inputbtn.addEventHandler('change', (event): void => {
                            this.isValiDErrro = false;
                            this.itemDetailGrid.setcellvalue(row.boundindex, 'itemCode', event.target.value);
                            this.itemDetailGrid.setcellvalue(row.boundindex, 'itemDesc', 'test description');
                        });

                        inputbtn.focus();
                        buttonbtn.addEventHandler('click', (): void => {
                            this.openPopup(row.bounddata.itemCode, row.boundindex);
                        });
                        counter++;
                    },
                    initwidget: (row: number, column: any, value: any, htmlElement: HTMLElement): void => {
                    },
                    cellclassname: (row: any, column: any, value: any, rowData: any): string => {
                        return this.getClassName(rowData);
                    },
                    validation: (cell: any, value: any): any => {
                        if (value === '' || value === null) {
                            this.isValiDErrro = true;
                            return {
                                message: this.resourceModel.sales_saledisp_dcgen_itemcode + ' ' + this.commonResourceModel.requiredKey,
                                result: false
                            };
                        }
                        this.isValiDErrro = false;
                        return true;
                    },
                },

[HristoParticipant]

Hello angulardev19,

I would like to mention there is specific section for Angular questions.
Please, refer to the Angular section if you have a new questions of this type.

I tested this example and it seems to work fine:
https://stackblitz.com/edit/github-mh6fs3-qysosv
Could you provide us with an example that demonstrates your case?
You could use the example above as a base.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[angulardev19Participant]

Hi Hristo,

Please check the updated Stackblitz for the same. Let me know for more clarification. For now, I just commented on the button code with the input box. But in my application, I use it with input. (kind of input with search icon)

https://stackblitz.com/edit/github-mh6fs3-5lm5ub

Regards,
Dev19

[HristoParticipant]

Hello Dev19,

Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[angulardev19Participant]

Hi,

This example is working fine. I need to click on the search icon that’s why i created two jqxinstance and open popup on click on the button. If you got my point then let me provide like that.

Regards,
Dev19

[HristoParticipant]

Hello Dev19,

I would like to ask you to clarify it.
Whit what you have trouble?
The example that I provide you could use to attach an event to the input as below:

myInput.addEventHandler('click', (event): void => {
	// Do your logic here
});

I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[angulardev19Participant]

Hi Hristo,

Can you put the magnify icon with input? When I click this icon then and then event is fired. Because I created custome angular control in my form and client needs this inside grid so the user gets the idea to click on it. Does this make sense? Still, need more clarification from my end?

Regards,
Dev19

[HristoParticipant]

Hello Dev19,

Absolutely yes, you could add an image next to the input or whatever you want.
You should create an additional image element and add it to the input.
If you mean this then you could check my example (as the input) and thereafter you prepare your image tag to add it.
externalContainer.appendChild(image);

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts