Update WCF

2 posts, 0 answers
  1. Dan
    Dan avatar
    1 posts
    Member since:
    Jun 2013

    Posted 05 Mar 2014 Link to this post

    With the following code, I'm able to read data from my read WCF method ("GetListOfProducts") and display the data in one of the #test textbox.  When I update the data in one of the #test textboxes then click save, I'm expecting it to call the update WCF ("SetProductName") method.  But, when I click save, nothing happens.  Can someone help me?  Thanks!

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="styles/main.css" rel="stylesheet" />

        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

        <script src="scripts/login.js"></script>
        <script src="scripts/location.js"></script>
        <script src="scripts/weather.js"></script>
        <script src="scripts/app.js"></script>
    </head>
    <body>
        <div data-role="layout" data-id="pageLayOut">
            <header data-role="header">
                <div data-role="navbar">
                    <a data-role="backbutton" data-align="left">Back</a>
                    <span data-role="view-title"></span>
                </div>
            </header>
            <div data-role="footer">
                <div data-role="tabstrip">
                    <a href="#homeView" data-icon="home">Home</a>
                    <a href="#productsView" data-icon="action">Products</a>
                </div>
            </div>
        </div>
        <div data-role="view" id="homeView" data-title="Home" data-layout="pageLayOut">
            <h1>Welcome!</h1>
        </div>
        <div data-role="view" id="productsView" data-title="Products" data-model="viewModel" data-layout="pageLayOut" data-init="bindForm">
            <ul id="productsList"
                data-bind="source: productsData"
                data-endlessscroll="true"
                data-template="productsTemplate"
                data-role="listview"
                data-style="inset"></ul>
            <input type="button" value="Save" data-bind="click: save" />
        </div>
        <script id="productsTemplate" type="text/x-kendo-template">
            <input type="text" id="test" data-bind="value: ProductName, events: { change: change }" />
        </script>
        <script>
            var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "pageLayOut" });
        </script>
        <script>
            var viewModel = kendo.observable({
                productsData: new kendo.data.DataSource(
                 {
                     transport: {
                         read: {
                             dataType: "json",
                             url: "http://localhost/productWCF/productService.svc/GetListOfProducts",
                             data: {
                                 Accept: "application/json"
                             },
                             type: "GET"
                         },
                         update: {
                             dataType: "json",
                             url: "http://localhost/productWCF/productService.svc/SetProductName",
                             type: "PUT"
                         },
                         parameterMap: function (data, operation) {
                             alert(operation);
                             if (operation !== "read" && data.models) {
                                 for (var i in data.models) {
                                     return kendo.stringify({ ProductID: "ProductID", ProductName: "ProductName", Status: "Status" });
                                 }
                             }
                             return data;
                         },
                         batch: false,
                         schema: {
                             model: {
                                 id: "ProductID",
                                 fields: {
                                     ProductSiteID: { type: "string" },
                                     ProductName: { type: "string" },
                                     Status: { type: "string" }
                                 }
                             }
                         }
                     }
                 }),
                save: function (e) {
                    this.productsData.sync();
                },
                change: function () {
                    alert("change was made");
                }
            });

            function bindForm() {
                alert("Bind called");
                kendo.bind($("#productsView", viewModel));
            }
        </script>
    </body>
    </html>
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Mar 2014 Link to this post

    Hello Dan,

    There is a syntax error in the provided dataSource configuration - schema should part of the dataSource root object, not nested inside the transport.
    Please change your configuration in the following way and let me know if the problem still persists.

    productsData: new kendo.data.DataSource({
        transport: {
            read: {
                dataType: "json",
                data: {
                    Accept: "application/json"
                },
                type: "GET"
            },
            update: {
                dataType: "json",
                type: "PUT"
            },
            parameterMap: function (data, operation) {
                alert(operation);
                if (operation !== "read" && data.models) {
                    for (var i in data.models) {
                        return kendo.stringify({ ProductID: "ProductID", ProductName: "ProductName", Status: "Status" });
                    }
                }
                return data;
            }
        },
        batch: false,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductSiteID: { type: "string" },
                    ProductName: { type: "string" },
                    Status: { type: "string" }
                }
            }
        }
    }),


    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top