<!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-conditions]` sets the list of condition options in the filter menu.</h3>
<select multiple>
<option value="none" selected>none</option>
<option value="empty">empty</option>
<option value="notEmpty">notEmpty</option>
<option value="equals">equals</option>
<option value="notEquals">notEquals</option>
<option value="beginsWith">beginsWith</option>
<option value="endsWith">endsWith</option>
<option value="contains" selected>contains</option>
<option value="notContains">notContains</option>
<option value="break" selected>break</option>
<option value="default">default</option>
<option value="custom" selected>Is Shirt (custom)</option>
</select>
<zing-grid caption="Store Items (HTML example w/ one unfilter column)" filter="both" filter-conditions="none, contains, break, custom">
<zg-colgroup>
<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 filter condition
let conditionObj = {
title: "Is Shirt",
fieldCount: 0,
filterMethod: (obj) => {
return obj && obj.dataVal && obj.dataVal === 'shirt';
},
};
ZingGrid.registerCustomFilterMethod('custom', conditionObj);
// 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-conditions', [...e.target.selectedOptions].map((opt) => opt.textContent).join(', '));
});
});
</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-conditions]` sets the list of condition options in the filter menu.</h3>
<select multiple>
<option value="none" selected>none</option>
<option value="empty">empty</option>
<option value="notEmpty">notEmpty</option>
<option value="equals">equals</option>
<option value="notEquals">notEquals</option>
<option value="beginsWith">beginsWith</option>
<option value="endsWith">endsWith</option>
<option value="contains" selected>contains</option>
<option value="notContains">notContains</option>
<option value="break" selected>break</option>
<option value="default">default</option>
<option value="custom" selected>Is Shirt (custom)</option>
</select>
<zing-grid caption="Store Items (HTML example w/ one unfilter column)" filter="both" filter-conditions="none, contains, break, custom">
<zg-colgroup>
<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 filter condition
let conditionObj = {
title: "Is Shirt",
fieldCount: 0,
filterMethod: (obj) => {
return obj && obj.dataVal && obj.dataVal === 'shirt';
},
};
ZingGrid.registerCustomFilterMethod('custom', conditionObj);
// 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-conditions', [...e.target.selectedOptions].map((opt) => opt.textContent).join(', '));
});
});