Grid

[angulardev19Participant]

Hi,

In my grid, I created a column with the following code. When I am on the last column and add a new column I get an error like this. Why I’m getting this error any help or suggestion. Let me know asap.

Error: Invalid Selector – .salesedit1-2! Please, check whether the used ID or CSS Class name is correct.

Grid Column Code:

`<jqxGrid #itemDetailGrid [width]=”‘100%'” [height]=”350″ [enabletooltips]=”true”
[source]=”itemDetailDataAdapter” [columns]=”itemDetailColumns” [rowdetails]=”true”
[initrowdetails]=”initRowDetails” [theme]=”‘imms'” [rowdetailstemplate]=”rowdetailstemplate”
(onRowexpand)=”Rowexpand($event)” (onCellendedit)=”cellEndEditEvent($event)” class=”nested-grid”
[columnsresize]=”true” [columnsreorder]=”true” [editable]=”isView?false:true”
(onCellendedit)=”itemGridCellunselect($event)”>
</jqxGrid>`

createwidget: (row: any, column: any, value: string, htmlElement: HTMLElement): void => {

                    const rowValue = row.bounddata;

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

                    const inputclassName = <code>salesedit${row.boundindex + '-' + counter}</code>;
                    const butnclassName = <code>salesDel${row.boundindex + '-' + 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);

                    const inputOptions = {
                        disabled: this.isView, value: value, theme: 'imms'
                    };
                    const btnOptions = {
                        disabled: this.isView
                    };

                    this.inputbtn = jqwidgets.createInstance(<code>.${inputclassName}</code>, 'jqxInput', inputOptions);
                    const buttonbtn = jqwidgets.createInstance(<code>.${butnclassName}</code>, 'jqxButton', btnOptions);
                    if (this.isAdded) {
                        this.inputbtn.focus();
                    }
                    this.inputbtn.addEventHandler('change', (event): void => {
                        this.customerBillingGrid.setcellvalue(row.boundindex, 'customerBillCode', event.target.value);
                    });
                    buttonbtn.addEventHandler('click', (): void => {
                        this.itemCodePopup(row.bounddata.customerBillCode, row.boundindex);
                    });
                    counter++;
                },
                initwidget: (row: number, column: any, value: any, htmlElement: HTMLElement): void => { },

[MartinParticipant]

Hello angulardev19,

Please, send a working stackblitz sample of this case, so we could observe what is the issue.
We could not reproduce such behavior. Here is an Example.

Best Regards,
Martin

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

[Author]

Posts