RadTextBox and Knockout.js

5 posts, 0 answers
  1. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 07 Oct 2012 Link to this post

    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...
  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 11 Oct 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 11 Oct 2012 Link to this post

    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?


  5. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 16 Oct 2012 Link to this post

    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.
  6. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 28 Oct 2012 Link to this post

    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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017