Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: MVC Knockout
Hello friends,
 
I have dropdown with productID as value and productName as text.
 
My problem is when I select particular product from dropdown, it should get other details such as QuantityPerUnit, UnitPrice and UnitsInStock.
 
I want to perform using knockout.
 
I tried following for QuantityPerUnit:
<script>
    $(document).ready(function () {
        $('#divheader').append("<h2>Please place an order</h2>");
        $.ajax({
            type: "Post",
            url: "/Order/getData",
            data: {},
            success: function (data) {
 
                function ReservationsViewModel() {
                    var self = this;
 
                    self.orderList = ko.observableArray([
                        new orderReservation(data)
                    ]);
                    self.addOrder = function () {
                        self.orderList.push(new orderReservation(data));
                    }
                }
 
                function orderReservation(data) {
                    var self = this;
                    self.products = ko.observable(data);
                    self.QPU = ko.computed(function () {
                        return self.products().QuantityPerUnit
                    });
                }
 
                ko.applyBindings(new ReservationsViewModel());
            }
        });
    });
 
</script>
 
<table>
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Quantity/Unit</th>
            <th>Unit Price</th>
            <th>Unit in stock</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: orderList">
        <tr>
            <td>
                <select style="width:250px;" id="ddlProduct" data-bind="options: products, optionsValue: 'ProductID', optionsText: 'ProductName', optionsCaption: 'Choose...'"></select>
            </td>
            <td data-bind="text: QPU"></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<div>
    <button data-bind="click: addOrder">Reserve another order</button>
</div>
 
Dropdown is getting populated, but on change on dropdown QuantityPerUnit is not available
 
May i know where I'm going wrong.
 
Thanks in advance
Posted 20-Mar-13 2:58am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

you have to pass data in observable array like following
<script>
    $(document).ready(function () {
        $('#divheader').append("<h2>Please place an order</h2>");
        $.ajax({
            type: "Post",
            url: "/Order/getData",
            data: {},
            success: function (data) {
 
                function ReservationsViewModel() {
                    var self = this;
 
                    self.orderList = ko.observableArray([
                        new orderReservation(data)
                    ]);
                    self.addOrder = function () {
                        self.orderList.push(new orderReservation(data));
                    }
                }
 
                function orderReservation(data) {
                    var self = this;
                    self.products = ko.observableArray(data);
                    self.QPU = ko.computed(function () {
                        return self.products().QuantityPerUnit
                    });
                }
 
                ko.applyBindings(new ReservationsViewModel());
            }
        });
    });
 
</script>
 
<table>
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Quantity/Unit</th>
            <th>Unit Price</th>
            <th>Unit in stock</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: orderList">
        <tr>
            <td>
                <select style="width:250px;" id="ddlProduct" data-bind="options: products, optionsValue: 'ProductID', optionsText: 'ProductName', optionsCaption: 'Choose...'"></select>
            </td>
            <td data-bind="text: QPU"></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<div>
    <button data-bind="click: addOrder">Reserve another order</button>
</div></script>
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 386
1 Marcin Kozub 225
2 Sergey Alexandrovich Kryukov 215
3 /\jmot 189
4 Praneet Nadkar 173
0 OriginalGriff 8,289
1 Sergey Alexandrovich Kryukov 7,407
2 DamithSL 5,624
3 Maciej Los 4,989
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 29 Jun 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100