Show Add New Row always on the grid in Template Editing Mode
ok fine.
this is my grid component
<style>
.control-section{
margin-top:100px;
}
</style>
<divclass="control-section">
<ejs-grid #blgrid
id='blgrid'
[dataSource]="lineItems"
[editSettings]='editSettings'
[pageSettings]='pageSettings'
[toolbar]='toolbar'
rowHeight='40'
height="300px">
<e-columns>
@for (col of columns; track col){
<e-column [field]='col.field' [headerText]='col.headerText' *ngIf="!col.isHidden"
[textAlign]='col.textAlign' [isPrimaryKey]='col.isPrimaryKey'
[allowEditing]='col.allowEditing' [editType]='col.editType' [edit]='col.edit'>
</e-column>
}
</e-columns>
<ng-template #editSettingsTemplatelet-data>
<divngForm #orderForm="ngForm">
<tableclass="e-table e-inline-edit"cellspacing="0.25">
<colgroup>
@for (col of columns; track col)
{
@if(!col.isHidden)
{
<colstyle="width:120px;">
}
}
</colgroup>
<tbody>
<tr>
<td *ngFor="let col of gridDefinition.children"class='e-rowcell'>
@if(col.isVisible)
{
<app-numeric-box *ngIf="col.elementType==='NumericBox'" [data]="selectedLineItem"></app-numeric-box>
<app-text-box *ngIf="col.elementType==='TextBox'" [data]="selectedLineItem"></app-text-box>
<app-dropdown *ngIf="col.elementType==='DropDown'" [data]="selectedLineItem"></app-dropdown>
}
</td>
</tr>
</tbody>
</table>
</div>
</ng-template>
<ng-template #emptyRecordTemplate>
<divclass='emptyRecordTemplate'>
<imgsrc="./assets/img/grid/emptyRecordTemplate.svg"class="e-emptyRecord"alt="No record">
<span>No data available to display at the moment.</span>
</div>
</ng-template>
</ejs-grid>
</div>
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [
PageService,
ToolbarService,
EditService
],
encapsulation: ViewEncapsulation.None,
})
export class LineItemGridComponent implements OnInit {
@Input() uiDef!: UIObject;
@Input() lineItems!:OrderItem[]
constructor() {
}
@ViewChild('blgrid')
public blgrid?: GridComponent;
@ViewChild('orderForm')
public orderForm!: FormGroup;
title = 'bl-grid';
public rowMode: string = 'Vertical';
public pageSettings: Object = { pageCount: 4, pageSizes: true };
public toolbar!: Object[];
public toolbarOptions?: ToolbarItems[];
public editSettings?: EditSettingsModel;
gridDefinition!: UIObject;
public columns: any[] = []
selectedLineItem:OrderItem=new OrderItem()
ngOnInit(): void {
this.editSettings = { allowEditing: true,
allowAdding: true,
allowDeleting: true,
showConfirmDialog: false,
showDeleteConfirmDialog: true,
showAddNewRow :true,
newRowPosition: 'Top',
mode:'Normal' };
this.pageSettings = { pageCount: 5, pageSizes: true };
this.gridDefinition = this.uiDef.children.filter(x => x.elementType === 'Grid')[0];
this.columnPreProcessor();
}
columnPreProcessor() {
this.gridDefinition.children.forEach((col) => {
let row: any = {};
row.isPrimaryKey = false;
row.field = col.mapName;
row.headerText = col.elementCaption;
row.width = col.width;
row.isHidden = !col.isVisible;
row.allowEditing = col.isEnable;
if (col.elementType === 'DropDown') {
row.textAlign = 'Center';
row.editType = 'dropdownedit';
}
else if (col.elementType === 'NumericBox') {
row.textAlign = 'Right';
row.editType = 'numericedit';
}
else if (col.elementType === 'TextBox') {
row.textAlign = 'Left';
row.editType = 'stringedit';
}
this.columns.push(row);
});
}
}
the thing is I can not hardcode the grid. I have to render it dynamically. grid-column details coming with the uiDef object have included a property called children.it is also the UIObject type list, let me show you that class.
export class UIObject {
_internalElementName!: string
elementCaption!: string
elementID!: string
elementType!: string
defaultAccessPath!: string
defaultValue!: string
mapName!: string
elementKey!: number
parentKey!: number
width!: number
objectTypeKey!: number
isVisible!:boolean
isEnable!:boolean
children!: UIObject[]
//other properties
}
so I can get all the column details from the parent component and push those details to the columns list.
then need to get the data source also to the grid component. its type is OrderItem.
export class OrderItem{
orderKey: number=1;
orderDate!: Date;
orderNumber!: string;
documentNumber!: string;
yourRef!string;
approveState!: CodeBaseResponse;
}
I am passing the list of OrderItem to the grid component from the parent component. this is a sample JSON array for that list
[
{
"orderKey": 1390746,
"orderDate": "2024-04-16T00:00:00",
"orderNumber": "2901",
"documentNumber": "",
"yourReference": "",
"approveState": {
"codeKey": 1,
"code": "",
}
},
{
"orderKey": 1391272,
"orderDate": "2024-04-18T00:00:00",
"orderNumber": "2903",
"documentNumber": "",
"yourReference": "",
"approveState": {
"codeKey": 1,
"code": "",
}
},
]
Note
- I am using syncfusion "@syncfusion/ej2-angular-grids": "^25.1.35" version
- These uiDef and lineItems are both from the parent component and are remote data.
I have attached a screenshot of my grid. if data is not filled to the grid, it shows no data template. but I need to show the editable new row. Even though I added that showAddNewRow as true it is not working with this. if you want any other details ,please let me know.
Hi Buddhi,
We have reviewed the updated sample. In your application you are using dynamic column binding, but it lacks a primary key column. For editing actions, the Grid requires at least one column with a primary key enabled. In your application you have set the property isPrimaryKey to false for all the columns. You need to enable this for any one for the columns used in the Grid.
The use of ngModel in form elements facilitates two-way data binding, ensuring synchronization between form inputs and the component's data model. When a value is updated in the component, the data model reflects this change due to the ngModel binding. This data can then be accessed and saved to the Grid data during the Grid's actionBegin event.
In your application, components are dynamically rendered within the edit template as individual Angular components. The use of ngModel is restricted to the component level and is not integrated with the form data, leading to incorrect data rendering and updating within the Grid.
For additional details, please follow the steps below along with the provided example:
Sample: Ddhugg (forked) - StackBlitz
- When a record is initially added, orderData (data bound to form elements) is undefined.
- It is then initialized with edited data using args.rowData.
- Form elements will display the edited data as they are
bound with the ngModel value of orderData
- Upon editing records, the edited values update the corresponding orderData objects.
- These updates will reflect in the Grid data.
This suggests a flow for utilizing template-driven forms with the Syncfusion Grid component. Therefore, it is advised to update your application accordingly based on this guidance.
In response to your second query concerning the deletion of the record, we require some additional information. Kindly provide the following details:
1. Kindly provide detailed information regarding your specific requirements for record deletion within the Grid.
2. Please confirm if you intend to set the isActive property to 0 in the 'selectedLineItem' upon clicking the delete button, rather than removing the actual record. If yes, please describe the use case of this scenario.
3. Furthermore, clarify whether you prefer to display the deleted record in an inactive state within the Grid or to completely remove it from the Grid.
Regards
Aishwarya R
