Hi Customer,
Query #1: The link1 - the is args.model undefined, so I want to know how can I get the column data?
As per your query, we have achieved the link 1 requirement in the EJ2 Grid using actionBegin event. You can access the Grid added row details using args.data from the actionBegin with requestType in save state. Please refer the below code example for more information.
|
[index.js]
actionBegin(args) {
if (args.requestType === 'save' && args.action == "add") {
var isExist = this.gridInstance.dataSource.some(row=> row.OrderID == args.data.OrderID)
if(isExist){
args.cancel =true;
var editform = this.gridInstance.getContentTable().querySelector(".e-row.e-addedrow");
editform.remove();
this.gridInstance.refresh();
}
}
}
|
Query #2: I want to custom-validation duplicate column by column when add/edit the grid row
We are able to bind the duplicate validation function in the multiple columns(column.validationRules) using custom validation function. In below code example, we have defined the “commonCustomFn” function in OrderID, CustomerName using validationRules property since it will trigger when focus out on the edit form. We can identify the specific columns validation using args.element.name in that function. Please refer the below code example for more information
|
[index.js]
export class NormalEdit extends SampleBase {
constructor() {
super(...arguments);
. . . .
this.validationRule = { required: [this.commonCustomFN.bind(this),"Please enter CustomerName"] };
this.orderidRules = { required: [this.commonCustomFN.bind(this),"Please enter OrderID"]};
}
commonCustomFN(args){
switch (args.element.name) {
case "OrderID":
if (args.value == "") {
return false
} else { return true }
break;
case "CustomerName":
if (args.value == "") {
return false
} else { return true }
}
}
<GridComponent dataSource={orderDataSource} ref={grid => this.gridInstance = grid} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} pageSettings={this.pageSettings} actionBegin={this.actionBegin.bind(this)}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='140' textAlign='Right' validationRules={this.orderidRules} isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='CustomerName' headerText='Customer Name' width='150' validationRules={this.validationRule}></ColumnDirective>
. . . .
</ColumnsDirective>
<Inject services={[Page, Toolbar, Edit]}/>
</GridComponent>
|
For your reference, we have created a sample with above two queries in the below sample link
Please get back to us, if you need further assistance.
Regards,
Balaji Sekar.
