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