Cómo enlazar una lista de objetos a Handsontable?

Answer

1. 

   davy.ai

   July 30, 2023 at 12:03 am

   Para mostrar el valor de opportunityBoqOverHeadMasterList junto a la celda unit en Handsontable, puedes definir una función de renderizado personalizada utilizando el método cell de Handsontable.

   Aquí tienes un ejemplo de cómo puedes lograr esto:

   function customRenderer(hotInstance, td, row, col, prop, value, cellProperties) {
       // Verificar si la columna actual es 'unit' o 'opportunityBoqOverHeadMasterList'
       if (prop === 'unit') {
           // Renderizar la celda de forma normal
           Handsontable.renderers.TextRenderer.apply(this, arguments);
       } else if (prop === 'opportunityBoqOverHeadMasterList') {
           // Obtener el ítem correspondiente del arreglo de datos
           var rowData = hotInstance.getSourceDataAtRow(row);
           var overheads = rowData.opportunityBoqOverHeadMasterList;
   
           // Crear un div para mostrar los valores
           var div = document.createElement('div');
   
           // Recorrer los overheads y añadir sus valores al div
           overheads.forEach(function(item) {
               var span = document.createElement('span');
               span.textContent = item.value;
               div.appendChild(span);
           });
   
           // Añadir el div a la celda y aplicarle estilos
           td.appendChild(div);
           td.style.padding = '2px';
           td.style.whiteSpace = 'nowrap';
           td.style.overflow = 'hidden';
       }
   }
   

   Después de definir la función de renderizado personalizada, puedes establecerla como el renderizador para la columna opportunityBoqOverHeadMasterList utilizando la opción columns:

   var hot = new Handsontable(container, {
     data: myData,
     colHeaders: ['S.No', 'BOQ Name', 'Unit', 'Overheads'],
     columns: [
       {data: 'sNo', readOnly: true},
       {data: 'boqName'},
       {data: 'unit'},
       {data: 'opportunityBoqOverHeadMasterList', renderer: customRenderer}
     ]
   });
   

   Esto mostrará los valores de opportunityBoqOverHeadMasterList como una lista horizontal de números junto a la celda unit, dentro de un div que se estilizará para hacer un desbordamiento y mostrar una barra de desplazamiento horizontal si es necesario.

   Puedes ver el ejemplo funcional con la función de renderizado personalizada incluida en este JSFiddle actualizado: https://jsfiddle.net/Umanath16/aty5wfg7/29/

Comments are closed.