Grid

[angulardev19Participant]

Hi,

How to validate the widget column in the grid. As shown below code I created on a column with the widget. I want to validate when he left the cell. How can I do this? Let me know as soon as possible.

{
          text: this.resourceModel.pur_purodr_serpo_itemcode, datafield: 'itemCode', width: '150',
          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, value: value, theme: 'imms', maxLength: 25
            };
            let btnOptions = {
              disabled: this.isView
            };

            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.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++;
          },
          getEverPresentRowWidgetValue: (datafield: string, htmlElement: HTMLElement, validate: any): any => {
            debugger
          },
          initwidget: (row: number, column: any, value: any, htmlElement: HTMLElement): void => {
            this.itemDetailGrid.begincelledit(row, 'itemCode');
          },
          getEditorValue: (row: any, cellvalue: any, editor: any): void => {
            // return the editor's value.
            return editor.find('input').val();
          },
          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;
          },
          
        },

Regards,

[MartinParticipant]

Hello angulardev19,

The validation callback is called when you use createeditor, initeditor and geteditor. It does not work with createwidget.
So what you can do is your own custom validation, for example on the change event of the jqxInput that you are using.

Best Regards,
Martin

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

[Author]

Posts