Sometimes you need to edit a batch data requiring an agile UI that allow:
- Send changes without need confirmation
- Quickly Navigate to any field that you want edit
- Provide a visual indicator of the updated fields
An example: Realtime Weather Forecast Editor
On this example, the main requirement is allow quickly edit the cities temperatures at different day times. Basically for each city could edit the morning, afternoon or midnight temperature. For simplicity, the cities list are stored in a session variable.
This is a list of the implementation techniques for the app main features:
- Updates are sent back to the server when textboxes lost focus: using a KnockoutJs extender the temperature fields changes are captured and sent to server using ajax calls.
- Updated values are highlighted: a css binding changes the textbox background color after a field is updated successfully on server
- Key based navigation: a jQuery handler allow navigate between textboxes using the arrows keys
App Screenshot
Using a KnockoutJs extender to send the realtime updates
A new extender named "realtime" is added to the Knockout extenders. At the initialization, it stores in two private fields (cityId and dayTime) the values required to identify the time slot to be updated on the ajax call after the observable property value changes.
Also, a sub-observable (hasChanged) is used to notify the highlighter databinder.
ko.extenders.realtime = function(target, options) { // store private vars to use as parameters on updates // cityId: the key of entity to be updated // daytime: the field of entity to be updated (Morning/Afternoon/Midnight) target.cityId = options[0]; target.daytime = options[1]; //add a sub-observable to mantain a changed flag target.hasChanged = ko.observable(false); //define a function to send updates function update(newValue) { $.ajax({ url: "/home/updateforecast", data: { cityId: target.cityId, daytime: target.daytime, value: newValue }, type: "post", success: function(result) { if(result) target.hasChanged(true); } }); } //update whenever the value changes target.subscribe(update); //return the original value return target; };
Applying the extender
The extender is applied on the ForecastModel temperature fields
var model = @Html.Raw(new JavaScriptSerializer().Serialize(Model)); var viewModel = { forecasts : ko.observableArray(ko.utils.arrayMap(model, function(forecast) { return new ForecastModel(forecast); })) }; function ForecastModel(forecast) { this.City = ko.observable(forecast.City); // extend the observable fields that will be updated in realtime this.Morning = ko.observable(forecast.Morning).extend({realtime:[forecast.Id, "Morning"]}); this.Afternoon = ko.observable(forecast.Afternoon).extend({realtime:[forecast.Id, "Afternoon"]}); this.Midnight = ko.observable(forecast.Midnight).extend({realtime:[forecast.Id, "Midnight"]}); } ko.applyBindings(viewModel);
Configuring the View
A table (tblForecasts) is used to display the cities names and edit the different day times temperatures. On each temperature textbox the "value binding" is applied to each temperature field. Also, a "css binding" to the hasChanged sub-observable is applied in order to highlight the textbox background color when a change callback returns successfully from server.
<h1> Realtime Weather Forecast Editor</h1> <table id="tblForecasts"> <thead> <tr> <th> City </th> <th> Morning </th> <th> Afternoon </th> <th> Midnight </th> </tr> </thead> <tbody data-bind="template: { name: 'forecastRowTemplate', foreach: forecasts }"> </tbody> </table> <script type="text/html" id="forecastRowTemplate"> <tr> <td><span data-bind="text: City"/></td> <td><input data-bind="value: Morning, css: { hasChanged: Morning.hasChanged }"/></td> <td><input data-bind="value: Afternoon, css: { hasChanged: Afternoon.hasChanged }"/></td> <td><input data-bind="value: Midnight, css: { hasChanged: Midnight.hasChanged }"/></td> </tr> </script>
Adding keyboard navigation to table
A simple handler is attached to the textboxes keydown event to detect the arrows keys pressing and move focus
$("#tblForecasts").on("keydown", "input:text", function(e) { // detect arrows pressing if (e.keyCode < 37 || e.keyCode > 40) return; e.preventDefault(); var target; var cellAndRow = $(this).parents('td,tr'); var cellIndex = cellAndRow[0].cellIndex; var rowIndex = cellAndRow[1].rowIndex; switch (e.keyCode) { // left arrow case 37: cellIndex = cellIndex - 1; break; // right arrow case 39: cellIndex = cellIndex + 1; break; // up arrow case 40: rowIndex = rowIndex + 1; break; // down arrow case 38: rowIndex = rowIndex - 1; break; } target = $('table tr').eq(rowIndex).find('td').eq(cellIndex).find("input:text"); if (target != undefined) { target.focus(); target.select(); } });
Server side code
The Forecast Model
public class Forecast { public int Id { get; set; } public string City { get; set; } public int Morning { get; set; } public int Afternoon { get; set; } public int Midnight { get; set; } }
The Controller
Just contains the code to initialize the cities list on session and a method to update the temperatures
private const string C_ForecastModels = "ForecastModels"; // Expose the stored Forecasts from Session public IEnumerable<Forecast> ForecastModels { get { if (Session[C_ForecastModels] == null) { Session[C_ForecastModels] = new[] { new Forecast { Id=1, City="Barcelona", Morning=90, Afternoon=45, Midnight=40}, new Forecast { Id=2, City="Berlin", Morning=78, Afternoon=34, Midnight=0 }, new Forecast { Id=3, City="New York", Morning=45, Afternoon=35, Midnight=20 }, new Forecast { Id=4, City="Sydney", Morning=65, Afternoon=45, Midnight=40 }, new Forecast { Id=5, City="Tokio", Morning=74, Afternoon=70, Midnight=60 } }; } return Session[C_ForecastModels] as IEnumerable<Forecast>; } set { Session[C_ForecastModels] = value; } } public ActionResult Index() { // Return the Session stored Forecasts return View(ForecastModels); } // // Update Forecast value for selected daytime (Morning/Afternoon/Midnight) [HttpPost] public JsonResult Updateforecast(int cityId, string daytime, int value) { var cityForecast = ForecastModels.SingleOrDefault(forecastModel => forecastModel.Id == cityId); if (cityForecast == null) return Json(false); switch (daytime) { case "Morning": cityForecast.Morning = value; break; case "Afternoon": cityForecast.Afternoon = value; break; case "Midnight": cityForecast.Midnight = value; break; } return Json(true); }
Conclusion
This is a basic example to demonstrate the KnockoutJs extenders usage. The realtime edition on the grid and the keyboard navigation resembles the old DOS applications, but still is a powerful technique for some specific scenarios (I've worked in some projects on that this type of UI was explicitly required by the client or app end users).
Enjoy!
Enjoy!
Project files
Download source: jQuery Carousel in asp.net.rar (85Kb)
