I am using the Syncfusion Bridge for an Aurelia application. The grid is defined below.
(report-demo.html)
<ej-grid id="demoGrid" e-data-source.bind="OrdersList" e-allow-paging=true>
<ej-column e-field="OrderID" e-header-text="Order ID" e-text-align="right" e-width="75" e-templateID="#columnTemplate">
<ej-template>
<a rel='nofollow' href="">${OrderID}</a>
</ej-template>
</ej-column>
<ej-column e-field="CustomerID" e-header-text="Customer ID" e-width="90"></ej-column>
<ej-column e-field="EmployeeID" e-header-text="Employee ID" e-text-align="right" e-width="90"></ej-column>
<ej-column e-field="Freight" e-header-text="Freight" e-format="{0:C2}" e-text-align="right" e-width="75"></ej-column>
<ej-column e-field="ShipCountry" e-header-text="Ship Country" e-width="100"></ej-column>
</ej-grid>
I'm using the example Javascript to load the data
export class ReportDemo {
constructor() {
this.OrdersList = ej.DataManager({ // eslint-disable-line new-cap
url: 'http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/'
});
}
The grid displays fine with the OrderID as a hyperlink.
I have a button that calls the following javascript code:
fetchResults(){
var newList = ej.DataManager({ // eslint-disable-line new-cap
url: 'http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/'
});
var grid = $("#demoGrid").data("ejGrid");
grid.dataSource(newList, true);
}
}
After the grid is refreshed, the OrderID does not display correctly.
The grid is positioned on Page 1.
Instead of displaying the OrderID value as a hyperlink it displays the following:
${OrderID}
If I goto page 2 it will display the the OrderID value as a hyperlink.
Please see the attached file.
The issue is the Template column does not display properly after updating the datasource on Page 1.
Please help. Thank you,
Steve
Attachment:
Grid_Issue_4b71b713.zip
