Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

351
Vistas
Zing Grid remove delete api on row select, clear rows selected on refresh and set caption over api selected item text

So I am building on my previous tests in our project using Zing Grid api and is looking for a way to remove the inbuilt delete api that pops up when you select a column set with type="selector" attribute:
When I set the custom caption text the api button disappears but this also removes the search box. How do I remove the delete api button?

const zgRef = document.querySelector('zing-grid#zgRefTable');
zgRef.querySelector("zg-caption").textContent = "Custom Text";

How to I clear selected columns attribute set with type="selector" after running refresh() method:
I listen for the row:select event and store the rowIndex in an array and just before running refresh() method I clear the zing-grid aSelectedRows property. This seems a bit hacky. How do I clear the rows selected?

var rowIdx = [];
// Row select event
zgRef.addEventListener('row:select', function(e) {
    e.preventDefault();
    const checked = e.detail.ZGData.checked;
    const idx = e.detail.ZGData.rowIndex;
    
    if (checked && !rowIdx.includes(idx)) {
        rowIdx.push(idx);
    } else if (!checked && rowIdx.includes(idx)) {
        rowIdx = rowIdx.filter(x=>x!=idx);
    }
});

// Refresh button
document.getElementById("refreshBtn").addEventListener("click", (e)=>{
    e.preventDefault();
    if (rowIdx.length>0) {
        rowIdx.forEach((element)=>{  // reset selected rows before refresh
            const r = zgRef.row(element);
            r.widget.aSelectedRows = [];
        });
        rowIdx = [];
    }
    zgRef.refresh();  // refresh
});

If you select a column the api automatically changes the caption to x Item Selected. How do I set custom caption text that overwrites the api x Item Selected text? I tried the setCaption() method but it concatenates the existing text to api Custom Text\nx Item Selected text.

var customTxt = "Custom Text"
// Tried
zgRef.setCaption(customTxt);
// Also tried
zgRef.querySelector("zg-caption").textContent = customTxt;  // This changes the text but removes search box

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda