Can the add button display in the grid record's bottom line ?

[lorryl]

Hi,

I want to add a button always in the grid record's bottom line, follow the bellow picture:

Can you do it ?

[Ajith Govarthan]

Hi lorryl, 

 

Thanks for contacting Syncfusion support. 

 

Query: I want to add a button always in the grid record's bottom line, follow the bellow picture:Can you do it ? 

 

Based on your query you want to add button at the bottom of the content rows and need to perform the add operation. So, we have prepared sample and in that sample we have added the button at the end of the content rows using the dataBound event.  

 

For your convenience we have attached the sample so please refer the sample for your reference. 

 

Code Example: 

App.component.ts 

 

  dataBound() { 

    let buttonEle = document.createElement("button"); 

    buttonEle.innerText = "Add Record"; 

    addClass([buttonEle], ["e-btn", "e-add", "e-icons"]); // add classList here 

    buttonEle.addEventListener("click", this.buttonClick.bind(this));   

    this.grid.getContent().appendChild(buttonEle);  // append the button element to the content. 

  } 

 

  buttonClick(e) { 

    this.grid.addRecord(); 

  } 

 

Sample Link: https://stackblitz.com/edit/angular-uxcuw7-jw2zkq?file=app.component.ts 

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G. 

 

 

[lorryl]

Hi,

Thanks for your reply. Can you put the button in the red places? The button is so far for user to add now.

[Ajith Govarthan]

Hi lorryl, 

 

Sorry for the inconveniences caused. 

 

Query: Thanks for your reply. Can you put the button in the red places? The button is so far for user to add now. 

 

Based on your query you want to add the add button at the bottom of the content rows and need to perform the add operation. So, we have prepared sample and in that sample, we have added the button at the end of the content rows instead of content div element using the dataBound event.   

  

For your convenience we have attached the sample so please refer the sample for your reference. 

 

Code Example: 

App.component.ts 

 

  dataBound() { 

    if (this.grid.getContentTable().querySelector("#CustBtn")) { 

      this.grid .getContentTable().querySelector("#CustBtn").remove(); 

    } 

    let buttonEle = document.createElement("button"); 

    buttonEle.innerText = "Add Record"; 

    buttonEle.id = "CustBtn"; 

    addClass([buttonEle], ["e-btn", "e-add", "e-icons"]); 

    buttonEle.addEventListener("click", this.buttonClick.bind(this)); 

    this.grid.getContentTable().appendChild(buttonEle); 

  } 

 

 

Sample Link: https://stackblitz.com/edit/angular-uxcuw7-t4hjwj?file=app.component.ts 

 

Please get back to us if you need further assistance.  

  

Regards,  

Ajith G.