I am on JET version 3.2 and i am using a html table (not ojTable) to display the data in an array. I preferred using html table, as my requirement is to render the column headers as link, with a menu to be displayed on the click of the same, update the header with the item selected from the menu. This was easier to be implemented with a html table, so i went with it. Now my question is how do i display the text 'No data to display' when there are no rows in the array? The array will get updated everytime the user clciks on the header and chooses a different value.
I tried the following approach:
<table>
<thead>
<tr>
<th style="text-align: center;">
//code to display the column header as link
</th>
<th style="text-align: center;">
//code to display the column header as link
</th>
</tr>
</thead>
//displayData is a knockout observable maintained in the view model
//displayData is set to 'true' if the length of 'arrayData' is > 0, else its set to false
<div data-bind="if: displayData ">
<tbody data-bind="foreach: arrayData">
<tr>
<td style="text-align: center;" data-bind="text: sourceData"></td>
<td style="text-align: center;" data-bind="text: targetData"></td>
</tr>
</tbody>
</div>
<div data-bind="if: displayData ">
<tbody >
<tr>
<td style="text-align: center;" >No data to display</td>
<td style="text-align: center;" ></td>
</tr>
</tbody>
</div>
</table>
View Model Code:
self.arrayData = ko.observableArray();
self.arrayDataLength = ko.computed(function() {
return self.arrayData.length ;
});
self.displayData = ko.computed(function() {
if (self.arrayData.length > 0) return true;
else
return false;
});
This approach is currently not working completely, in the sense, initially when the page is loaded and there is no data in the array, only the 'No data to display' is displayed. But once i update the headers (by clicking on the header link and selecting a different item), the array gets populated, now the newly added rows into the array are dispalyed in the table, but the 'No data to display' text is not getting hidden, though i am controlling the display with a flag which is a knockout observable. Can someone please point out why?
I didnt want to have two tables, one for showing data and other for no data , as the header section is going to be the same and its not a hardcoded header, hence it would make the code redundant. Can someone please advise if this is a right approach or not?