mercredi 31 décembre 2014

Radio Buttons Require two Clicks to Show as Selected in Browser


This quirky behavior is happening inside a wizard page (single page style app). That being where the page is loaded once but one <div> is loaded multiple times with different partial pages. In order to trigger the two clicks needed behavior, the partial page containing the radio buttons must be loaded once (everything works) then user advances to the next page in the wizard and then goes back to the first page with the radio buttons (quirky behavior). Navigation is controlled by code outside the <div> and not the browser buttons.


The radio buttons are contained inside a kendoWindow control and inside that window there is one radio button per row in a kendoGrid control. The data for the grid is loaded from a data source in the mvvm javascript code. Here is the template for the grid rows and the grid.



<script type="text/x-kendo-template" id="grid-radio-template">
<input type="radio" name="service_location_radio" value="#=MasterId#" data-bind="checked: service_location, events: { change: service_location_click }"/>
</script>

<div id="ServiceLocationSearchGrid"
class="specify-service-location-section specify-service-location-field"
data-role="grid"
data-scrollable="true"
data-resizeable="true"
data-sortable="true"
data-bind="source: service_location_results, visible: ShowServiceLocationsSection, events: { dataBound: ServiceLocationSearchGridDataBound }"
data-auto-bind ="false"
data-pageable="true"
data-columns="[{ template: kendo.template($('#grid-radio-template').html()), width: 40 },
{ field: 'Designator', title: 'Designator(s)'}
]"></div>


As I mentioned, everything works fine on the first pass on the wizard page, however, if the user leaves and returns the radio buttons require two clicks to visually see the radio button is selected. I have debugged into both the change and click events. Everything inside the mvvm is working correctly, on the first click of the radio button, the events fire and the service_location property is updated correctly, but the radio buttons (all of them) are not selected. When I click a second time, all the events fire again, the exact same data shows in the mvvm and finally the ui shows the radio button is selected.


I have tried unbinding the mvvm, destroying the kendoWindow widget and deleting the variable (it is a property on another variable) when the user leaves the page, but to no avail. Everything is recreated when the user returns to this page.



kendo.unbind('#specify-service-location');

$('#specify-service-location').data('kendoWindow').destroy();

delete ScenarioManager.Location.ServiceLocationSearchModel;


There should not be anything left hanging around when the kendo window is displayed a second time, but I still think this may be a possibility given that this is a single page style app. Is there anything that I am missing as far as what needs to be removed or how things are removed from memory that could clear this up? Or have I missed something entirely?





Aucun commentaire:

Enregistrer un commentaire