• 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/zinggrid.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     .zg-body .test {
    14.       margin-left: 10px;
    15.     }
    16.  
    17.     zing-grid[loading] {
    18.       height: 325px;
    19.     }
    20.   </style>
    21. </head>
    22.  
    23. <body class="zg-body">
    24.   <zing-grid caption="Slotted Content" editor="modal" layout="row" layout-controls="disabled" viewport-stop>
    25.     <zg-data data='[
    26.         {
    27.           "name": "Tom"
    28.         },
    29.         {
    30.           "name": "Thorton"
    31.         },
    32.         {
    33.           "name": "Timmy"
    34.         },
    35.         {
    36.           "name": "Turner"
    37.         }
    38.       ]'></zg-data>
    39.     <zg-colgroup>
    40.       <zg-column index="name"></zg-column>
    41.       <!-- custom column for delete button -->
    42.       <zg-column index="name" header="Delete Row" editor="false">
    43.         <zg-button action="removerecord">
    44.           <span name="close" slot="icon">&#10060; </span>
    45.           <em slot="label" class="test"> Delete</em>
    46.         </zg-button>
    47.       </zg-column>
    48.     </zg-colgroup>
    49.   </zing-grid>
    50.   <script>
    51.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    52.   </script>
    53. </body>
    54.  
    55. </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/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <zing-grid caption="Slotted Content" editor="modal" layout="row" layout-controls="disabled" viewport-stop>
    12.     <zg-data data='[
    13.         {
    14.           "name": "Tom"
    15.         },
    16.         {
    17.           "name": "Thorton"
    18.         },
    19.         {
    20.           "name": "Timmy"
    21.         },
    22.         {
    23.           "name": "Turner"
    24.         }
    25.       ]'></zg-data>
    26.     <zg-colgroup>
    27.       <zg-column index="name"></zg-column>
    28.       <!-- custom column for delete button -->
    29.       <zg-column index="name" header="Delete Row" editor="false">
    30.         <zg-button action="removerecord">
    31.           <span name="close" slot="icon">&#10060; </span>
    32.           <em slot="label" class="test"> Delete</em>
    33.         </zg-button>
    34.       </zg-column>
    35.     </zg-colgroup>
    36.   </zing-grid>
    37. </body>
    38.  
    39. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. .zg-body .test {
    6.   margin-left: 10px;
    7. }
    1.