In my app there is a ListView which is initially set up in the onShow event of the view. The listView then renders and I use the afterShow event to colour lines which are "ticked". The user can touch a line to toggle that line from "ticked" to "unticked" and vice versa. Touching the line invokes a REST service (Progress Data Service) that updates the underlying back end database to change the status of the line. The page is then repainted by rebinding the ListView data source by artificially inducing the view on-Show event and so the new status of the touched line is shown. Here is the code of the on-Show event:
parent.set('onShow', function() {
dataProvider.loadCatalogs().then(function _catalogsLoaded() {
var customerCode = localStorage.getItem("customerCode");
var jsdoOptions = dataListViewModel.get('_jsdoOptions'),
jsdo = new progress.data.JSDO(jsdoOptions),
dataSourceOptions = dataListViewModel.get('_dataSourceOptions'),
dataSource;
dataSourceOptions.serverFiltering = true;
dataSourceOptions.filter = {
field: "Filter",
operator: "eq",
value: customerCode
};
dataSourceOptions.transport.jsdo = jsdo;
dataSource = new kendo.data.DataSource(dataSourceOptions);
dataListViewModel.set('dataSource', dataSource);
});
});
This is the code that repaints the data after the user has touched a line:
var refreshShow = app.dataListView.get('onShow');
// (side effect) the refreshShow then repaints the listView all white again
refreshShow();
However, when the onShow function is invoked in this way, the afterShow event does not fire. Instead, the page re-renders, redisplays the data and the special formatting of ticked lines does not happen. I cannot find any way to run the JQuery commands after the page has rendered again.
8 Answers, 1 is accepted
Since you are calling refreshShow as a method, the easiest way sounds to remove the afterShow event binding and simply call the afterShow handler as a method from inside refreshShow.
Is there a part of your loagic that won't work if you call the method this way, instead of waiting for the afterShow event?
Regards,
Tsvetina
Telerik
Rank 2
Hi Tsvetina, thanks for the reply. Since your post, I've been doing more experimentation with strange results.
First of all, I think I'd already tried your suggestion, if I've understood it correctly. The problem seems to be that when I induce the "onShow" event of the listView, the listView is not populated immediately, so the jQuery commands to change the colour execute BEFORE the listView is repainted. No doubt this is because the REST service is called asynchronously, and it is the callback method that repaints the listView.
I also tried viewing the page again, and this was very strange, because it worked perfectly the first time but thereafter refused to repaint the listView at all, even though the backend data was being correctly updated.
Ideally what I need is an event that is guaranteed to fire when the listView is repainted. I have tried the dataBound and dataBinding events of the list view but no joy. Is there a more generic event inherited from kendo.mobile.ui.Widget? Or can I override the callback method for the data source refresh?
Thanks for your help, much appreciated
Brian
The ListView databound event is the last one that fires after the ListView data is completely loaded. What were the results you got from it? The ListView wasn't completely rendered when you used this event?
You can also try the DataSource change event, it fires at the same time the ListView is populated with data. If it doesn't work, you can consider opening a support ticket and sending us your project, so we can take a look at the implementation.
Regards,
Tsvetina
Telerik
Rank 2
Hi Tsvetina
I tried the dataBound event and although that event fires, the listView does not render properly. I have some screen shots I can send you. In the DataSource change event, it looks as though this event is slightly too early, as the listView renders correctly but the JQuery command to change the colour of the ticked lines has no effect.
If you want to look at the project, it might be best if I create a simplified version of it just illustrating the issue
Regards
Brian
Another approach that you can try is to use bindings for the class name of the elements in the ListView items template that you use.
This way, the class name of the element will be assigned based on the value from the binding context and using these class names, you can define different styles.
If this doesn't work, preparing a sample project would be very helpful.
Regards,
Tsvetina
Telerik
Rank 2
Hi Tsvetina
Been busy on other things this week, so this is the first time I've been able to look at this again.
I think I might need a bit of help with this one. Here's the template for the listView:
<script type="text/x-kendo-template" id="dataListViewModelTemplate">
<div class="ShoppingListStyle">
<img data-role="button" data-click="onTickClick" id="tickButton" src="#: data['TickedGraphic'] #"> 
<h3>#: data['Ticked'] #</h3>
#: data['ItemDescription'] #
</div>
</script>
and here's the definition of the outer level of the listView:
<ul data-role="listview" data-style="inset" id="shoppingList"
data-template="dataListViewModelTemplate"
data-bind="{ source: dataListViewModel.dataSource}"
data-pull-to-refresh="false" data-endless-scroll="false">
</ul>
Here's the command I'm using at the moment to colour the lines (this is in the afterShow event of the page view):
$("#shoppingList li:contains('false')").css("background-color", "White");
$("#shoppingList li:contains('true')").css("background-color", "LightGrey");
So the li (which is the thing I want to change the colour on) doesn't have a div or span of its own, as it's generated from the listView template. The div called "ShoppingListStyle" is at too low a level - changing its background colour just changes the colour of the items within the li, not the li itself.
Once this is sorted out, is the data item called "Ticked" in the listView template (which is set to true or false) the item I should use to choose which class to select?
On another matter, did you send me the email from tpdogfood about the Mac desktop client? If so, I'm a bit puzzled. I think I have the latest version but I can't see the dual pane. Also, the option to see the developer tools in the simulator seems to have gone - it used to be an option on the View menu. If so, this is a step backwards, as I find this very useful
Many thanks, Brian
You can use negative margin to make the DIV color fill in the entire list item. Here is a sample:
<script type="text/x-kendo-template" id="contactsTemplate"> <div data-bind="css: {ShoppingListStyle: ticked}"> <a data-bind="text: name"></a> </div></script>.ShoppingListStyle { background-color: darkcyan;}.km-list li div.ShoppingListStyle { height: 2.2em; line-height: 2.2em; margin: -.5em -.7em; padding: 0 0.7em;}And indeed, Ticked should be the property that you should bind your CSS classes to.
As for the Telerik Platform feedback portal, it was my colleague who answered you there (reference for others who may read this thread). However, here are the answers to your questions from her:
With the latest release, we reworked the native menu - added new items and reorganized old ones. As a result, the toggle developer tools menu item was moved to the Help menu, under Troubleshooting. Its shortcut is still the same - Command+Alt+I, if you prefer to use shortcuts.
And, to open a second pane, right-click on the name of the file you are editing, and choose "Open in Right Pane". You can find this and all other new features described in detail in this blog post:
AppBuilder Universal Desktop Client—February 2016 Release
Regards,
Tsvetina
Telerik
Rank 2
Hi Tsvetina
That works a treat, thanks for your help
Regards
Brian