Adding, Editing Rows and Validation in the treegrid
17 Replies
Hi Zachary,
Thanks for contacting syncfusion forum.
Query1: When I add a record my buttons lose their css style as the grid is updating then it is restored when the grid is updated. Is there a way to avoid this? |
By default, addRecord method with no parameter it will shows the empty row in editing state. If you don’t want to row in editing state, then you need to pass the parameter.Please refer to the below API documentation,https://ej2.syncfusion.com/documentation/api/treegrid/#addrecord | |
2) How can I programatically select a row to edit?I see celledit, but I can't seem to find something like that for row edit. |
We achieved your query by using the event and selectRow, startEdit method of the treegrid.
Please refer to the below code snippet,
Note: Using startEdit method the selected row is moved to edited state
Please refer to the below API documentation,
| |
3) How can I trigger validation on the textbox |
We checked this query, but we are unable to reproduce the issue at our end.Please refer to the below screenshot, Please refer to the below video demo,https://www.syncfusion.com/downloads/support/forum/169153/ze/validate-1497650720 | |
4) How can I trigger validation on the entire treegrid |
To achieve your requirement by using toolbar click event.
In toolbarClick event we have called the Tree Grid endEdit() method. If tree grid is in editable state, you can save a record by invoking endEdit. Before saving a record its validate the edited or added rowData and its display the error message when it does not meet the required condition in that validation function. Please refer the below code example
Please refer to the below API documentation,https://ej2.syncfusion.com/documentation/api/treegrid/#endedithttps://ej2.syncfusion.com/documentation/api/treegrid/#toolbarclick | |
5. Is it possible to add the child to the top spot instead of the last spot? |
Based on your query, we suggest you use the newRowPosition as ‘above’ and pass the index as first child index. Please refer to the below code example,
|
Please refer to the below sample,
Kindly get back to us for further assistance.
Regards,
Pon selva
Hi Zachary,
Thanks for update.
Query1: When you hit the button to add a row without parameters I'm still seeing the buttons briefly lose format even in the stackblitz. I've attached a screenshot.
We checked attached stackblitz sample, but we are unable to reproduce the issue at our end. Please refer to the below video demo,
Query: could you give me an example of how would I modify the cssClass="e-outline" style?
You can customize the appearance of the button by using the Cascading Style Sheets (CSS). Define the CSS according to your requirement, and assign the class name to the cssClass property.
In the following code snippet the background color, text color, height, width, and sharp corner of the button can be customized through the e-custom class.
|
…………………….
<e-column headerText="" width="100px" [allowEditing]="false">
<ng-template #template let-data>
<div *ngIf="data.hasChildRecords">
<button
ejs-button cssClass="e-custom" (click)="onAddChild($event)">
Add Child
</button>
</div>
</ng-template>
</e-column>
<e-column headerText="" width="100px" [allowEditing]="false">
<ng-template #template let-data>
<div>
<button ejs-button cssClass="e-custom" (click)="onDelete($event)">
Delete
</button>
</div>
</ng-template>
</e-column>
……………………………
App.component.css
.e-custom {
border-radius: 0;
height: 30px;
width: 80px;
}
.e-custom,
.e-custom:hover,
.e-custom:focus,
.e-custom:active {
background-color: #ff6e40;
color: #fff;
}
|
Please refer to the below sample,
Please refer to the below screenshot after adding the record,
Please refer to the below help documentation,
Kindly get back to us for further assistance.
Regards,
Pon selva
SIGN IN To post a reply.
