This is a migrated thread and some comments may be shown as answers.

RadTextBox and Knockout.js

4 Answers 98 Views
Input
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 2
Phil asked on 07 Oct 2012, 10:15 PM
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...

4 Answers, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 11 Oct 2012, 08:21 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Phil
Top achievements
Rank 2
answered on 11 Oct 2012, 01:19 PM
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?


0
Vasil
Telerik team
answered on 16 Oct 2012, 01:17 PM
Hi,

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

Kind regards,
Vasil
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Phil
Top achievements
Rank 2
answered on 28 Oct 2012, 04:14 PM
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

Tags
Input
Asked by
Phil
Top achievements
Rank 2
Answers by
Vasil
Telerik team
Phil
Top achievements
Rank 2
Share this question
or