RadTextBox and Knockout.js

[Phil]

Hi:

I have gone through the tutorials on the Knockout.js web-site.  I am now converting them to classic asp.net (sans mvc).
Using the ms asp:TextBox, the sample (tutorial #1) converted without a problem, but I am having a problem with telerik:RadTextBox controls.  So, with telerik if I just tab through the knockout bound value is lost and the control is empty.
In my master page:

<telerik:RadScriptManager ID="knockoutAppScriptManager" runat="server">
    <Scripts>
        <asp:ScriptReference Path="Scripts/jquery-1.5.1.js" />
        <asp:ScriptReference Path="Scripts/knockout-2.1.0.js" />
    </Scripts>
</telerik:RadScriptManager>

Standard MS asp controls.

<%@ Page Title="Knockout | Tutorial #1" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Tutorial1.aspx.cs" Inherits="KnockoutApp.Tutorials.Tutorial1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <!-- learn.knockoutjs.com -->
    <p>First name: <strong><asp:Label ID="firstNameLabel" runat="server" data-bind="text: firstName" /></strong></p>
    <p> Last name: <strong><asp:Label ID="lastNameLabel" runat="server" data-bind="text: lastName" /></strong></p>
    <p> Full name: <strong><asp:Label ID="fullNameLabel" runat="server" data-bind="text: fullName" /></strong></p>
    <p>First name: <asp:TextBox ID="firstNameTextBox" runat="server" data-bind="value: firstName" /></p>
    <p> Last name: <asp:TextBox ID="lastNameTextBox" runat="server" data-bind="value: lastName" /></p>
    <asp:Button ID="Button1" runat="server" Text="Go caps" data-bind="click: capitalizeLastName" />
    <!-- js code -->
    <script type="text/javascript">
        function AppViewModel() {
            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");
            this.fullName = ko.computed(function () {
                return this.firstName() + " " + this.lastName();
            }, this);
            this.capitalizeLastName = function () {
                var currentVal = this.lastName();   // Read the current value
                this.lastName(currentVal.toUpperCase()); // Write back a modified value
            };
        }
        // Activates knockout.js
        ko.applyBindings(new AppViewModel());
    </script>
    <!-- end of content -->
</asp:Content>

My RadTextBox:

<%@ Page Title="Knockout | Tutorial #1" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Tutorial1Rad.aspx.cs" Inherits="KnockoutApp.Tutorials.Tutorial1Rad" %>
<%@ Register TagPrefix="Telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <!-- learn.knockoutjs.com -->
    <p>First name: <strong><asp:Label ID="firstNameLabel" runat="server" data-bind="text: firstName" /></strong></p>
    <p> Last name: <strong><asp:Label ID="lastNameLabel" runat="server" data-bind="text: lastName" /></strong></p>
    <p> Full name: <strong><asp:Label ID="fullNameLabel" runat="server" data-bind="text: fullName" /></strong></p>

    <p>First name: <telerik:RadTextBox ID="firstNameTextBox" runat="server" data-bind="text: firstName" /></p>
    <p> Last name: <telerik:RadTextBox ID="lastNameTextBox" runat="server" data-bind="text: lastName" /></p>
    <asp:Button ID="Button1" runat="server" Text="Go caps" data-bind="click: capitalizeLastName" />
    <!-- js code -->
    <script type="text/javascript">
        function AppViewModel() {
            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");
            this.fullName = ko.computed(function () {
                return this.firstName() + " " + this.lastName();
            }, this);
            this.capitalizeLastName = function () {
                var currentVal = this.lastName();   // Read the current value
                this.lastName(currentVal.toUpperCase()); // Write back a modified value
            };
        }
        // Activates knockout.js
        ko.applyBindings(new AppViewModel());
    </script>
    <!-- end of content -->
</asp:Content>

I have tried both data-bind="text: firstName" anddata-bind="value: firstName"

Phil
I tried to attach a zip but it would not accept a zip...

[Vasil]

Hi Phil,

The asp:TextBox does render only an input HTML element in the page and does not have any client side JavaScript object with custom functionality.
On the other hand the RadTextBox has way more complex structure. It stores additional values for empty message, different formats for values, different styles that are applied dynamically. This is the reason we can not guarantee to be compatible with other third party controls and libraries. The Knockout is changing the value of the input element visible in the page, but does not change the internal values kept in the client side object of the input, and this is the reason it remains empty on server after the submit.

Kind regards,
Vasil
the Telerik team

[Phil]

Hi Vasil:

Thank-you, for your response, it was quite helpful.

The initial states of the control seem to be the problem.  If I place the value in the Rad-control I have the opposite effect, visually the control has no value, but as I tab through the text-boxes then it is in sync.  So, it seems that it might still work with some extra glue.  For example could one use the ClientEvents-OnLoad event to sync the two worlds.

Phil

PS: Can the Kendo UI MVVM be used?

[Vasil]

Hi,

As we continued our conversation in the support thread, I will close this forum now.

Kind regards,
Vasil
the Telerik team

[Phil]

Hi All:

Rad-controls have a visual component (span tag) and a data component (input tag), so working with Knockout will be nearly impossible.

In short the RadInputManager works with the asp:TextBox control and works OK with Knockout js, but lacks dropdown support, so it falls quite short for working for production requirements.

Phil