Media Types

ZingGrid has defined iframe and image column types which you can use to customize your grids with various media content.

Images

Use the image column type to display images in grids, like so:

<zg-column index="imageUrl" type="image"></zg-column>

Images in Columns Grid

Here is a complete grid that displays data in the form of cute images of cats:

Top

GIFs

You can also use the image column type to display GIFs in grids.

GIFs in Columns Grid

Here is a complete grid that displays data in the form of cat GIFs:

Top

Video

Use index="videoUrl" with the iframe column type to display videos in grids, like so:

<zg-column index="videoUrl" type="iframe" alt="missing iframe"></zg-column>

Videos in Columns Grid

Here is a complete grid that displays data in the form of embedded videos:

Top

Google Maps

Use index="map" with the iframe type to display maps in your grids, like so:

<zg-column index="map" type="iframe"></zg-column>

Google Maps in Columns Grid:

Here is a complete grid that displays data in the form of maps embedded from Google Maps:

Top

Many More!

The iframe and image column types offer a lot of flexibility for your grids. If you don't see your preferred media genre here, let us know and we'll add an example for you!

Related Resources

Here are some extra resources related to this feature to help with creating your grid: