• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     zing-grid[loading] {
    14.       height: 461px;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <zing-grid caption="ZingGrid Method - filterMenuColumn()" filter filter-menu-areas="both" src="https://cdn.zinggrid.com/datasets/user-roles.json">
    21.   </zing-grid>
    22.   <script>
    23.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    24.     window.addEventListener('load', () => {
    25.       let zgRef = document.querySelector('zing-grid');
    26.       zgRef.executeOnLoad(() => {
    27.         zgRef.filterMenuColumn('name', {
    28.           // By conditions
    29.           conditionals: [{
    30.             condition: 'contains',
    31.             val1: 'Bender'
    32.           }],
    33.           // By selectbox options
    34.           // selectItems: ['Bender Bending Rodriguez'],
    35.           // Indicate to match case
    36.           // matchCase: true,
    37.           // Indicate how to filter multiple conditions (default is 'and')
    38.           // boolean: 'or',
    39.         });
    40.       });
    41.     });
    42.   </script>
    43. </body>
    44.  
    45. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid caption="ZingGrid Method - filterMenuColumn()" filter filter-menu-areas="both" src="https://cdn.zinggrid.com/datasets/user-roles.json">
    12.   </zing-grid>
    13. </body>
    14.  
    15. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    1. window.addEventListener('load', () => {
    2.   let zgRef = document.querySelector('zing-grid');
    3.   zgRef.executeOnLoad(() => {
    4.     zgRef.filterMenuColumn('name', {
    5.       // By conditions
    6.       conditionals: [{
    7.         condition: 'contains',
    8.         val1: 'Bender'
    9.       }],
    10.       // By selectbox options
    11.       // selectItems: ['Bender Bending Rodriguez'],
    12.       // Indicate to match case
    13.       // matchCase: true,
    14.       // Indicate how to filter multiple conditions (default is 'and')
    15.       // boolean: 'or',
    16.     });
    17.   });
    18. });