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
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
3 Answers, 1 is accepted
0
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
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!
0
Jacek
Top achievements
Rank 1
Rank 1
answered on 05 Jul 2013, 08:35 AM
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
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
0
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.
Regards,
Alexander Valchev
Telerik
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!