Call typescript function on button onclick event in SPFx(No Javascript Framework)

Question

I am having trouble in calling typescript method on button click in SPFx with no JavaScript framework.

for Example:

private _renderListCustomer(items:ISPListCustomerItem[]):void{

   let html:string=`<table width='100%' border=1 id="tblEmployees" class="table">`;

   html+=`<thead>

          <th scope="col">Customer Id</th>

          <th scope="col">Name</th>

          <th scope="col">Address</th>

          <th scope="col">Type</th>

          <th scope="col">Update</th>

       </thead><tbody>`;

debugger;

type NewType = ISPListCustomerItem;

items.forEach((item:NewType)=>

{

html+= `<tr>

          <td>${item.CustomerID}</td>

          <td>${item.CustomerName}</td>

          <td>${item.CustomerAddress}</td>

          <td>${item.CustomerType}</td>

          <td><button id="${item.ID}" item-id="${item.ID}" type="submit" class="update btn btn-primary" data-toggle="modal" onClick=${this.BindItem(item.ID)} data-target="#DivUpdateItem">Update</button></td>

        </tr>`;

});



html+=`</tbody></table>`;

const listContainer:Element=this.domElement.querySelector("#spListContainer");

listContainer.innerHTML=html;

}

Method to called 


// Id:number

public BindItem(id:number):void{

pnp.sp.web.lists.getByTitle("Customers").items.getById(id).select("*,CustType/Id,CustType/CType").expand("CustType").get().

then((item:ISPListCustomerItem)=>{console.log(item); 

   document.getElementById('txtTitleUpdate')["value"]=item.Title ,

   document.getElementById('txtCustomerIDUpdate')["value"]=item.CustomerID,

   document.getElementById('txtCustomerAddressUpdate')["value"]=item.CustomerAddress,

   document.getElementById('txtCustomerNameUpdate')["value"]=item.CustomerName,

   document.getElementById('txtCustomerTypeUpdate')["value"]=item.CustomerType,

   document.getElementById('ddlCustTypeUpdate')["value"]=item.CustType.ID}).

 catch((error)=>{ alert(error); error; })

}

But method is not getting called on button click.

Any help would be appreciated, thanks in advance.

Answer 1

Try the code below: (Not a good practice to repeat loops but it was the only thing working for me)

private _renderListCustomer(items:ISPListCustomerItem[]):void{

    let html:string=`<table width='100%' border=1 id="tblEmployees" class="table">`;

    html+=`<thead>

      <th scope="col">Customer Id</th>

      <th scope="col">Name</th>

      <th scope="col">Address</th>

      <th scope="col">Type</th>

      <th scope="col">Update</th>

   </thead><tbody>`;

    debugger;

    type NewType = ISPListCustomerItem;

    items.forEach((item:NewType)=>

    {

    html+= `<tr>

          <td>${item.CustomerID}</td>

          <td>${item.CustomerName}</td>

          <td>${item.CustomerAddress}</td>

          <td>${item.CustomerType}</td>

          <td><button id="btn${item.ID}" item-id="${item.ID}" type="submit" class="update btn btn-primary" data-toggle="modal" data-target="#DivUpdateItem">Update</button></td>

        </tr>`;

    });



    html+=`</tbody></table>`;

    const listContainer:Element=this.domElement.querySelector("#spListContainer");

    listContainer.innerHTML=html;

    this._setButtonEventHandlers(items);
}

//Method to called 


// Id:number

public BindItem(id:number):void{ pnp.sp.web.lists.getByTitle("Customers").items.getById(id).select("*,CustType/Id,CustType/CType").expand("CustType").get().

then((item:ISPListCustomerItem)=>{console.log(item); 

   document.getElementById('txtTitleUpdate')["value"]=item.Title ,

   document.getElementById('txtCustomerIDUpdate')["value"]=item.CustomerID,

   document.getElementById('txtCustomerAddressUpdate')["value"]=item.CustomerAddress,

   document.getElementById('txtCustomerNameUpdate')["value"]=item.CustomerName,

   document.getElementById('txtCustomerTypeUpdate')["value"]=item.CustomerType,

   document.getElementById('ddlCustTypeUpdate')["value"]=item.CustType.ID}).

catch((error)=>{ alert(error); error; })

}

//function to bind on click event
private _setButtonEventHandlers(items): void {  
    const webPart: SpfxNoJswpWebPart = this; //replace SpfxNoJswpWebPart with your webpart class name
    items.forEach((item)=>{
    this.domElement.querySelector('#btn'+item).addEventListener('click', () => {  
        this.BindItem(item.ID);    
      }); 
    });
}

Answer 2

This might be a better approach to add event listener in a single loop.

private _renderListCustomer(items:ISPListCustomerItem[]):void{
  let html:string=`<table width='100%' border=1 id="tblEmployees" class="table">`;
  html+=`<thead>
            <th scope="col">Customer Id</th>
            <th scope="col">Name</th>
            <th scope="col">Address</th>
            <th scope="col">Type</th>
            <th scope="col">CustType</th>
            <th scope="col">Select To Delete</th>
            <th scope="col">Update</th>
         </thead>
          <tbody id="tblEmployeesBody">
          </tbody>
        </table>`
  const listContainer:Element=this.domElement.querySelector("#spListContainer");
  listContainer.innerHTML=html;
  type NewType = ISPListCustomerItem;

  var i=0;
  items.forEach((item:NewType)=>
  {
      html='';
      html+= `<tr>
                <td>${item.CustomerID}</td>
                <td>${item.CustomerName}</td>
                <td>${item.CustomerAddress}</td>
                <td>${item.CustomerType}</td>
                <td>${item.CustType?item.CustType.CType:""}</td>
                <td><input type="checkbox" id="${item.ID}"/></td>
                <td><button id="btn${item.ID}" item-id="btn${item.ID}" type="button" class="update btn btn-primary" data-toggle="modal"  data-target="#DivUpdateItem">Update</button></td>
              </tr>`;
      const tbody:HTMLTableElement  =this.domElement.querySelector("#tblEmployeesBody");
      let row = tbody.insertRow(i);
      row.innerHTML=html;
      i++;
      this._setButtonEventHandlers(item);
  });
 }

 private _setButtonEventHandlers(item:ISPListCustomerItem): void {  
  //const webPart: GetListItemsWebPart = this; //replace SpfxNoJswpWebPart with your webpart class name
  type NewType = ISPListCustomerItem;
  this.domElement.querySelector("#btn"+item.ID).addEventListener('click', () => {  
      this.BindItem(item.ID);    
    }); 
}