<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid Demo</title>
<script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
zg-caption h1 {
font-size: 2rem;
}
zg-caption p {
font-size: 1rem;
}
zg-head {
font-size: 1.3rem;
}
zing-grid {
margin-top: 1rem;
}
zing-grid[loading] {
height: 701px;
}
</style>
</head>
<body>
<h3>`[filter-on]` sets if filter comparison should be against the raw or rendered values.</h3>
<p>To test this feature out, use the "Rendered item names" color and filter for "Item: ".</p>
<p>It should only dispaly results when filtering on "rendered" values.</p>
<select>
<option value="raw">raw</option>
<option value="rendered" selected>rendered</option>
</select>
<zing-grid caption="Store Items (HTML example w/ one unfilter column)" filter="both" filter-on="rendered">
<zg-colgroup>
<zg-column index="item,color,size" header="Rendered item names" renderer="renderItemName"></zg-column>
<zg-column index="item" header="Item"></zg-column>
<zg-column index="color" header="Color"></zg-column>
<zg-column index="size" header="Size"></zg-column>
<zg-column index="price" header="Price" filter="disabled" type="currency" type-currency="USD"></zg-column>
</zg-colgroup>
<zg-data data='[{
"item": "shirt",
"color": "red",
"size": "medium",
"price": "5"
}, {
"item": "hat",
"color": "brown",
"size": "na",
"price": "10"
}, {
"item": "shirt",
"color": "blue",
"size": "small",
"price": "5"
}, {
"item": "jeans",
"color": "blue",
"size": "large",
"price": "25"
}, {
"item": "scarf",
"color": "purple",
"size": "na",
"price": "12"
}, {
"item": "shirt",
"color": "pink",
"size": "medium",
"price": "14"
}, {
"item": "jeans",
"color": "black",
"size": "large",
"price": "40"
}, {
"item": "jacket",
"color": "black",
"size": "medium",
"price": "100"
}, {
"item": "jeans",
"color": "red",
"size": "small",
"price": "35"
}, {
"item": "shirt",
"color": "yellow",
"size": "medium",
"price": "16"
}, {
"item": "jacket",
"color": "red",
"size": "large",
"price": "30"
}]'></zg-data>
</zing-grid>
<script>
ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // Custom renderer
function renderItemName(item, color, size) {
return `Item: ${size !== 'na' ? `${size} ` : ''}${color} ${item}`;
};
ZingGrid.registerMethod('renderItemName', renderItemName);
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
const selectRef = document.querySelector('select');
const zgRef = document.querySelector('zing-grid');
selectRef.addEventListener('change', e => {
zgRef.setAttribute('filter-on', e.target.value);
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid Demo</title>
<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>
<body>
<h3>`[filter-on]` sets if filter comparison should be against the raw or rendered values.</h3>
<p>To test this feature out, use the "Rendered item names" color and filter for "Item: ".</p>
<p>It should only dispaly results when filtering on "rendered" values.</p>
<select>
<option value="raw">raw</option>
<option value="rendered" selected>rendered</option>
</select>
<zing-grid caption="Store Items (HTML example w/ one unfilter column)" filter="both" filter-on="rendered">
<zg-colgroup>
<zg-column index="item,color,size" header="Rendered item names" renderer="renderItemName"></zg-column>
<zg-column index="item" header="Item"></zg-column>
<zg-column index="color" header="Color"></zg-column>
<zg-column index="size" header="Size"></zg-column>
<zg-column index="price" header="Price" filter="disabled" type="currency" type-currency="USD"></zg-column>
</zg-colgroup>
<zg-data data='[{
"item": "shirt",
"color": "red",
"size": "medium",
"price": "5"
}, {
"item": "hat",
"color": "brown",
"size": "na",
"price": "10"
}, {
"item": "shirt",
"color": "blue",
"size": "small",
"price": "5"
}, {
"item": "jeans",
"color": "blue",
"size": "large",
"price": "25"
}, {
"item": "scarf",
"color": "purple",
"size": "na",
"price": "12"
}, {
"item": "shirt",
"color": "pink",
"size": "medium",
"price": "14"
}, {
"item": "jeans",
"color": "black",
"size": "large",
"price": "40"
}, {
"item": "jacket",
"color": "black",
"size": "medium",
"price": "100"
}, {
"item": "jeans",
"color": "red",
"size": "small",
"price": "35"
}, {
"item": "shirt",
"color": "yellow",
"size": "medium",
"price": "16"
}, {
"item": "jacket",
"color": "red",
"size": "large",
"price": "30"
}]'></zg-data>
</zing-grid>
</body>
</html>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
zg-caption h1 {
font-size: 2rem;
}
zg-caption p {
font-size: 1rem;
}
zg-head {
font-size: 1.3rem;
}
zing-grid {
margin-top: 1rem;
}
// Custom renderer
function renderItemName(item, color, size) {
return `Item: ${size !== 'na' ? `${size} ` : ''}${color} ${item}`;
};
ZingGrid.registerMethod('renderItemName', renderItemName);
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
const selectRef = document.querySelector('select');
const zgRef = document.querySelector('zing-grid');
selectRef.addEventListener('change', e => {
zgRef.setAttribute('filter-on', e.target.value);
});
});