Updating a TextBox control's binding targets as PropertyChanged (keydown) in LightSwitch HTML clients

Question

We're working with the Visual Studio LightSwitch HTML client and, in certain cases, we'd like to update the binding targets as the text is entered in the TextBox control rather than on the LostFocus of the control.

This would work in a similar fashion to using the XAML UpdateSourceTrigger.PropertyChanged rather than UpdateSourceTrigger.LostFocus.

What are the options/recommended methods for implement this?

Chris Cook · Accepted Answer · 2016-06-18T13:22:45.420

We ended up using the following code pattern to tackle this in a fashion suitable for our requirements: -

myapp.AddEditCustomer.Name_postRender = function (element, contentItem) {
    contentItem.dataBind("_view.isRendered", function (isRendered) {
        if (isRendered) {

            var tb = contentItem._view.underlyingControl;
            tb.getView().on("keyup", ".id-element", null, function (e) {
                tb.text = tb._textElement.val();
            });

            contentItem.dataBind("value", function (value) {
                // Use the toastr library from nuget (http://www.nuget.org/packages/toastr)
                // in order to display the value of the updated binding target 
                // and demonstrate that the update occurs on PropertyChanged 
                toastr.info("value [" + value + "]"); 
            });
        }
    });
};

By utilising a keyup handler (added against the underlying text box control's input element) this approach forces the binding target to update once the key is released. The keyup handler is attached once the text box control has finished rendering.

The above example uses the excellent toastr JavaScript library (codeseven.github.io/toastr) which can be installed in Visual Studio using the associated NuGet package (toastr).

Updating a TextBox control's binding targets as PropertyChanged (keydown) in LightSwitch HTML clients

1 Answers1