kendo-uikendo-datasourcekendo-templatekendo-listview

Kendo ui list view losing focus when changing data


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.


Solution

  • 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.