¿Alguien ha trabajado con esto? Tengo configurado el web service y me esta retornando el json que debe leerme y mostrarme en el grid, pero no consigo realizar que se visualicen los datos
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
const dataSource = new kendo.data.DataSource({
dataSource: {
type: "odata",
transport: {
read: "http://localhost:53072/Service.svc/ObtenerDatos"
},
pageSize: 20
},
schema: {
model: {
fields: {
Id: { type: "number" },
Nombre: { type: "string" },
Precio: { type: "number" }
}
}
},
pageSize: 10
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 400,
sortable: true,
pageable: true,
columns: [
{ field: "Id", title: "ID" },
{ field: "Nombre", title: "Nombre" },
{ field: "Precio", title: "Precio" }
],
});
});
</script>
</body>
Luego de estar investigando pude obtener la solución a lo solicitado solo era definirle la siguiente opción
Hemos agregado la línea
var data = JSON.parse(result);después de recibir la respuesta del servicio. Esto analiza la cadena JSON en un objeto antes de utilizarlo como datos para el grid.Hemos configurado el DataSource del grid utilizando el objeto
datacomo fuente de datos.Hemos definido las columnas del grid según los campos del servicio WCF. En el ejemplo, hemos agregado las columnas "ID", "Nombre" y "Precio", pero puedes agregar más columnas según los campos que tengas en el servicio.
Opcionalmente, hemos establecido la propiedad
pageSizeen el DataSource para definir el número de elementos a mostrar por página en el grid. Puedes ajustar este valor según tus necesidades.Con estos cambios, el código debería poder consumir el servicio WCF, obtener los datos y mostrarlos en el grid de Kendo UI en el orden y formato definidos en las columnas.
<div id="example"><div id="grid"></div>
<script>
$(document).ready(function () {
// Consumir el servicio WCF utilizando AJAX
$.ajax({
url: "http://localhost:65534/Service.svc/TUWESERVICE",
dataType: "json",
success: function (result) {
var data = JSON.parse(result); // Analizar la cadena JSON en un objeto
// Configurar el DataSource del grid con los datos obtenidos del servicio WCF
var dataSource = new kendo.data.DataSource({
data: data,
pageSize: 10 // Opcional: definir el número de elementos a mostrar por página
});
// Crear el grid y asignar el DataSource
$("#grid").kendoGrid({
dataSource: dataSource,
height: 400,
sortable: true,
columns: [
{ field: "Id", title: "ID" },
{ field: "Nombre", title: "Nombre" },
{ field: "Precio", title: "Precio" }
// Agrega más columnas según los campos del servicio WCF
]
});
},
error: function (jqXHR, textStatus, errorThrown) {
console.error("Error al obtener los datos: " + errorThrown);
}
});
});
</script>
</div>
Hello, Andres,
Please describe the problems in English and I'll do my best to assist you with the issues that you're facing.
Best Regards,
Georgi