I have a kendo ui listview with a template the conditionally hides elements based on the underlying data. An example would be as follows:
<script type="text/x-kendo-template" id="template">
<div class="product">
<img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
<div>
# if (Discontinued) { #
Discontinued Product
# } #
</div>
</div>
</script>
If i modify the underlying dataSource items to set Discontinued with the following code:
data[index].set('Discontinued', true);
If the index is the currently selected item then that item looses focus and is no longer selected.
Please see the following dojo example http://dojo.telerik.com/UlOze, select an item from the list and then set it to discontinued.
Has anybody found a solution / workaround for this issue ?
Thanks.
------------- FINAL SOLUTION --------------
Following on from dimodi's answer below I pieced together the solution.. For this to work the dataSource must have the schema -> model -> id property set.
1st capture the currently selected data item:
var selectedItem = $(listElement).find(".k-state-selected");
var selectedDataItem = list.dataItem(selectedItem);
2nd: After calling .set re-find the data item and set the k-state-selected class. This is nessesary as the list component is regenerating the uid's.
if (selectedDataItem) {
var newSelectedItem = list.dataSource.get(selectedDataItem.ProductID)
var uid = newSelectedItem.uid;
jQuery("[data-uid='" + uid + "']").addClass("k-state-selected");
}
I've updated the original dojo to show this solution, incase it helps someone else.
When a data item is changed, its corresponding ListView item is re-rendered to apply the changes. As a result, the selection is lost, as it is a purely visual feature that is not persisted across rebinds. You can check if an item is selected before using set() and then restore the selection manually by applying a k-state-selected class to the element afterwards.