features

Button

The <zg-button> element is used both for core, internal buttons as well as offering a styled and flexible component for custom use. Depending on how it is used, ZingGrid interprets how to render the button accordingly.

Internal Buttons

Style and modify internal buttons without changing their behavior. Add text labels or change the default icon. Anything you don't change is rendered normally.

Adding a text label

The simplest modification is to add a text label and have the rest of the button render normally. To do this, just add your text label inside the button:

CloseCopy Copied
<zg-button action="editrecord">Edit</zg-button>

Internal buttons always have an [action] attribute, which tells ZingGrid how to interpret its functionality. See all button actions.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Common Internal Buttons

Add Row, Edit Row, and Remove Row are the most common internal buttons. All three appear when you make the grid editable: <zing-grid editable><zing-grid>

Add Row
Edit Row
Remove Row
Keep the functionality but replace the default add row styling with your own.
CloseCopy Copied
<zg-caption>
  <h2>Add Row Button</h2>
  <zg-button action="createrecord" class="button">Add Row</zg-button>
</zg-caption>
Keep the functionality but replace the default edit row button with your own.
CloseCopy Copied
<zg-button action="editrecord" class="button button--edit">
  Edit Record
</zg-button>
Keep the functionality but replace the default remove row button with your own.
CloseCopy Copied
<zg-button action="removerecord" class="button button--remove">
  Remove Record
</zg-button>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Slotted Content

To modify the internal button's icon or checkbox, you must directly tell the button which piece of it you are replacing. You do this by adding the appropriate [slot] to your replacement.

Replacing the icon and checkbox

To replace the default icon, add your replacement <zg-icon> inside the button with the correct slot.

CloseCopy Copied
<zg-button action="createrecord">
  <zg-icon name="close" slot="icon"></zg-icon>
</zg-button>

<zg-button action="editrecord">
  <i class="fab fa-check" slot="checkbox"></i>
</zg-button>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Custom Content

Use the same <zg-button> for your own custom use. Since it doesn't have an [action] attribute, ZingGrid knows it is custom and will render your button 'as-is' – it will not render the internal icon, checkbox, and label elements.

CloseCopy Copied
<zg-button>
  <img src="..." alt="..."/>
  <span>My Button</span>
</zg-button>

Custom buttons also come with their own styling, which makes them look more like buttons.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Related Resources

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading