• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     zg-button {
    14.       margin: 1rem;
    15.     }
    16.  
    17.     zg-button+zg-button {
    18.       margin-top: 0;
    19.     }
    20.  
    21.     @media screen and (min-width: 800px) {
    22.       zg-button+zg-button {
    23.         margin-top: 1rem;
    24.       }
    25.  
    26.     }
    27.  
    28.     zing-grid[loading] {
    29.       height: 421px;
    30.     }
    31.   </style>
    32. </head>
    33.  
    34. <body>
    35.   <zing-grid caption="Custom Button" editor="modal" layout="row" layout-controls="disabled" viewport-stop>
    36.     <zg-data data='[
    37.         {
    38.           "date": "2016-05-03",
    39.           "name": "Tom",
    40.           "address": "No. 189, Grove St, Los Angeles"
    41.         },
    42.         {
    43.           "date": "2016-05-02",
    44.           "name": "Thorton",
    45.           "address": "No. 189, Grove St, Los Angeles"
    46.         },
    47.         {
    48.           "date": "2016-05-04",
    49.           "name": "Timmy",
    50.           "address": "No. 189, Grove St, Los Angeles"
    51.         },
    52.         {
    53.           "date": "2016-05-04",
    54.           "name": "Turner",
    55.           "address": "No. 189, Grove St, Los Angeles"
    56.         }
    57.       ]'></zg-data>
    58.     <zg-colgroup>
    59.       <!-- default columns -->
    60.       <zg-column index="date"></zg-column>
    61.       <zg-column index="name"></zg-column>
    62.       <zg-column index="address"></zg-column>
    63.       <!-- custom column for delete button -->
    64.       <zg-column type="custom" header="Delete Row" editor="false">
    65.         <zg-button>Render button as is</zg-button>
    66.         <zg-button><zg-icon name="close"></zg-icon> <span>Test</span></zg-button>
    67.       </zg-column>
    68.     </zg-colgroup>
    69.   </zing-grid>
    70.   <script>
    71.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    72.   </script>
    73. </body>
    74.  
    75. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid caption="Custom Button" editor="modal" layout="row" layout-controls="disabled" viewport-stop>
    12.     <zg-data data='[
    13.         {
    14.           "date": "2016-05-03",
    15.           "name": "Tom",
    16.           "address": "No. 189, Grove St, Los Angeles"
    17.         },
    18.         {
    19.           "date": "2016-05-02",
    20.           "name": "Thorton",
    21.           "address": "No. 189, Grove St, Los Angeles"
    22.         },
    23.         {
    24.           "date": "2016-05-04",
    25.           "name": "Timmy",
    26.           "address": "No. 189, Grove St, Los Angeles"
    27.         },
    28.         {
    29.           "date": "2016-05-04",
    30.           "name": "Turner",
    31.           "address": "No. 189, Grove St, Los Angeles"
    32.         }
    33.       ]'></zg-data>
    34.     <zg-colgroup>
    35.       <!-- default columns -->
    36.       <zg-column index="date"></zg-column>
    37.       <zg-column index="name"></zg-column>
    38.       <zg-column index="address"></zg-column>
    39.       <!-- custom column for delete button -->
    40.       <zg-column type="custom" header="Delete Row" editor="false">
    41.         <zg-button>Render button as is</zg-button>
    42.         <zg-button><zg-icon name="close"></zg-icon> <span>Test</span></zg-button>
    43.       </zg-column>
    44.     </zg-colgroup>
    45.   </zing-grid>
    46. </body>
    47.  
    48. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. zg-button {
    6.   margin: 1rem;
    7. }
    8.  
    9. zg-button+zg-button {
    10.   margin-top: 0;
    11. }
    12.  
    13. @media screen and (min-width: 800px) {
    14.   zg-button+zg-button {
    15.     margin-top: 1rem;
    16.   }
    17.  
    18. }
    1.