es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Kendo-Angular: Cómo representar una vista de lista de un objeto JSON.

02 Aug, 2023 Programación

Tengo un objeto JSON cuyos datos deben mostrarse en una vista de lista.

{
    "TestId": 2,
    "CurrentTestVersion": 1,
    "TestNumber": "2015-29059",
    "SharingData": 1.000000,
    "ThresholdValue": 0.0,
    "ExpireDate": "2022-12-31T00:00:00",
    "UpdateDate": "2021-10-01T00:00:00",
    "TestCurrency": "INR",
    "TestCode": "44300",
    "TestUCode": "UU",
    "IndexType": "TRE",
    "IndexUCode": "EUR",
    "IndexUMCode": "not",

}

Los datos anteriores deben mostrarse en un formato de lista como se muestra a continuación:

enter image description here

He intentado usar etiquetas de fila y columna con la clase span.

<div class="row">
   <div class="col-sm-12">
      <span class="fs12px">Moneda:
      {{test.TestCurrency}} </span>
   </div>
</div>
<div class="row">
   <div class="col-sm-12">
      <span class="fs12px">CurrentTestVersion:
      {{test.CurrentTestVersion}} </span>
   </div>
</div>
<div class="row">
   <div class="col-sm-12">
      <span class="fs12px">Fecha de caducidad:
      {{test.ExpireDate}}</span>
   </div>
</div>

enter image description here

¿Cómo puedo lograr una vista de lista usando Kendo? He revisado la documentación de Kendo List View, pero no he encontrado un ajuste adecuado, ya que también es una cuadrícula.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr una vista de lista utilizando Kendo UI, puedes usar el componente Kendo UI ListView. Aquí te mostramos cómo implementarlo para tus datos JSON:

    1. Crea una plantilla HTML para los elementos de tu lista. Por ejemplo:
    <script id="item-template" type="text/x-kendo-template">
    <div class="row">
        <div class="col-sm-3">{{data.TestId}}</div>
        <div class="col-sm-3">{{data.TestNumber}}</div>
        <div class="col-sm-3">{{data.TestCurrency}}</div>
        <div class="col-sm-3">{{data.IndexType}}</div>
    </div>
</script>
    1. Inicializa el componente Kendo UI ListView, pasando tus datos y la plantilla:
    <div id="listview"></div>

<script>
    $(function() {
        var data = [
            {
                "TestId": 2,
                "TestNumber": "2015-29059",
                "TestCurrency": "INR",
                "IndexType": "TRE"
            },
            // agregar más elementos aquí
        ];

        $("#listview").kendoListView({
            dataSource: data,
            template: kendo.template($("#item-template").html())
        });
    });
</script>

    Esto creará una vista de lista con cada elemento utilizando la plantilla HTML que has definido. Puedes personalizar la plantilla para mostrar los datos en el formato que desees.

Comments are closed.