• 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: 654px;
    11.     }
    12.   </style>
    13. </head>
    14.  
    15. <body class="zg-body">
    16.   <zing-grid caption="HTML filter Ex" filter viewport-stop>
    17.     <zg-data data=' [{
    18.         "title": "The Shawshank Redemption", 
    19.         "year": "1994", 
    20.         "genre": "Crime, Drama"
    21.       }, {
    22.         "title": "The Godfather", 
    23.         "year": "1972", 
    24.         "genre": "Crime, Drama"
    25.       }, {
    26.         "title": "Forest Gump", 
    27.         "year": "1994", 
    28.         "genre": "Comedy, Drama, Romance"
    29.       }, {
    30.         "title": "The Matrix", 
    31.         "year": "1999", 
    32.         "genre": "Action, Sci-Fi"
    33.       }, {
    34.         "title": "Inception", 
    35.         "year": "2010", 
    36.         "genre": "Action, Adventure, Sci-Fi"
    37.       }, {
    38.         "title": "Pulp Fiction", 
    39.         "year": "1994", 
    40.         "genre": "Crime, Drama"
    41.       }, {
    42.         "title": "Django Unchained", 
    43.         "year": "2012", 
    44.         "genre": "Drama, Western"
    45.       }, {
    46.         "title": "The Prestige", 
    47.         "year": "2006", 
    48.         "genre": "Drama, Mystery, Sci-Fi"
    49.       }, {
    50.         "title": "Memento", 
    51.         "year": "2000", 
    52.         "genre": "Mystery, Thriller"
    53.       }, {
    54.         "title": "Gone Girl", 
    55.         "year": "2014", 
    56.         "genre":"Crime, Drama, Mystery"
    57.       }]'>
    58.     </zg-data>
    59.   </zing-grid>
    60.   <script>
    61.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    62.   </script>
    63. </body>
    64.  
    65. </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="HTML filter Ex" filter viewport-stop>
    12.     <zg-data data=' [{
    13.         "title": "The Shawshank Redemption", 
    14.         "year": "1994", 
    15.         "genre": "Crime, Drama"
    16.       }, {
    17.         "title": "The Godfather", 
    18.         "year": "1972", 
    19.         "genre": "Crime, Drama"
    20.       }, {
    21.         "title": "Forest Gump", 
    22.         "year": "1994", 
    23.         "genre": "Comedy, Drama, Romance"
    24.       }, {
    25.         "title": "The Matrix", 
    26.         "year": "1999", 
    27.         "genre": "Action, Sci-Fi"
    28.       }, {
    29.         "title": "Inception", 
    30.         "year": "2010", 
    31.         "genre": "Action, Adventure, Sci-Fi"
    32.       }, {
    33.         "title": "Pulp Fiction", 
    34.         "year": "1994", 
    35.         "genre": "Crime, Drama"
    36.       }, {
    37.         "title": "Django Unchained", 
    38.         "year": "2012", 
    39.         "genre": "Drama, Western"
    40.       }, {
    41.         "title": "The Prestige", 
    42.         "year": "2006", 
    43.         "genre": "Drama, Mystery, Sci-Fi"
    44.       }, {
    45.         "title": "Memento", 
    46.         "year": "2000", 
    47.         "genre": "Mystery, Thriller"
    48.       }, {
    49.         "title": "Gone Girl", 
    50.         "year": "2014", 
    51.         "genre":"Crime, Drama, Mystery"
    52.       }]'>
    53.     </zg-data>
    54.   </zing-grid>
    55. </body>
    56.  
    57. </html>
    1.  
    1.