I’m trying to use rowdetails inside a grid that is using the Knockout data bindings.
The grid is set up with this:
rowdetails: true,
rowdetailstemplate: {
rowdetails: '<div>Row Details</div>',
rowdetailsheight: 50,
rowdetailshidden: true
},
initrowdetails: function (index, parentElement, gridElement, datarecord) {
$root.LoadRowDetails(datarecord);
var details = $($(parentElement).children()[0]);
details.html(GetRowDetailsHtml());
},
and I’m defining a row detail template for knockout to bind:
<div id="rowDetailsContainer" data-bind="template: {name: 'rowDetails-template' }"></div>
and here’s the HTML template:
<script type="text/html" id="rowDetails-template">
<ul data-bind="foreach: NetSuiteCases">
<li>
<span data-bind="text: CaseNumber"></span>
</li>
</ul>
</script>
and I’m just setting the HTML from the template binding into the details:
var GetRowDetailsHtml = function () {
return $("#rowDetailsContainer").html();
};
The bindings sort of work, but the details on display are always for the last item I clicked prior to current, not the current. I’m sure it’s an async thing, but it seems like with those fields being bound, that the data should be up to date in the UI, not tied to the last item I clicked.
Do you have any documentation or examples showing using rowdetails in Knockout?