Demos Back to Docs

Custom Menu

43 of 124
You can also make your own custom menu by using the <zg-menu> tag and setting the context-menu attribute of the grid to the id of your menu.
Result Full HTML CSS JS
Edit Download

Chargers Roster (Future) 2018

Source: http://www.chargers.com/team/roster

Wahoo! Custom Menu

Chargers Home Page Chargers Roster
Return to ZingChart
Should have never left San Diego...

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-html,
    .zg-body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .zg-body a {
      color: #04a3f5;
    }

    zg-caption h1 {
      color: #ffffff;
      font-size: 2rem;
    }

    zg-caption p {
      font-size: 1rem;
    }

    zg-head {
      font-size: 1.3rem;
    }

    .zg-menu-h2 {
      margin: 23.904px 0px;
    }

    .zg-menu-hr {
      margin: 9.600px 175.256px;
      border: 0.909px;
    }

    zing-grid[loading] {
      height: 711px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid context-menu="mymenu">
    <zg-caption>
      <h1>Chargers Roster (Future) 2018</h1>
      <p>Source: <a href="http://www.chargers.com/team/roster">http://www.chargers.com/team/roster</a></p>
    </zg-caption>

    <zg-menu id="mymenu" replace>
      <h2 class="zg-menu-h2">Wahoo! Custom Menu</h2>
      <img src="https://storage.googleapis.com/zinggrid-pwa.appspot.com/la-chargers-logo.jpg">
      <hr class="zg-menu-hr">
      <a href="https://www.chargers.com/">Chargers Home Page</a>
      <a href="https://www.chargers.com/team/players-roster/">Chargers Roster</a>
      <hr class="zg-menu-hr">
      <a href="https://www.zingchart.com">Return to ZingChart</a>
      <hr class="zg-menu-hr">
      <footer>Should have never left San Diego...</footer>
    </zg-menu>

    <zg-colgroup>
      <zg-column index="num" header="#"></zg-column>
      <zg-column index="first, last" header="Player" renderer="renderPlayerName"></zg-column>
      <zg-column index="col" header="College" renderer="renderCollegeName"></zg-column>
      <zg-column index="feet, inch" header="Height" renderer="renderHeight"></zg-column>
    </zg-colgroup>

    <zg-data data='[{
	      "num": "3",
	      "feet": "6", 
	      "inch": "0",
	      "first": "roberto", 
	      "last": "aguayo", 
	      "col": "florida state"
      }, {
	      "num": "83", 
	      "feet": "6", 
	      "inch": "4",
	      "first": "braedon",
	      "last": "bowman", 
	      "col": "south alabama"
      }, {
	      "num": "67", 
	      "feet": "6", 
	      "inch": "6",
	      "first": "brett",
	      "last": "boyko", 
	      "col": "nevada-las vegas"
      }, {
	      "num": "45", 
	      "feet": "6", 
	      "inch": "0",
	      "first": "A.J",
	      "last": "hendy", 
	      "col": "Maryland"
      }, {
	      "num": "N/A", 
	      "feet": "6", 
	      "inch": "2",
	      "first": "anthony",
	      "last": "kakwa", 
	      "col": "lake eric"
      }, {
	      "num": "49", 
	      "feet": "6", 
	      "inch": "1",
	      "first": "james",
	      "last": "onwualu", 
	      "col": "notre dame"
      }, {
	      "num": "88", 
	      "feet": "6", 
	      "inch": "3",
	      "first": "andre",
	      "last": "patton", 
	      "col": "rutgers"
      }, {
	      "num": "27", 
	      "feet": "6", 
	      "inch": "2",
	      "first": "jeff",
	      "last": "richards", 
	      "col": "emporia state"
      }, {
	      "num": "90", 
	      "feet": "6", 
	      "inch": "4",
	      "first": "whitney",
	      "last": "richardson", 
	      "col": "lane"
      }, {
	      "num": "82", 
	      "feet": "5", 
	      "inch": "10",
	      "first": "artavis",
	      "last": "scott", 
	      "col": "clemson"
      }, {
	      "num": "64", 
	      "feet": "6", 
	      "inch": "5",
	      "first": "cole",
	      "last": "toner", 
	      "col": "harvard"
      }]'></zg-data>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);

    function renderPlayerName(first, last) {
      return first.toUpperCase() + ' ' + last.toUpperCase();
    }

    function renderCollegeName(col) {
      return col.toUpperCase();
    }

    function renderHeight(feet, inch) {
      return feet + '\'' + inch + '\"';
    }
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
	<head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
		<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
	</head>
	<body class="zg-body">
		<zing-grid context-menu="mymenu">
		  <zg-caption>
		    <h1>Chargers Roster (Future) 2018</h1>
		    <p>Source: <a href="http://www.chargers.com/team/roster">http://www.chargers.com/team/roster</a></p>
		  </zg-caption>

		  <zg-menu id="mymenu" replace>
        <h2 class="zg-menu-h2">Wahoo! Custom Menu</h2>
        <img src="https://storage.googleapis.com/zinggrid-pwa.appspot.com/la-chargers-logo.jpg">
        <hr class="zg-menu-hr">
        <a href="https://www.chargers.com/">Chargers Home Page</a>
        <a href="https://www.chargers.com/team/players-roster/">Chargers Roster</a>
        <hr class="zg-menu-hr">
        <a href="https://www.zingchart.com">Return to ZingChart</a>
        <hr class="zg-menu-hr">
        <footer>Should have never left San Diego...</footer>
      </zg-menu>

		  <zg-colgroup>
        <zg-column index="num" header="#"></zg-column>
        <zg-column index="first, last" header="Player" renderer="renderPlayerName"></zg-column>
        <zg-column index="col" header="College" renderer="renderCollegeName"></zg-column>
        <zg-column index="feet, inch" header="Height" renderer="renderHeight"></zg-column>
	    </zg-colgroup>
	    
	    <zg-data data='[{
	      "num": "3",
	      "feet": "6", 
	      "inch": "0",
	      "first": "roberto", 
	      "last": "aguayo", 
	      "col": "florida state"
      }, {
	      "num": "83", 
	      "feet": "6", 
	      "inch": "4",
	      "first": "braedon",
	      "last": "bowman", 
	      "col": "south alabama"
      }, {
	      "num": "67", 
	      "feet": "6", 
	      "inch": "6",
	      "first": "brett",
	      "last": "boyko", 
	      "col": "nevada-las vegas"
      }, {
	      "num": "45", 
	      "feet": "6", 
	      "inch": "0",
	      "first": "A.J",
	      "last": "hendy", 
	      "col": "Maryland"
      }, {
	      "num": "N/A", 
	      "feet": "6", 
	      "inch": "2",
	      "first": "anthony",
	      "last": "kakwa", 
	      "col": "lake eric"
      }, {
	      "num": "49", 
	      "feet": "6", 
	      "inch": "1",
	      "first": "james",
	      "last": "onwualu", 
	      "col": "notre dame"
      }, {
	      "num": "88", 
	      "feet": "6", 
	      "inch": "3",
	      "first": "andre",
	      "last": "patton", 
	      "col": "rutgers"
      }, {
	      "num": "27", 
	      "feet": "6", 
	      "inch": "2",
	      "first": "jeff",
	      "last": "richards", 
	      "col": "emporia state"
      }, {
	      "num": "90", 
	      "feet": "6", 
	      "inch": "4",
	      "first": "whitney",
	      "last": "richardson", 
	      "col": "lane"
      }, {
	      "num": "82", 
	      "feet": "5", 
	      "inch": "10",
	      "first": "artavis",
	      "last": "scott", 
	      "col": "clemson"
      }, {
	      "num": "64", 
	      "feet": "6", 
	      "inch": "5",
	      "first": "cole",
	      "last": "toner", 
	      "col": "harvard"
      }]'></zg-data>
		</zing-grid>
	</body>
</html>
.zg-html, .zg-body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
.zg-body a { color: #04a3f5; }
zg-caption h1 {
  color: #ffffff;
  font-size: 2rem; 
}
zg-caption p { font-size: 1rem; }
zg-head { font-size: 1.3rem; }
.zg-menu-h2 { margin: 23.904px 0px; }
.zg-menu-hr { margin: 9.600px 175.256px; border: 0.909px; }
function renderPlayerName(first, last) {
    return first.toUpperCase() + ' ' + last.toUpperCase();
}
function renderCollegeName(col) {
    return col.toUpperCase();
}
function renderHeight(feet, inch) {
    return feet + '\'' + inch + '\"';
}

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery