• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid: Blank 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: 698px;
    15. }
    16. </style>
    17. </head>
    18.  
    19. <body>
    20.  
    21. <zing-grid editor-controls layout-controls search pager page-size=10 src="https://jsdocs-9d00d.firebaseio.com/addressBook">
    22. </zing-grid>
    23.  
    24. <script>
    25. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    26. let myLang = {
    27. lang: 'custom',
    28. columntypes: {
    29. editor: 'custom-Edit',
    30. remover: 'custom-Delete',
    31. selector: 'custom-Select',
    32. },
    33. context: {
    34. copyCell: 'custom-Copy Cell',
    35. pasteCell: 'custom-Paste Cell',
    36. insertRecordLabel: 'custom-Insert New Record',
    37. insertRecordHere: 'custom-Here',
    38. insertRecordEnd: 'custom-End',
    39. insertRecordStart: 'custom-Start',
    40. deleteRow: 'custom-Delete row',
    41. sortColumn: 'custom-Sort Column',
    42. editCell: 'custom-Edit Cell',
    43. editRow: 'custom-Edit Row',
    44. selectCell: 'custom-Select Cell',
    45. selectRow: 'custom-Select Row',
    46. deselect: 'custom-Deselect',
    47. previousPage: 'custom-Go to previous page',
    48. nextPage: 'custom-Go to next page',
    49. firstPage: 'custom-Go to first page',
    50. lastPage: 'custom-Go to last page',
    51. version: 'custom-ZingGrid Version',
    52. save: 'custom-Save',
    53. cancel: 'custom-Cancel',
    54. },
    55. date: {
    56. shortMonth: ['custom-Jan', 'custom-Feb', 'custom-Mar', 'custom-Apr', 'custom-May', 'custom-Jun', 'custom-Jul', 'custom-Aug', 'custom-Sep', 'custom-Oct', 'custom-Nov', 'custom-Dec'],
    57. longMonth: ['custom-January', 'custom-February', 'custom-March', 'custom-April', 'custom-May', 'custom-June', 'custom-July', 'custom-August', 'custom-September', 'custom-October', 'custom-November', 'custom-December'],
    58. twoWeek: ['custom-Su', 'custom-Mo', 'custom-Tu', 'custom-We', 'custom-Th', 'custom-Fr', 'custom-Sa'],
    59. shortWeek: ['custom-Sun', 'custom-Mon', 'custom-Tue', 'custom-Wed', 'custom-Thu', 'custom-Fri', 'custom-Sat'],
    60. longWeek: ['custom-Sunday', 'custom-Monday', 'custom-Tuesday', 'custom-Wednesday', 'custom-Thursday', 'custom-Friday', 'custom-Saturday'],
    61. am: 'custom-am',
    62. pm: 'custom-pm',
    63. startWeek: 0,
    64. startYear: 6,
    65. },
    66. dialog: {
    67. cancel: 'custom-Cancel',
    68. close: 'custom-X',
    69. confirm: 'custom-Confirm',
    70. create: 'custom-Create',
    71. delete: 'custom-Delete',
    72. ok: 'custom-Ok',
    73. recordCreate: {
    74. label: 'custom-Create a new record',
    75. successMsg: 'custom-Successfully added row!',
    76. errorMsg: 'custom-The server encountered an error and the record could not be created.',
    77. },
    78. recordDelete: {
    79. body: 'custom-Are you sure you want to delete this record?',
    80. label: 'custom-Confirm delete',
    81. successMsg: 'custom-Record removed successfully!',
    82. errorMsg: 'custom-The server encountered an error and the record could not be deleted.',
    83. },
    84. recordInfo: {
    85. label: 'custom-Record Info',
    86. },
    87. recordUpdate: {
    88. label: 'custom-Update this record',
    89. successMsg: 'custom-Record updated successfully',
    90. errorMsg: 'custom-The server encountered an error and the record could not be updated.',
    91. },
    92. fieldUpdate: {
    93. label: 'custom-Update this field',
    94. successMsg: 'custom-Field updated successfully',
    95. errorMsg: 'custom-The server encountered an error and the field could not be updated.',
    96. },
    97. removeXSelectedRows: {
    98. body: 'custom-Are you sure you want to delete these records?',
    99. label: 'custom-Remove %v record%p',
    100. successMsg: 'custom-Records removed successfully!',
    101. },
    102. version: {
    103. body: 'custom-',
    104. label: 'custom-Current Version',
    105. },
    106. save: 'custom-Save',
    107. },
    108. iconSet: {
    109. invalidVendor: 'custom-Value added to [%v] does not match allowed vendor list',
    110. invalidVendorMethod: 'custom-Internal Error: There was an issue loading [%v="%v"] icons. Falling back to default icons.',
    111. },
    112. loadMask: {
    113. title: 'custom-loading',
    114. },
    115. pagination: {
    116. page: 'custom-Page',
    117. pageOf: 'custom-of',
    118. rows: 'custom-Rows',
    119. },
    120. tools: {
    121. search: 'custom-Search',
    122. selected: 'custom-%v Item%p Selected',
    123. },
    124. tooltip: {
    125. layoutCard: 'custom-Card Layout',
    126. layoutRow: 'custom-Row Layout',
    127. recordCreate: 'custom-Insert Record',
    128. reload: 'custom-Reload Grid',
    129. },
    130. };
    131. window.addEventListener('load', () => {
    132. // Register Language
    133. ZingGrid.registerLanguage(myLang, 'custom');
    134. // Set custom language to grid
    135. let zgRef = document.querySelector('zing-grid');
    136. zgRef.executeOnLoad(() => {
    137. zgRef.lang = 'custom';
    138. });
    139. });
    140. </script>
    141. </body>
    142.  
    143. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid: Blank Grid</title>
    7. <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.  
    12. <zing-grid editor-controls layout-controls search pager page-size=10 src="https://jsdocs-9d00d.firebaseio.com/addressBook">
    13. </zing-grid>
    14.  
    15. </body>
    16.  
    17. </html>
    1. body {
    2. background: #e6e6e6;
    3. }
    1. let myLang = {
    2. lang: 'custom',
    3. columntypes: {
    4. editor: 'custom-Edit',
    5. remover: 'custom-Delete',
    6. selector: 'custom-Select',
    7. },
    8. context: {
    9. copyCell: 'custom-Copy Cell',
    10. pasteCell: 'custom-Paste Cell',
    11. insertRecordLabel: 'custom-Insert New Record',
    12. insertRecordHere: 'custom-Here',
    13. insertRecordEnd: 'custom-End',
    14. insertRecordStart: 'custom-Start',
    15. deleteRow: 'custom-Delete row',
    16. sortColumn: 'custom-Sort Column',
    17. editCell: 'custom-Edit Cell',
    18. editRow: 'custom-Edit Row',
    19. selectCell: 'custom-Select Cell',
    20. selectRow: 'custom-Select Row',
    21. deselect: 'custom-Deselect',
    22. previousPage: 'custom-Go to previous page',
    23. nextPage: 'custom-Go to next page',
    24. firstPage: 'custom-Go to first page',
    25. lastPage: 'custom-Go to last page',
    26. version: 'custom-ZingGrid Version',
    27. save: 'custom-Save',
    28. cancel: 'custom-Cancel',
    29. },
    30. date: {
    31. shortMonth: ['custom-Jan', 'custom-Feb', 'custom-Mar', 'custom-Apr', 'custom-May', 'custom-Jun', 'custom-Jul', 'custom-Aug', 'custom-Sep', 'custom-Oct', 'custom-Nov', 'custom-Dec'],
    32. longMonth: ['custom-January', 'custom-February', 'custom-March', 'custom-April', 'custom-May', 'custom-June', 'custom-July', 'custom-August', 'custom-September', 'custom-October', 'custom-November', 'custom-December'],
    33. twoWeek: ['custom-Su', 'custom-Mo', 'custom-Tu', 'custom-We', 'custom-Th', 'custom-Fr', 'custom-Sa'],
    34. shortWeek: ['custom-Sun', 'custom-Mon', 'custom-Tue', 'custom-Wed', 'custom-Thu', 'custom-Fri', 'custom-Sat'],
    35. longWeek: ['custom-Sunday', 'custom-Monday', 'custom-Tuesday', 'custom-Wednesday', 'custom-Thursday', 'custom-Friday', 'custom-Saturday'],
    36. am: 'custom-am',
    37. pm: 'custom-pm',
    38. startWeek: 0,
    39. startYear: 6,
    40. },
    41. dialog: {
    42. cancel: 'custom-Cancel',
    43. close: 'custom-X',
    44. confirm: 'custom-Confirm',
    45. create: 'custom-Create',
    46. delete: 'custom-Delete',
    47. ok: 'custom-Ok',
    48. recordCreate: {
    49. label: 'custom-Create a new record',
    50. successMsg: 'custom-Successfully added row!',
    51. errorMsg: 'custom-The server encountered an error and the record could not be created.',
    52. },
    53. recordDelete: {
    54. body: 'custom-Are you sure you want to delete this record?',
    55. label: 'custom-Confirm delete',
    56. successMsg: 'custom-Record removed successfully!',
    57. errorMsg: 'custom-The server encountered an error and the record could not be deleted.',
    58. },
    59. recordInfo: {
    60. label: 'custom-Record Info',
    61. },
    62. recordUpdate: {
    63. label: 'custom-Update this record',
    64. successMsg: 'custom-Record updated successfully',
    65. errorMsg: 'custom-The server encountered an error and the record could not be updated.',
    66. },
    67. fieldUpdate: {
    68. label: 'custom-Update this field',
    69. successMsg: 'custom-Field updated successfully',
    70. errorMsg: 'custom-The server encountered an error and the field could not be updated.',
    71. },
    72. removeXSelectedRows: {
    73. body: 'custom-Are you sure you want to delete these records?',
    74. label: 'custom-Remove %v record%p',
    75. successMsg: 'custom-Records removed successfully!',
    76. },
    77. version: {
    78. body: 'custom-',
    79. label: 'custom-Current Version',
    80. },
    81. save: 'custom-Save',
    82. },
    83. iconSet: {
    84. invalidVendor: 'custom-Value added to [%v] does not match allowed vendor list',
    85. invalidVendorMethod: 'custom-Internal Error: There was an issue loading [%v="%v"] icons. Falling back to default icons.',
    86. },
    87. loadMask: {
    88. title: 'custom-loading',
    89. },
    90. pagination: {
    91. page: 'custom-Page',
    92. pageOf: 'custom-of',
    93. rows: 'custom-Rows',
    94. },
    95. tools: {
    96. search: 'custom-Search',
    97. selected: 'custom-%v Item%p Selected',
    98. },
    99. tooltip: {
    100. layoutCard: 'custom-Card Layout',
    101. layoutRow: 'custom-Row Layout',
    102. recordCreate: 'custom-Insert Record',
    103. reload: 'custom-Reload Grid',
    104. },
    105. };
    106. window.addEventListener('load', () => {
    107. // Register Language
    108. ZingGrid.registerLanguage(myLang, 'custom');
    109. // Set custom language to grid
    110. let zgRef = document.querySelector('zing-grid');
    111. zgRef.executeOnLoad(() => {
    112. zgRef.lang = 'custom';
    113. });
    114. });