Angular7 jqxGrid , apply password type in column

[angulardev19Participant]

Currently we are using JQXgrid along with angular 7 and we want type = password in jqxgrid column

this.lockedUserscolumns =
[
{
text: this.resourceModel.admn_usermng_unlockresethdr1_entnewpass, columntype:’custom’, datafield: ‘enterNewPassword’, sortable: false, menu: false,
createwidget: (row: any, column: any,value: string, htmlElement: HTMLElement): void => {

let editCont = document.createElement(input);
editCont.type = ‘password’;
editCont.width = 20;

editCont.id=${counter};
// let editclassName = edibutton${counter};
// editCont.className = editclassName+’ gridactions’;
htmlElement.appendChild(editCont);

counter++;
},
initwidget: (row: number, column: any, value: any, htmlElement: HTMLElement): void => { },

},

{
text: this.resourceModel.admn_usermng_unlockuser_confirmpwd, datafield: ‘confirmPassword’, sortable: false, menu: false,
validation: (cell: any, value: string): any => {
debugger;
let newPass = this.lockedUsersListGrid.getcellvalue(cell.row, ‘enterNewPassword’);
const rowValue = cell.row.bounddata;
if (newPass !== value && value != null) {
this.hasError = true;
return {
message: ‘Password did not match’, result: false
};
}
this.hasError = false;
return true;
}
}

— we are not able to get column value through cellvalue here we are using createwidget for password field

let newPass = this.lockedUsersListGrid.getcellvalue(cell.row, ‘enterNewPassword’);

— here we get undefine value
— Is there any solution ???

[MartinParticipant]

Hello angulardev19,

Please, review the following Example.
You could see that when you edit the Quantity column the getcellvalue returns the correct value of the password field.

Best Regards,
Martin

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

[angulardev19Participant]

Hey Thanks For Replay we very appreciate
we agree with your answer

Once we are changing the password we are not able to get updated value in the validation. and how to compare new password field with confirm password in jqxgrid

Code is:-

{
text: this.resourceModel.admn_usermng_unlockresethdr1_entnewpass, columntype: ‘custom’, datafield: ‘enterNewPassword’, sortable: false, menu: false,
createwidget: (row: any, column: any, value: string, htmlElement: HTMLElement) => {

let container = document.createElement(‘input’);
container.className = ‘password’;
container.setAttribute(‘type’, ‘password’);
container.setAttribute(‘value’, value);
htmlElement.appendChild(container);

let options = {
width: ‘100%’,
height: ‘100%’,
};

jqwidgets.createInstance(‘.password’, ‘jqxPasswordInput’, options);
},
initwidget: (row: number, column: any, value: any, htmlElement: HTMLElement): void => {

},
},
{
text: this.resourceModel.admn_usermng_unlockuser_confirmpwd, datafield: ‘confirmPassword’, columntype: ‘template’,sortable: false, menu: false,

createwidget: (row: any, column: any, value: string, htmlElement: HTMLElement) => {
let container = document.createElement(‘input’);
container.className = ‘password’;
container.setAttribute(‘type’, ‘password’);
container.setAttribute(‘value’, value);
htmlElement.appendChild(container);

let options = {
width: ‘100%’,
height: ‘100%’,
};

jqwidgets.createInstance(‘.password’, ‘jqxPasswordInput’, options);

},
initwidget: (row: number, column: any, value: any, htmlElement: HTMLElement): void => {

let newPass = this.lockedUsersListGrid.getcellvalue(row, ‘enterNewPassword’);
debugger;
},

validation: (cell: any, value: string): any => {
debugger;
let newPass = this.lockedUsersListGrid.getcellvalue(cell.row, ‘enterNewPassword’);
const rowValue = cell.row.bounddata;
if (newPass !== value && value != null) {
this.hasError = true;
return {
message: ‘Password did not match’, result: false
};
}
this.hasError = false;
return true;
}
}

[MartinParticipant]

Hello angulardev19,

Please, look at the updated Example.
You could use the val method of the jqxPasswordInput for getting the updated value.

Best Regards,
Martin

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

[Author]

Posts