• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingGrid Demo</title>
        <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js" defer></script>
        <style>
            body {
                background: #e6e6e6;
            }
    
            zg-button {
                margin: 1rem;
            }
    
            zg-button+zg-button {
                margin-top: 0;
            }
    
            @media screen and (min-width: 800px) {
                zg-button+zg-button {
                    margin-top: 1rem;
                }
    
            }
    
            zing-grid[loading] {
                height: 478px;
            }
        </style>
    </head>
    
    <body>
        <zing-grid caption="Custom Button" editor="modal" layout="row" layout-controls="disabled" viewport-stop>
            <zg-data data='[
            {
              "date": "2016-05-03",
              "name": "Tom",
              "address": "No. 189, Grove St, Los Angeles"
            },
            {
              "date": "2016-05-02",
              "name": "Thorton",
              "address": "No. 189, Grove St, Los Angeles"
            },
            {
              "date": "2016-05-04",
              "name": "Timmy",
              "address": "No. 189, Grove St, Los Angeles"
            },
            {
              "date": "2016-05-04",
              "name": "Turner",
              "address": "No. 189, Grove St, Los Angeles"
            }
          ]'></zg-data>
            <zg-colgroup>
                <!-- default columns -->
                <zg-column index="date"></zg-column>
                <zg-column index="name"></zg-column>
                <zg-column index="address"></zg-column>
                <!-- custom column for delete button -->
                <zg-column index="custom" header="Delete Row" editor="false">
                    <zg-button>Render <span>button</span> as is</zg-button>
                    <zg-button>
                        <zg-icon name="close"></zg-icon> <span>Test</span>
                    </zg-button>
                </zg-column>
            </zg-colgroup>
        </zing-grid>
        <script></script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>ZingGrid Demo</title>
        <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js" defer></script>
      </head>
      <body>
        <zing-grid 
          caption="Custom Button"
          editor="modal" 
          layout="row" 
          layout-controls="disabled" 
          viewport-stop>
          <zg-data data='[
            {
              "date": "2016-05-03",
              "name": "Tom",
              "address": "No. 189, Grove St, Los Angeles"
            },
            {
              "date": "2016-05-02",
              "name": "Thorton",
              "address": "No. 189, Grove St, Los Angeles"
            },
            {
              "date": "2016-05-04",
              "name": "Timmy",
              "address": "No. 189, Grove St, Los Angeles"
            },
            {
              "date": "2016-05-04",
              "name": "Turner",
              "address": "No. 189, Grove St, Los Angeles"
            }
          ]'></zg-data>
          <zg-colgroup>
            <!-- default columns -->
            <zg-column index="date"></zg-column>
            <zg-column index="name"></zg-column>
            <zg-column index="address"></zg-column>
            <!-- custom column for delete button -->
            <zg-column index="custom" header="Delete Row" editor="false">
            	<zg-button>Render <span>button</span> as is</zg-button>
            	<zg-button><zg-icon name="close"></zg-icon> <span>Test</span></zg-button>
            </zg-column>
          </zg-colgroup>
        </zing-grid>
    	</body>
    </html>
    body { background:#e6e6e6; }
    
    zg-button { margin: 1rem; }
    zg-button + zg-button { margin-top: 0; }
    
    @media screen and (min-width: 800px) {
      zg-button + zg-button { margin-top: 1rem; }
    
    }