CollectionView Validation

The CollectionView has a getError property that provides validation support. You can perform your own validation using a custom function when items are edited. This sample uses the getError property function to only allow certain countries and positive numbers to be commited.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as grid from '@grapecity/wijmo.grid'; import { countries, getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create a CollectionView let view = new wijmo.CollectionView(getData(), { sortDescriptions: ['country'], getError: (item, propName) => { switch (propName) { case 'country': return countries.indexOf(item.country) < 0 ? 'Invalid Country' : ''; case 'downloads': case 'sales': case 'expenses': return item[propName] < 0 ? 'Negative values not allowed!' : ''; case 'active': return item.active && item.country.match(/^(US|UK)$/) ? 'Active items not allowed in the US or UK!' : ''; } // return null; } }); // // create grid for editing with validation let theGrid = new grid.FlexGrid('#theGrid', { itemsSource: view }); // // use getError to provide form validation let theItem = {}; // document.getElementById('theForm').addEventListener('input', e => { let input = e.target; let propName = input.id; // theItem[propName] = input.value; input.setCustomValidity(view.getError(theItem, propName)); }); // document.getElementById('theForm').addEventListener('submit', e => e.preventDefault()); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Validation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <h2> FlexGrid Validation </h2> <p> The <b>FlexGrid</b> uses the <b>CollectionView.getError</b> property by default. Try entering an invalid country or a negative number to see how the grid identifies the error and prevents the invalid entry from being committed:</p> <div id="theGrid"> </div> <h2> Forms Validation </h2> <p> You can use the the <b>CollectionView.getError</b> property to validate forms as well. Simply call the function and apply the result to the appropriate input element using the <b>setCustomValidity</b> method that is part of the HTML5 validation API: </p> <form id="theForm" class="form-inline"> <div class="form-group"> <label for="country">Country</label> <input id="country" type="text" class="form-control" required value="US"> </div> <div class="form-group"> <label for="downloads">Downloads</label> <input id="downloads" type="number" class="form-control" required value="123"> </div> <div class="form-group"> <label for="sales">Sales</label> <input id="sales" type="number" class="form-control" required value="123"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </body> </html> // export const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece', 'Spain', 'Portugal', 'Australia']; // export function getData() { // create some random data let data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, active: i % 4 == 0 }); } // return data; } .form-group { margin-right: 8px; } .form-group > label { margin-right: 3px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; // import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { DataService, countries, TDataItem } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { view: wijmo.CollectionView; theItem: TDataItem = <any>{}; // constructor(@Inject(DataService) private dataService: DataService) { this.view = new wijmo.CollectionView(dataService.getData(), { sortDescriptions: ['country'], getError: (item: TDataItem, propName: string) => { switch (propName) { case 'country': return countries.indexOf(item.country) < 0 ? 'Invalid Country' : ''; case 'downloads': case 'sales': case 'expenses': return item[propName] < 0 ? 'Negative values not allowed!' : ''; case 'active': return item.active && item.country.match(/^(US|UK)$/) ? 'Active items not allowed in the US or UK!' : ''; } // return null; } }); } // validateForm(input: HTMLInputElement) { let propName = input.id; // this.theItem[propName] = input.value; input.setCustomValidity(this.view.getError(this.theItem, propName)); } } // @NgModule({ imports: [WjGridModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Validation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <h2> FlexGrid Validation </h2> <p> The <b>FlexGrid</b> uses the <b>CollectionView.getError</b> property by default. Try entering an invalid country or a negative number to see how the grid identifies the error and prevents the invalid entry from being committed: </p> <wj-flex-grid [itemsSource]="view"> </wj-flex-grid> <h2> Forms Validation </h2> <p> You can use the the <b>CollectionView.getError</b> property to validate forms as well. Simply call the function and apply the result to the appropriate input element using the <b>setCustomValidity</b> method that is part of the HTML5 validation API: </p> <form id="theForm" class="form-inline" (input)="validateForm($event.target)" (submit)="$event.preventDefault()"> <div class="form-group"> <label for="country">Country</label> <input id="country" type="text" class="form-control" required value="US"> </div> <div class="form-group"> <label for="downloads">Downloads</label> <input id="downloads" type="number" class="form-control" required value="123"> </div> <div class="form-group"> <label for="sales">Sales</label> <input id="sales" type="number" class="form-control" required value="123"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> import { Injectable } from '@angular/core'; // export type TDataItem = { country: string; downloads: number; sales: number; expenses: number; active: boolean; } // export const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece', 'Spain', 'Portugal', 'Australia']; // @Injectable() export class DataService { getData() { // create some random data let data: TDataItem[] = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, active: i % 4 == 0 }); } // return data; } } .form-group { margin-right: 8px; } .form-group > label { margin-right: 3px; } <template> <div class="container-fluid"> <h2>FlexGrid Validation</h2> <p> The <b>FlexGrid</b> uses the <b>CollectionView.getError</b> property by default. Try entering an invalid country or a negative number to see how the grid identifies the error and prevents the invalid entry from being committed: </p> <wj-flex-grid :itemsSource="view"></wj-flex-grid> <h2>Forms Validation</h2> <p> You can use the the <b>CollectionView.getError</b> property to validate forms as well. Simply call the function and apply the result to the appropriate input element using the <b>setCustomValidity</b> method that is part of the HTML5 validation API: </p> <form id="theForm" class="form-inline" @input="validateForm($event.target)" @submit="$event.preventDefault()"> <div class="form-group"> <label for="country">Country</label> <input id="country" type="text" class="form-control" required value="US"> </div> <div class="form-group"> <label for="downloads">Downloads</label> <input id="downloads" type="number" class="form-control" required value="123"> </div> <div class="form-group"> <label for="sales">Sales</label> <input id="sales" type="number" class="form-control" required value="123"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </template> <script> import "bootstrap.css"; import "@grapecity/wijmo.styles/wijmo.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.grid"; import * as wijmo from "@grapecity/wijmo"; import { getData, countries } from "./data"; let App = Vue.extend({ name: "app", data: function() { return { theItem: {}, view: new wijmo.CollectionView(getData(), { sortDescriptions: ["country"], getError: (item, propName) => { switch (propName) { case "country": return countries.indexOf(item.country) < 0 ? "Invalid Country" : ""; case "downloads": case "sales": case "expenses": return item[propName] < 0 ? "Negative values not allowed!" : ""; case "active": return item.active && item.country.match(/^(US|UK)$/) ? "Active items not allowed in the US or UK!" : ""; } return null; } }) }; }, methods: { validateForm: function(input) { let propName = input.id; // this.theItem[propName] = input.value; input.setCustomValidity(this.view.getError(this.theItem, propName)); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Validation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export function getData() { let data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, active: i % 4 == 0 }); } // return data; } export const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece', 'Spain', 'Portugal', 'Australia']; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wijmo from '@grapecity/wijmo'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import { getData, countries } from './data'; class App extends React.Component { constructor(props) { super(props); this._theItem = {}; this._validateForm = (input) => { let propName = input.id, value = input.value; this._theItem[propName] = value; input.setCustomValidity(this._view.getError(this._theItem, propName)); }; this._view = new wijmo.CollectionView(getData(), { sortDescriptions: ['country'], getError: (item, propName) => { switch (propName) { case 'country': return countries.indexOf(item.country) < 0 ? 'Invalid Country' : ''; case 'downloads': case 'sales': case 'expenses': return item[propName] < 0 ? 'Negative values not allowed!' : ''; case 'active': return item.active && item.country.match(/^(US|UK)$/) ? 'Active items not allowed in the US or UK!' : ''; } return null; } }); } render() { return <div className="container-fluid"> <h2>FlexGrid Validation</h2> <p> The <b>FlexGrid</b> uses the<b>CollectionView.getError </b> property by default. Try entering an invalid country or a negative number to see how the grid identifies the error and prevents the invalid entry from being committed: </p> <wjGrid.FlexGrid itemsSource={this._view}> </wjGrid.FlexGrid> <h2>Forms Validation</h2> <p> You can use the the <b>CollectionView.getError</b> property to validate forms as well. Simply call the function and apply the result to the appropriate input element using the <b>setCustomValidity</b> method that is part of the HTML5 validation API: </p> <form id="theForm" className="form-inline" onInput={e => this._validateForm(e.target)} onSubmit={e => e.preventDefault()}> <div className="form-group"> <label htmlFor="country">Country</label> <input id="country" type="text" className="form-control" required defaultValue="US"/> </div> <div className="form-group"> <label htmlFor="downloads">Downloads</label> <input id="downloads" type="number" className="form-control" required defaultValue="123"/> </div> <div className="form-group"> <label htmlFor="sales">Sales</label> <input id="sales" type="number" className="form-control" required defaultValue="123"/> </div> <button type="submit" className="btn btn-primary">Submit</button> </form> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .form-group { margin-right: 8px; } .form-group > label { margin-right: 3px; } export const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece', 'Spain', 'Portugal', 'Australia']; export function getData() { // create some random data let data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, active: i % 4 == 0 }); } // return data; }