'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