Add row data to grid Through angular code

[Sarvana]

I have a form which has a checkbox, textbox etc. I need to push the data when the user clicks on the add button, for eg, first name, last name, Age, gender. when the user clicks on the add button these four values should add to the synfusion grid automatically. again the user enters other record and clicks on the add button the new data should add to a grid with the existing data. How to achieve this any suggestion on this?

[Renjith Singh Rajendran]

Hi Sarvana, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suggest you to use the “addRecord” method of Grid. Please refer the code example below, 

<div class="control-section"> 

    <input id="EmployeeID" /> <input id="FirstName" /> <input type="checkbox" id="checkvalue" /> 

    <button id='btn' (click)='addRecord($event)'>AddRecord </button> 

    <ejs-grid #Grid id='Grid' [dataSource]='parentData' [editSettings]='editSettings' allowFiltering=true height=300> 

        ... 

   </ejs-grid> 

</div> 

 

export class HierarchyComponent implements OnInit { 

    ... 

   ngOnInit(): void { 

        ... 

        this.editSettings={allowAdding:true,allowEditing:true,allowDeleting:true},  

    } 

    addRecord(args:any){ 

      this.record= { EmployeeID:document.getElementById("EmployeeID").value, 

                     FirstName:document.getElementById("FirstName").value, 

                     Title:document.getElementById("checkvalue").checked  

                   }; 

      this.Grid.addRecord(this.record); //add a new record 

    } 

} 

Sample : https://plnkr.co/edit/tXbIdRzvsn8zNGbeQ2yw?p=preview 

In the above sample, we have get the data entered in the textboxes and checkboxes, and assign them to “this.record”. Later we have passed this data object as the argument to the “addRecord” method of Grid. 

Documentation : https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#addrecord 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Rechal]

Hi,

I have tried this ex but i got an error,

I have attached the file,plz do the needful.

I have tried HTMLINPUTELEMENT as value,but value not passing to grid,only empty rows added without value.

Thanks.

Attachment: error1_e29e44f.zip

[Balaji Sekar]

Hi Sarvana, 

 

We have analyzed your query with provided the information and we are tried to reproduce the reported problem in our end but it is unsuccessful. we have created a sample with your requirement as given below. 

 

Sample link: https://stackblitz.com/edit/angular-efjsmp-ulvs8d 

 

If you face sample problem, please reproduce the reported problem in above sample and share video demonstration of that problem to us that will help to validate further. 

 

Regards, 

Balaji Sekar