Custom Menu

42 of 123
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 src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  <style>
    .zg-html,
    .zg-body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

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

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

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

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

    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>Wahoo! Custom Menu</h2>
      <img src="https://storage.googleapis.com/zinggrid-pwa.appspot.com/la-chargers-logo.jpg">
      <hr>
      <a href="https://www.chargers.com/">Chargers Home Page</a>
      <a href="https://www.chargers.com/team/players-roster/">Chargers Roster</a>
      <hr>
      <a href="https://www.zingchart.com">Return to ZingChart</a>
      <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>
    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" defer></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>Wahoo! Custom Menu</h2>
        <img src="https://storage.googleapis.com/zinggrid-pwa.appspot.com/la-chargers-logo.jpg">
        <hr>
        <a href="https://www.chargers.com/">Chargers Home Page</a>
        <a href="https://www.chargers.com/team/players-roster/">Chargers Roster</a>
        <hr>
        <a href="https://www.zingchart.com">Return to ZingChart</a>
        <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 { font-size: 2rem; }
zg-caption p { font-size: 1rem; }
zg-head { font-size: 1.3rem; }
function renderPlayerName(first, last) {
  return first.toUpperCase() + ' ' + last.toUpperCase();
}

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

function renderHeight(feet, inch) {
  return feet + '\"' + inch;
}

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

Demo Gallery