• 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. .zg-body {
    10. background: #e6e6e6;
    11. }
    12.  
    13. .zg-body .controls--container {
    14. display: flex;
    15. flex-direction: row;
    16. justify-content: space-between;
    17. flex-wrap: wrap;
    18. margin: 1rem 0;
    19. }
    20.  
    21. zing-grid[loading] {
    22. height: 380px;
    23. }
    24. </style>
    25. </head>
    26.  
    27. <body class="zg-body">
    28. <div class="inner--container">
    29. <!-- toggle controls -->
    30. <div class="controls--container">
    31. <div>
    32. <label for="searchGrid">Search: </label>
    33. <input type="search" id="searchGrid">
    34. </div>
    35. </div>
    36. <zing-grid caption="Actors/Actresses" search pager page-size="4">
    37. <zg-data data='[{"name": "Tom Hanks"}, {"name": "Meryl Streep"}, {"name": "Matt Damon"}, {"name": "Morgan Freeman"}, {"name": "Julia Roberts"}, {"name": "Brad Pitt"}, {"name": "Natalie Portman"}, {"name": "Angelina Jolie"}, {"name": "Johnny Depp"}, {"name": "Keira Knightley"}, {"name": "Harrison Ford"}]'></zg-data>
    38. </zing-grid>
    39. </div>
    40. <script>
    41. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    42. // because this Javascript is injected into the document head
    43. window.addEventListener('load', () => {
    44. // Javascript code to execute after DOM content
    45. // element references
    46. const searchGrid = document.getElementById('searchGrid');
    47. const zgRef = document.querySelector('zing-grid');
    48. // debounce search
    49. let searchTimeoutId = null;
    50. // function declarations
    51. function _searchGrid(e) {
    52. // debounce search
    53. clearTimeout(searchTimeoutId);
    54. let targetValue = e.target.value;
    55. // delay 100 milliseconds to debounce user input
    56. searchTimeoutId = setTimeout((userInput) => {
    57. requestAnimationFrame(() => zgRef.searchGrid(userInput));
    58. }, 100, targetValue);
    59. }
    60. // add event listeners
    61. searchGrid.addEventListener('keyup', _searchGrid);
    62. searchGrid.addEventListener('change', _searchGrid);
    63. searchGrid.addEventListener('search', _searchGrid);
    64. });
    65. </script>
    66. </body>
    67.  
    68. </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. <div class="inner--container">
    12. <!-- toggle controls -->
    13. <div class="controls--container">
    14. <div>
    15. <label for="searchGrid">Search: </label>
    16. <input type="search" id="searchGrid">
    17. </div>
    18. </div>
    19. <zing-grid caption="Actors/Actresses" search pager page-size="4">
    20. <zg-data data='[{"name": "Tom Hanks"}, {"name": "Meryl Streep"}, {"name": "Matt Damon"}, {"name": "Morgan Freeman"}, {"name": "Julia Roberts"}, {"name": "Brad Pitt"}, {"name": "Natalie Portman"}, {"name": "Angelina Jolie"}, {"name": "Johnny Depp"}, {"name": "Keira Knightley"}, {"name": "Harrison Ford"}]'></zg-data>
    21. </zing-grid>
    22. </div>
    23. </body>
    24.  
    25. </html>
    1. .zg-body {
    2. background: #e6e6e6;
    3. }
    4.  
    5. .zg-body .controls--container {
    6. display: flex;
    7. flex-direction: row;
    8. justify-content: space-between;
    9. flex-wrap: wrap;
    10. margin: 1rem 0;
    11. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4. // Javascript code to execute after DOM content
    5. // element references
    6. const searchGrid = document.getElementById('searchGrid');
    7. const zgRef = document.querySelector('zing-grid');
    8. // debounce search
    9. let searchTimeoutId = null;
    10. // function declarations
    11. function _searchGrid(e) {
    12. // debounce search
    13. clearTimeout(searchTimeoutId);
    14. let targetValue = e.target.value;
    15. // delay 100 milliseconds to debounce user input
    16. searchTimeoutId = setTimeout((userInput) => {
    17. requestAnimationFrame(() => zgRef.searchGrid(userInput));
    18. }, 100, targetValue);
    19. }
    20. // add event listeners
    21. searchGrid.addEventListener('keyup', _searchGrid);
    22. searchGrid.addEventListener('change', _searchGrid);
    23. searchGrid.addEventListener('search', _searchGrid);
    24. });