• 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.     zing-grid[loading] {
    10.       height: 601px;
    11.     }
    12.   </style>
    13. </head>
    14.  
    15. <body>
    16.   <h3>`Element` wraps cell content to tag specified by [typeElementTagName] with attribute from [typeElementAttributeName].</h3>
    17.   <h3>The 'element' column type wraps cell content in tag (specified by [typeElementTagName]) with attribute (specified from [typeElementAttributeName]) and uses
    18.     input `type="string"` as editor. Double-click cell to edit cell.</h3>
    19.   <zing-grid editor>
    20.     <zg-colgroup>
    21.       <zg-column index="name" type="element" type-element-tag-name="h1"></zg-column>
    22.       <zg-column index="last" type="element" type-element-tag-name="zing-grid" type-element-attribute-name="caption" width="400px"></zg-column>
    23.       <zg-column index="age"></zg-column>
    24.     </zg-colgroup>
    25.     <zg-data data='[{"name": "Maria","last": "John", "age": 5}, {"name": "Juanita","last": "Smith", "age": 36}, {"name": "Felicity","last": "Snow", "age": 44}]'></zg-data>
    26.   </zing-grid>
    27.   <script>
    28.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    29.   </script>
    30. </body>
    31.  
    32. </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>
    11.   <h3>`Element` wraps cell content to tag specified by [typeElementTagName] with attribute from [typeElementAttributeName].</h3>
    12.   <h3>The 'element' column type wraps cell content in tag (specified by [typeElementTagName]) with attribute (specified from [typeElementAttributeName]) and uses
    13.     input `type="string"` as editor. Double-click cell to edit cell.</h3>
    14.   <zing-grid editor>
    15.     <zg-colgroup>
    16.       <zg-column index="name" type="element" type-element-tag-name="h1"></zg-column>
    17.       <zg-column index="last" type="element" type-element-tag-name="zing-grid" type-element-attribute-name="caption" width="400px"></zg-column>
    18.       <zg-column index="age"></zg-column>
    19.     </zg-colgroup>
    20.     <zg-data data='[{"name": "Maria","last": "John", "age": 5}, {"name": "Juanita","last": "Smith", "age": 36}, {"name": "Felicity","last": "Snow", "age": 44}]'></zg-data>
    21.   </zing-grid>
    22. </body>
    23.  
    24. </html>
    1.  
    1.