• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     /* general CSS selector */
    10.     zg-cell img {
    11.       height: 25px;
    12.     }
    13.  
    14.     /* custom class CSS selector */
    15.     .cell-image-large img {
    16.       width: 300px;
    17.     }
    18.  
    19.     zing-grid[loading] {
    20.       height: 1146px;
    21.     }
    22.   </style>
    23. </head>
    24.  
    25. <body>
    26.   <zing-grid caption="Cute Cats Weather Forecast" data='[
    27. 		    {
    28. 		      "day": "Thursday",
    29. 		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_one.jpg",
    30. 		      "description": "Weather is rainy"
    31. 		    },
    32. 		    {
    33. 		      "day": "Friday",
    34. 		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_two.jpg",
    35. 		      "description": "Weather is cloudy"
    36. 		    },
    37. 		    {
    38. 		      "day": "Saturday",
    39. 		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_three.jpg",
    40. 		      "description": "Weather is partly cloudy"
    41. 		    },
    42. 		    {
    43. 		      "day": "Sunday",
    44. 		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_four.jpg",
    45. 		      "description": "Weather is sunny!"
    46. 		    },
    47. 		    {
    48. 		      "day": "Monday",
    49. 		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_five.jpg",
    50. 		      "description": "weather is gloomy"
    51. 		    }
    52. 		  ]'>
    53.     <zg-colgroup>
    54.       <zg-column index="day"></zg-column>
    55.       <zg-column index="description"></zg-column>
    56.       <!-- use inline ZG style on this colum -->
    57.       <zg-column index="imageUrl" type="image" content-style="height: 75px;" header="Small"></zg-column>
    58.       <!-- use custom class on this column -->
    59.       <zg-column index="imageUrl" type="image" cell-class="cell-image-large" header="Large"></zg-column>
    60.     </zg-colgroup>
    61.   </zing-grid>
    62.   <script>
    63.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    64.   </script>
    65. </body>
    66.  
    67. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid caption="Cute Cats Weather Forecast" data='[
    12. 		    {
    13. 		      "day": "Thursday",
    14. 		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_one.jpg",
    15. 		      "description": "Weather is rainy"
    16. 		    },
    17. 		    {
    18. 		      "day": "Friday",
    19. 		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_two.jpg",
    20. 		      "description": "Weather is cloudy"
    21. 		    },
    22. 		    {
    23. 		      "day": "Saturday",
    24. 		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_three.jpg",
    25. 		      "description": "Weather is partly cloudy"
    26. 		    },
    27. 		    {
    28. 		      "day": "Sunday",
    29. 		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_four.jpg",
    30. 		      "description": "Weather is sunny!"
    31. 		    },
    32. 		    {
    33. 		      "day": "Monday",
    34. 		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_five.jpg",
    35. 		      "description": "weather is gloomy"
    36. 		    }
    37. 		  ]'>
    38.     <zg-colgroup>
    39.       <zg-column index="day"></zg-column>
    40.       <zg-column index="description"></zg-column>
    41.       <!-- use inline ZG style on this colum -->
    42.       <zg-column index="imageUrl" type="image" content-style="height: 75px;" header="Small"></zg-column>
    43.       <!-- use custom class on this column -->
    44.       <zg-column index="imageUrl" type="image" cell-class="cell-image-large" header="Large"></zg-column>
    45.     </zg-colgroup>
    46.   </zing-grid>
    47. </body>
    48.  
    49. </html>
    1. /* general CSS selector */
    2. zg-cell img {
    3.   height: 25px;
    4. }
    5.  
    6. /* custom class CSS selector */
    7. .cell-image-large img {
    8.   width: 300px;
    9. }
    1.