<!DOCTYPE html>
<html ng-app="testApp">
<head>
<meta charset="utf-8"/>
<title>jqxTreeGrid</title>
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css"/>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<!-- <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> -->
<!-- <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/angular.min.js"></script> -->
<script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="testController">
<p>1. Set a 'Hire Date' value before to '01/01/2015' to see validation error</p>
<p>2. Resize the window</p>
<p>Validation error will disappear and the grid is not editable anymore. Cannot expand or collapse also.</p>
<div>
<h3>Register</h3>
</div>
<div style="overflow: hidden;">
<form jqx-validator jqx-settings="validatorSettings" id="testForm">
<table class="register-table">
<tr>
<td valign="top">Username:</td>
<td valign="top">
<jqx-input jqx-width="200" jqx-height="25" id="userInput"></jqx-input>
</td>
</tr>
<tr>
<td valign="top">Birth date:</td>
<td valign="top">
<jqx-date-time-input ng-model="myDate" jqx-watch-settings jqx-settings="dateSettings" id="birthInput"></jqx-date-time-input>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
var testApp = angular.module("testApp", ["jqwidgets"]);
testApp.controller("testController", function ($scope) {
$scope.validatorSettings = {
hintType: 'label',
animationDuration: 0,
rules: [
{ input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' },
{
input: '#birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged', rule: function (input, commit) {
var date = $('#birthInput').jqxDateTimeInput('value');
var result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
// call commit with false, when you are doing server validation and you want to display a validation error on this field.
return result;
}
}
]
};
// validate
$scope.validate = function () {
$scope.validatorSettings.apply('validate');
};
$scope.toolTipContent = "The Amazing Spider-man";
$scope.dateSettings = {
width: '150px',
height: '30px',
disabled: false,
clearString: 'Clear',
formatString: 'MM/dd/yyyy',
textAlign: 'center'
};
});
// angular.module("testApp").factory('$exceptionHandler', function () {
// return function (exception, cause) {
// exception.message += ' (caused by "' + cause + '")';
// throw exception;
// }
// });
/* Put your css in here */
h1 {
color: red;
}