Knockout Tutorial #2

[Phil]

Hi:

I am trying to convert the Knockout tutorial #2 to Kendo MVVM.  Learn knockout Tutorial Collections
Not doing well.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Tutorial2_4.aspx.cs" Inherits="KnockoutApp.Tutorials.Tutorial2_3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

<style type="text/css">

    .deleteLink

    {

        color: red;

        font-weight: bold;

    }

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <!-- -->

    <div id="mvvmRegion">

        <h2>Your seat reservations (<span data-bind="text: seats.length" ></span>)</h2>

        <button id="addSeatButton" data-bind="click: addSeat">Reserve another seat</button>

        <div style="width: 600px;">

        <table id="reservationTable">

            <thead><tr>

                <th data-field="name" style="width: 160px;">Passenger name</th>

                <th data-field="meal.mealName" style="width: 160px;">Meal</th>

                <th data-field="meal.price" style="width: 100px;">Surcharge</th>

                <th> </th>

            </tr></thead>

            <tbody>

            </tbody>

        </table>

        </div>

        <h3 data-bind="visible: surcharge">

            Total surcharge: $<span data-bind="text: totalSurcharge00"></span>

        </h3>

    </div>

<script id="reservationTemplate" type="text/x-kendo-template">

<tr>

    <td style="width: 160px;"><input id="nameTextBox" value="#= name #" data-bind="value: seats.name" /></td>

    <td style="width: 160px;"><input id="mealDropDown" class="mealDropDownClass" value="#= meal.mealName #" data-bind="value: seats.meal.mealName" /></td>

    <td style="width: 100px;">#= meal.price #</td>

    <td><a href="" class="deleteLink">Remove</a></td>

</tr>

</script>

    <script type="text/javascript">

        // Class to represent a row in the seat reservations grid

        function SeatReservation(fname, initialMeal) {

            var self = this;

            self.name = fname;

            self.meal = initialMeal;

        }

        //

        var availableMeals = [

            { mealName: "Standard (sandwich)", price: 0.0 },

            { mealName: "Premium (lobster)", price: 34.95 },

            { mealName: "Ultimate (whole zebra)", price: 290.0 }

        ];

        //

        var viewModel = kendo.observable({

            // type array populates the drop down

            meals: availableMeals,

            // array will hold the grid values

            seats: [

            new SeatReservation("Steve", availableMeals[1]),

            new SeatReservation("Bert", availableMeals[0])

            ],

            // Computed data

            totalSurcharge: function () {

                var total = 0;

                for (var i = 0; i < this.get("seats").length; i++)

                    total += this.get("seats")[i].meal.price;

                return total + 0.00;

            },

            totalSurcharge00: function () {

                var total = this.totalSurcharge() + 0.00;

                return total.toFixed(2);

            },

            surcharge: function () {

                var total = this.totalSurcharge() + 0.00;

                if (total > 0) return true;

                return false;

            },

            //

            maxSeating: function () {

                if (this.seats.length < 5) return true;

                return false;

            },

            // seats.length < 5

            // event execute on click of add button

            addSeat: function (e) {

                // add the items to the array of expenses

                this.get("seats").push(new SeatReservation("", self.availableMeals[1]));

                return false;

            },

            removeSeat: function (seat) {

                var seats = this.get("seats");

                seats.splice(seats.indexOf(seat), 1);

            }

        });

        // apply the bindings

        kendo.bind($("#mvvmRegion"), viewModel);

        //

        var reservationDataSource = new kendo.data.DataSource({

            data: viewModel.get("seats"),

            schema: {

                model: {

                    id: "name",

                    fields: {

                        // data type of the field {Number|String|Boolean|Date} default is String

                        name: { type: "String" },

                        meal: {

                            mealName: { type: "String" },

                            price: { type: "Numeric" }

                        }

                    }

                }

            }

        });

        //

        $("#reservationTable").kendoGrid({

            dataSource: reservationDataSource,

            rowTemplate: kendo.template($("#reservationTemplate").html()),

            dataBound: function (e) {

                $(".deleteLink").click(function (e) {

                    e.preventDefault();

                    if (confirm("Do you what to delete this?")) {

                        var grid = $("#reservationTable").data("kendoGrid");

                        var dataItem = grid.dataItem($(this).closest("tr"));

                        viewModel.removeSeat(dataItem);

                    }

                    return false;

                });

            }

        });

        $(".mealDropDownClass").kendoDropDownList({

            dataTextField: "mealName",

            dataValueField: "mealName",

            dataSource: availableMeals

        });

        //

    </script>

</asp:Content>

Problem is the binding is not happening and the dropdown loses it's dropdownlist on add or remove. 

Note: Kendo does not seem to have the calculated (logical) binding like Knockout does for visible and enabled.

Phil

[Phil]

Hi:

I have gotten the following logical to work:

<h3 data-bind="visible: totalSurcharge() > 0">

    Total surcharge: $<span data-bind="text: totalSurcharge00()"></span>

</h3>

Phil

[Phil]

Hi:
I have come to the conclusion that MVVM does not support data-bind (update) of arrays such as in Knockout tutorial #2.
Phil

[Alexander Valchev]

Hi Phillip,

Actually KendoUI supports binding to arrays. A similar to your scenario can be accomplished through the source and template binding. Here is an example:

• http://jsbin.com/ibojet/2/edit
  
  

Please note that Kendo MVVM bindings are not JavaScript. This means that in order to display the meal's name and price you have to use functions in the View-Model.

For more information please check the MVVM help topics which could be found in the documentation.

Kind regards,
Alexander Valchev
the Telerik team

[Phil]

Hi:

I am very familiar with the Source and Template Binding.  The data binding in Kockout supports binding to an array of classes.  Changes to an element in a class is handled by the Knockout model.  The Knockout model knows that elements in the in the array of structures has changed and is updated.  In all of the api for observablearray, the arrays are of simple types.  No demo that I have found seem to support an array of classes/structure.  I think that is because MVVM does not currently support it.  MVVM binds the adding and removing of elements of the array.
This is the tutorial #2:

<!DOCTYPE html>

<html>

<head>

    <title>Knockout Tutorial 2</title>

    <script type="text/javascript" src="../Scripts/knockout-2.1.0.js"></script>

</head>

<body>

    <!-- learn.knockoutjs.com -->

    <h2>Your seat reservations (<span data-bind="text: seats().length" ></span>)</h2>

    <button data-bind="click: addSeat, enable: seats().length < 5">Reserve another seat</button>

    <table>

        <thead><tr>

            <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>

        </tr></thead>

        <tbody data-bind="foreach: seats">

            <tr>

                <td><input data-bind="value: name" /></td>

                <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>

                <td data-bind="text: formattedPrice"></td>

                <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>

            </tr>  

        </tbody>

    </table>

    <h3 data-bind="visible: totalSurcharge() > 0">

        Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>

    </h3>

    <script type="text/javascript">

        // Class to represent a row in the seat reservations grid

        function SeatReservation(name, initialMeal) {

            var self = this;

            self.name = name;

            self.meal = ko.observable(initialMeal);

            self.formattedPrice = ko.computed(function () {

                var price = self.meal().price;

                return price ? "$" + price.toFixed(2) : "None";

            });

        }

        // Overall viewmodel for this screen, along with initial state

        function ReservationsViewModel() {

            var self = this;

            // Non-editable catalog data - would come from the server

            self.availableMeals = [

                { mealName: "Standard (sandwich)", price: 0 },

                { mealName: "Premium (lobster)", price: 34.95 },

                { mealName: "Ultimate (whole zebra)", price: 290 }

            ];

            // Editable data

            self.seats = ko.observableArray([

                new SeatReservation("Steve", self.availableMeals[0]),

                new SeatReservation("Bert", self.availableMeals[0])

            ]);

            // Computed data

            self.totalSurcharge = ko.computed(function () {

                var total = 0;

                for (var i = 0; i < self.seats().length; i++)

                    total += self.seats()[i].meal().price;

                return total;

            });

            // Operations

            self.addSeat = function () {

                self.seats.push(new SeatReservation("", self.availableMeals[0]));

            }

            self.removeSeat = function (seat) { self.seats.remove(seat) }

        }

        ko.applyBindings(new ReservationsViewModel());

    </script>

</body>

</html>

Phil

[Florian]

Phil,

what's your conclusion? Using MMVC from kendo or Knockout?
I am having problems with the kendo MMVC and have to make a decision...

Thanks
Florian

[Phil]

Hi:

One of my funtions at the company that I work at is Lead Technologist.  I set directions.  Late in 2008, I got the company to buy Telerik Suite.  I am re-evaluating that at this time and Telerik has not sold me.  First the information on the produce is not rich. They do have the Dojo for learning, but that is very elementary.  The demos and examples have not for me given me a clear understanding of the entire Kendo UI product.  For example, this post.  Telerik seem to be in denial that it needs some improvement.

If you want free, go with Knockout, jQueryUI with extra styling with Twitter Bootstrap.  Kendo UI is not free, but it is integrated and some support.  I have not made up my mind yet.

Phil

[Florian]

Hi Phil,

thanks for your reply! It's very valuable to me.

Your opinion supports my impression. There are improvements missing. And the documentation is extremly unstructured and makes finding information very time-consuming.

Greetings from Austria
Florian

[Alexander Valchev]

Hi guys,

MVVM binding to nested arrays is supported. Here is a very basic example: http://jsbin.com/ezicuh/2/edit

I believe that the main confusion comes from the fact that Kendo MVVM bindings are not JavaScript. This pattern is documented and we do not have a plans to change it. If you insist to use Kendo with KnockoutJS you may take a look at this project. Please have in mind that this library is not our product and any questions related to it are not covered by the support service.

Regards,
Alexander Valchev
the Telerik team

[Phil]

Hi:
Wow this mostly works!  When I tab off of the last field it does not update the span tag.

@{

    ViewBag.Title = "Array Binding with Template";

}

<h2>ArrayBinding</h2>

<div id="example" data-template="tmp" data-bind="source: mySource"></div>

<script id="tmp" type="text/x-kendo-template">

    <div class="item">

        <input data-bind="value: data.name" class="k-textbox k-input" /> <input type="numeric" data-bind="value: data.age" class="k-textbox k-input" />

        <span data-bind="text: item"></span> <span data-bind="text: data.name"></span>,  <span data-bind="text: data.age"></span>

    </div>

</script>

<script type="text/javascript">

    var viewModel = kendo.observable({

        mySource: [

            {   item: "Item1",

                data: { name: "Name1", age: "33" } },

            {   item: "Item2",

                data: { name: "Name2", age: "43" } }

        ]

    });

    kendo.bind($("#example"), viewModel);

</script>

Phil

[Phil]

Hey Florian:

It just hit me.  The Kendo product is so big that Telerik has teams that handle a specific area.  So, you have a DataSource person that doesn't have grid experience, so they use div and span tags.  The same for MVVM specialist does the same.  So, the fragmentation of Telerik is confusing and not giving a clear view of the produce.

Hey, Telerik you need cross training in your own produce.

Phil

[Phil]

Hi:

I have gotten a grid to work with http://jsbin.com/ezicuh/7/edit, which uses a not release version of 2012.3.1024.  I have the latest Kendo UI 2012.2.913 which does not seem to work.

Phil

[Florian]

Hey Phil,

your are definitely right! My experience is that the quality of technical answers depends on the Telerik person responible.

You find a drastical sample here: http://www.kendoui.com/forums/ui/dropdownlist/accessing-check-box-template-from-inside-dropdownlist.aspx

A user asks if the Telerik library supports a specific use case. Telerik says no. And somebody from our community publishes sample code with the solution! That's really a shame...

Florian

[Phil]

Hi:
I have some crow to eat, maybe ...
The problem is not versions.  I normally browse the internet with FF, but my default browser is IE 9.  So, when I click on an item on the web I am using FF.  When I run a web project IE is launched.  So the problem is browser (the most used browser in the States).
Phil