- Home
- Forum
- Angular - EJ 2
- Blur no longer triggers following Angular and Syncfusion upgrade
Blur no longer triggers following Angular and Syncfusion upgrade
Our project used Angular 11.2.4 with Syncfusion 18.4.4x, and after an upgrade to Angular 14.1.2 with Syncfusion 20.2.43, a part of the project using NumericTextBox and IEditCell doesn't work as it should.
this.amountParams = {
create: () => {
this.amountElem = document.createElement('input');
return this.amountElem;
},
read: () => {
return this.amountObj.value;
},
destroy: () => {
this.amountObj.destroy();
},
write: (args: {
rowData: { [x: string]: any };
row: Element | EventTarget;
column: { field: string | number };
}) => {
var rowData = args.rowData;
var rowIndex = this.managedFundsBulkOrderGrid.getRowInfo(
args.row
).rowIndex;
console.log(args.rowData[args.column.field]);
console.log(args);
console.log(args.column.field);
console.log(rowIndex);
this.amountObj = new NumericTextBox({
min: 0,
value: args.rowData[args.column.field],
change: (args) => {
if (rowData['ActionedDate']) {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Status',
'Upcoming'
);
} else {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Status',
'New'
);
}
if (
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.New_Investment ||
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Additional_Investment
) {
if (+args.value > rowData['AccountBalance']) {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'SufficientFundStatus',
'Insufficient'
);
if (!rowData['ActionedDate']) {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Status',
'Incomplete'
);
}
} else {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'SufficientFundStatus',
'Available'
);
}
}
if (
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Redemption ||
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Switch
) {
if (
rowData['CurrentHoldingValue'] !== undefined &&
+args.value &&
+args.value > rowData['CurrentHoldingValue']
) {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'SufficientFundStatus',
'Insufficient'
);
if (!rowData['ActionedDate']) {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Status',
'Incomplete'
);
}
}
}
if (+args.value > 0) {
let instruction = 'Application';
instruction =
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Redemption
? 'Redemption'
: instruction;
instruction =
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Switch
? 'Switch'
: instruction;
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Instruction',
instruction
);
if (
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Redemption ||
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Switch
) {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Units',
null
);
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'AllRedeem',
null
);
}
} else {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Instruction',
''
);
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Status',
null
);
}
},
blur: (args) => {
if (rowData['ActionedDate']) {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Status',
'Upcoming'
);
} else {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Status',
'New'
);
}
if (
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.New_Investment ||
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Additional_Investment
) {
if (+args.value > rowData['AccountBalance']) {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'SufficientFundStatus',
'Insufficient'
);
if (!rowData['ActionedDate']) {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Status',
'Incomplete'
);
}
} else {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'SufficientFundStatus',
'Available'
);
}
}
if (
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Redemption ||
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Switch
) {
if (
rowData['CurrentHoldingValue'] !== undefined &&
+args.value &&
+args.value > rowData['CurrentHoldingValue']
) {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'SufficientFundStatus',
'Insufficient'
);
if (!rowData['ActionedDate']) {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Status',
'Incomplete'
);
}
}
}
if (+args.value > 0) {
let instruction = 'Application';
instruction =
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Redemption
? 'Redemption'
: instruction;
instruction =
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Switch
? 'Switch'
: instruction;
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Instruction',
instruction
);
if (
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Redemption ||
this.managedFundsBulkOrderRequest.OrderType ===
ManagedFundsOrderType.Switch
) {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Units',
null
);
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'AllRedeem',
null
);
}
} else {
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Instruction',
''
);
this.managedFundsBulkOrderGrid.updateCell(
rowIndex,
'Status',
null
);
}
},
});
this.amountObj.appendTo(this.amountElem);
},
};
The intended effect here is that the column with field DollarInvestAmount should be editable, and upon editing it multiple actions could occur, the main one I am focusing upon being updating the cell with field Instruction. However, the function blur on NumericTextBox does not activate under the same circumstances as when it does in the non-updated code. Instead, no apparent effect appears to occur.
The changes function is normally not present, it was added for testing to see if it would be a possible solution. The changes function does trigger upon the textbox changing, however the updateCell() method for updating the Instruction field does not have any apparent effect.
SIGN IN To post a reply.
1 Reply
VJ
Vinitha Jeyakumar
Syncfusion Team
August 18, 2022 10:06 AM UTC
Hi Darryl,
We have tried to replicate the reported issue using the Syncfusion package V20.2.43 and angular V14.1.2. but we didn't face any issues, and the blur event also got triggering. please check the sample below,
Can you please share us with the details below,
- Exact issue reproducing steps.
- Entire code snippet.
- If possible, please share us with the runnable issue reproducing sample to further validate on our end.
Regards,
Vinitha
SIGN IN To post a reply.
- 1 Reply
- 2 Participants
-
DJ Darryl Johnson
- Aug 17, 2022 04:45 AM UTC
- Aug 18, 2022 10:06 AM UTC
