Demos Back to Docs

Buttons with Slotted Content

66 of 124
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.
Result Full HTML CSS JS
Edit Download
❌ Delete

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    body {
      background: #e6e6e6;
    }

    .zg-body .test {
      margin-left: 10px;
    }

    zing-grid[loading] {
      height: 325px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="Slotted Content" editor="modal" layout="row" layout-controls="disabled" viewport-stop>
    <zg-data data='[
        {
          "name": "Tom"
        },
        {
          "name": "Thorton"
        },
        {
          "name": "Timmy"
        },
        {
          "name": "Turner"
        }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index="name"></zg-column>
      <!-- custom column for delete button -->
      <zg-column index="name" header="Delete Row" editor="false">
        <zg-button action="removerecord">
          <span name="close" slot="icon">❌ </span>
          <em slot="label" class="test"> Delete</em>
        </zg-button>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <zing-grid 
      caption="Slotted Content"
      editor="modal" 
      layout="row" 
      layout-controls="disabled" 
      viewport-stop>
      <zg-data data='[
        {
          "name": "Tom"
        },
        {
          "name": "Thorton"
        },
        {
          "name": "Timmy"
        },
        {
          "name": "Turner"
        }
      ]'></zg-data>
      <zg-colgroup>
        <zg-column index="name"></zg-column>
        <!-- custom column for delete button -->
        <zg-column index="name" header="Delete Row" editor="false">
					<zg-button action="removerecord">
            <span name="close" slot="icon">❌ </span> 
            <em slot="label" class="test"> Delete</em>
          </zg-button>
        </zg-column>
      </zg-colgroup>
    </zing-grid>
	</body>
</html>
body { background:#e6e6e6; }

.zg-body .test { margin-left: 10px; }
// No JS code

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery