'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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
