Dear All,
I have created the web api and deployed it.in the html page using the kendo Ui
"<head>
<!-- Common Kendo UI Web CSS -->
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<!-- Default Kendo UI Web theme CSS -->
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<!-- jQuery JavaScript -->
<script src="js/jquery.min.js"></script>
<!-- Kendo UI Web combined JavaScript -->
<script src="js/kendo.all.min.js"></script>
<title>Dashboard</title>
</head>
<body>
<div id="example" class="k-content">
<div class="grid-wrapper">
<div id="grid"></div>
<script>
var remoteDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost:2704/api/employee",
dataType: "jsonp"
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: remoteDataSource,
height: 200
});
</script>
</div>
<div class="table-wrapper">
<div id="divResult">
<script>
function GetAllProducts() {
jQuery.support.cors = true;
$.ajax({
url: 'http://localhost:2704/api/employee',
dataType: 'jsonp',
success: function (data) {
WriteResponse(data);
},
});
}
function WriteResponse(products) {
var strResult = "<table><th>ID</th><th>FirstName</th><th>LastName</th>";
$.each(products, function (index, product) {
strResult += "<tr><td>" + product.Id + "</td><td> " + product.FirstName + "</td><td>" + product.LastName + "</td></tr>";
});
strResult += "</table>";
$("#divResult").html(strResult);
}
$(document).ready(function () {
GetAllProducts();
});
</script>
</div>
</div>
</div>
</body>"
im calling the the api the response headers are empty.when i access the api it is working fine.Can anyone help how to intergerate the web api with the Kendo UI html pages.
I have created the web api and deployed it.in the html page using the kendo Ui
"<head>
<!-- Common Kendo UI Web CSS -->
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<!-- Default Kendo UI Web theme CSS -->
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<!-- jQuery JavaScript -->
<script src="js/jquery.min.js"></script>
<!-- Kendo UI Web combined JavaScript -->
<script src="js/kendo.all.min.js"></script>
<title>Dashboard</title>
</head>
<body>
<div id="example" class="k-content">
<div class="grid-wrapper">
<div id="grid"></div>
<script>
var remoteDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost:2704/api/employee",
dataType: "jsonp"
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: remoteDataSource,
height: 200
});
</script>
</div>
<div class="table-wrapper">
<div id="divResult">
<script>
function GetAllProducts() {
jQuery.support.cors = true;
$.ajax({
url: 'http://localhost:2704/api/employee',
dataType: 'jsonp',
success: function (data) {
WriteResponse(data);
},
});
}
function WriteResponse(products) {
var strResult = "<table><th>ID</th><th>FirstName</th><th>LastName</th>";
$.each(products, function (index, product) {
strResult += "<tr><td>" + product.Id + "</td><td> " + product.FirstName + "</td><td>" + product.LastName + "</td></tr>";
});
strResult += "</table>";
$("#divResult").html(strResult);
}
$(document).ready(function () {
GetAllProducts();
});
</script>
</div>
</div>
</div>
</body>"
im calling the the api the response headers are empty.when i access the api it is working fine.Can anyone help how to intergerate the web api with the Kendo UI html pages.
1 Answer, 1 is accepted
0
Hello,
Atanas Korchev
Telerik
Web API doesn't support JSONP by default. Try using dataType: "json" in your data source configuration.
Regards,Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!