Autocomplete WCF service data binding (XML communication)

4 posts, 0 answers
  1. Jacek
    Jacek avatar
    2 posts
    Member since:
    Aug 2012

    Posted 02 Jul 2013 Link to this post

    Hi,

    First of all I would like to mark that I'm quite fresh in the kendo UI stuff.
    My employer asked me to write a mobile application using kendo UI. Because there is no data binding Topics I decided to write my post here.

    So the problem is that autocomplete input does not get the data from webservice some how. I'm not shure if I wrote databinding correct.

    Could someone help me? I'll be greateful for any help with that.

    // THIS IS JAVASCRIPT
        $("#tbProducer").kendoAutoComplete({
            minLength: 1,
            filter: "contains",
            placeholder: "Wpisz producenta...",
            dataSource: {
                //type: "xml",
                transport: {
                    read: {
                        type: "POST",
                        url: "http://mobileservice.cenpol.pl:81/CenpolMobileService.svc/GetProducers",
                        dataType: "xml",
                        processData: false,
                        data: xmlstring
                    }
                },
                schema:
                {
                    data: "Alias",
                    model:
                    {
                           fields:
                           {
                               Alias: { type: "string" },
                               ContactDataID: { type: "number" },
                               ID: { type: "number" },
                               Suggested: { type: "number" }
                           }
                    }
                },
                serverFiltering: false
            }
        });


    // THIS IS WEB FORM
    <!DOCTYPE html>
    <head>
        
        <title></title>
        
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>

    </head>
    <body>
            <div data-role="view" data-layout="overview-layout" id="vSearcher">
                <p>
                    <label>Wprowadź dane do wyszukiwania</label>
                    <br />
                    <br />
                    <label>Producent:<br /><input type="text" id="tbProducer" class="k-input" autocomplete="on"/></label><br />
                    <label>Opis materiału:<br /><input type="text" id="tbMaterialDesc" class="k-input"/></label><br />
                    <label>Numer katalogowy:<br /><input type="text" id="tbCatalogNo" class="k-input"/></label><br />             
                </p>
                <p style="text-align:center;">

                    <button id="btSearch" class="km-button" style="font-size:14px;">
                        <img src="img/search-32.png" width="24" height="24" style="align-content:center; align-self:center; vertical-align:central; margin: 0 15px 0 0"/>Szukaj
                    </button>
                </p>

            </div>

            <div data-role="view" data-layout="overview-layout" id="vResults">
                Wyniki
            </div>

            <div data-role="view" data-layout="overview-layout" id="vAboutUs">
                O nas
            </div>
            

        <div data-role="layout" data-id="overview-layout">
            <header data-role="header">
                <div data-role="navbar">Cenpol Mobile © 2013</div>
            </header>

        <footer data-role="footer">
            <div data-role="tabstrip">
                <a href="#vSearcher"><img src="img/search-32.png" width="24" height="24" /><br /><label>Wyszukiwarka</label></a>
                <a href="#vResults"><img src="img/result-32.png" width="24" height="24" /><br /><label>Wyniki</label></a>
                <a href="#vAboutUs"><img src="img/about-32.png" width="24" height="24" /><br /><label>O nas</label></a>
            </div>
        </footer>
    </div>
       
    <style scoped>

        .k-input {

            padding: 0 10% 0 0;
            width: 90%;
        }
        

    </style>

    <script>
        var app = new kendo.mobile.Application(document.body,
        {
            transition: 'slide',
            platform:'android'
        });

        $("#tbProducer").kendoAutoComplete({
            minLength: 1,
            filter: "contains",
            placeholder: "Wpisz producenta...",
            dataSource: {
                //type: "xml",
                transport: {
                    read: {
                        type: "POST",
                        url: "http://mobileservice.cenpol.pl:81/CenpolMobileService.svc/GetProducers",
                        dataType: "xml",
                        processData: false,
                        data: xmlstring
                    }
                },
                schema:
                {
                    data: "Alias",
                    model:
                    {
                           fields:
                           {
                               Alias: { type: "string" },
                               ContactDataID: { type: "number" },
                               ID: { type: "number" },
                               Suggested: { type: "number" }
                           }
                    }
                },
                serverFiltering: false
            }
        });
    </script>
    </body>

    ///////////////////////////////////////////////////////////////////////////////////////

    The attachment is the response I get from the webservice.
    The webservice is the WCF webservice. I use basichttpbinding because it is appropriate for Windows Phone App. I read it is OK for Kendo to get data from XML services (not only Json).

    Thank you for your help. Any asnwer will be appreciated.

    Best regards,
    Paul
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 04 Jul 2013 Link to this post

    Hi Jacek,

    If I understood correctly you would like to load remote XML data in the DataSource. In such case, the dataSource configuration (to be specific the schema part) is incorrect.

    You should set the type to "xml" and specify the field mapping. This demo illustrates the correct syntax.

    On a side note, it is recommended to initialize the autoComplete widget at the init event of corresponding mobile View element.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jacek
    Jacek avatar
    2 posts
    Member since:
    Aug 2012

    Posted 05 Jul 2013 Link to this post

    Hello,

    Thank you for reply. Actually I would like to ude WCF Soap (XML) web service. Is it possible?

    Hear is what I get from webservice:

    <s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
      <s:Header />
      <s:Body>
        <GetProducersResponse xmlns="http://tempuri.org/">
          <GetProducersResult xmlns:a="http://schemas.datacontract.org/2004/07/CenpolMobileWCF.DataContracts" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
            <a:ProducerResult>
              <a:Alias>MOLEX</a:Alias>
              <a:ContactDataID>159</a:ContactDataID>
              <a:ID>167</a:ID>
              <a:Suggested>1</a:Suggested>
            </a:ProducerResult>
            <a:ProducerResult>
              <a:Alias>PAWBOL</a:Alias>
              <a:ContactDataID>47</a:ContactDataID>
              <a:ID>160</a:ID>
              <a:Suggested>1</a:Suggested>
            </a:ProducerResult>
            <a:ProducerResult>
              <a:Alias>A-LAN TECHNOLOGIE</a:Alias>
              <a:ContactDataID>88</a:ContactDataID>
              <a:ID>179</a:ID>
              <a:Suggested>0</a:Suggested>
            </a:ProducerResult>
            <a:ProducerResult>
              <a:Alias>AAGSTUCCHI</a:Alias>
              <a:ContactDataID>190</a:ContactDataID>
              <a:ID>363</a:ID>
              <a:Suggested>0</a:Suggested>
            </a:ProducerResult>
            <a:ProducerResult>
              <a:Alias>ABAXO</a:Alias>
              <a:ContactDataID>69</a:ContactDataID>
              <a:ID>236</a:ID>
              <a:Suggested>0</a:Suggested>
            </a:ProducerResult>
            <a:ProducerResult>
              <a:Alias>ABB</a:Alias>
              <a:ContactDataID>75</a:ContactDataID>
              <a:ID>175</a:ID>
              <a:Suggested>0</a:Suggested>
            </a:ProducerResult>
    .......

    And so on....


    Is it possible to invoke the remote webservice method and use it within kendo? All examples are in JSON. I use XML for data transport (I mean SOAP protocol).

    Thank you for your reply. I appreciate that.

    Paul
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 09 Jul 2013 Link to this post

    Hello Jacek,

    I am afraid that Kendo DataSource does not support binding to XML with namespaces (<a:ID>363</a:ID>). The solution in this case would be to modify the server logic and return a flat XML without name spaces.

    For more information on the subject please check this forum topic.
    I hope the information will help.

    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
Kendo UI is VS 2017 Ready