SyncFusion EJ2 Load Data from HTML Table

[NAVEEN RAAJU]

Hi,

 We are in process of migrating all Jquery DataTables in our J2EE application to Syncfusion EJ2 Grid.  I checked that in EJ1, there is an option to load data from a HTML table - https://help.syncfusion.com/js/grid/data-binding.  However , in EJ2 i don't see this feature in the documentation.

  Can you please let us know if this feature exists in EJ2 ? If not , can you please guide on the best approach or closest one to load data from HTML table instead of rewriting from the scratch.

[NAVEEN RAAJU]

Any update on this ?

[Rajapandiyan Settu]

Hi NAVEEN, 

 

Greetings from Syncfusion support. 

 

Query: can you please guide on the best approach or closest one to load data from HTML table instead of rewriting from the scratch. 

 

We have validated your requirement and you can convert the HTML table to EJ2 Grid by using the following the following solution.  Please find the code example and sample for your reference. 

 

[code example] 

 

let grid: Grid = new Grid({ 

  load: function(args) { 

    let tbl = document.getElementById("Table1"); 

    let data = tableToJson(tbl); 

    grid.dataSource = data; 

  } 

}); 

grid.appendTo("#Grid"); 

 

function tableToJson(table) { 

  var data = []; 

  let th = table.tHead.querySelectorAll("th"); 

  let trs = table.tBodies[0].rows; 

  for (let i = 0; i < trs.length; i++) { 

    let obj = {}; 

    let tds = trs[i].children; 

    for (let j = 0; j < th.length; j++) { 

      obj[th[j].textContent] = tds[j].textContent; 

    } 

    data.push(obj); 

  } 

  return data; 

} 

 

 

In the above code example, we have converted the html table data into JSON structure and bind this JSON data to the Grid in its load event. 

 

Doc  : https://ej2.syncfusion.com/javascript/documentation/api/grid/#load  

  

Sample: https://rycycn-yxyfic.stackblitz.io/ 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S

[NAVEEN RAAJU]

Thanks much for the assistance. Let me try this and get back if i am stuck.

[Rajapandiyan Settu]

Hi NAVEEN, 

 

We will wait to hear from you. 

 

Regards, 

Rajapandiyan S