jQWidgets Forums
Forum Replies Created
-
Author
-
Hi Peter,
How come some of your widgets support em’s, like JqxInput.
Regards,
PatrickMarch 25, 2016 at 3:16 pm in reply to: Delete row on page which is not visible Delete row on page which is not visible #82846Thanks Ivailo
March 24, 2016 at 2:15 pm in reply to: Delete row on page which is not visible Delete row on page which is not visible #82809Hi Ivailo,
Your solution works but only when the rows are added before pageable set to true. How can this be achieved when rows are added dynamically as per demo.
Regards
November 11, 2015 at 4:23 pm in reply to: Input fields window content Input fields window content #78004Hi Peter,
The following is a rough example of that error message. Try opening & submitting forms…..
Patrick
<html lang=”en” ng-app=”app”>
<head>
<meta charset=”utf-8″ />
<title>Example</title><link href=”jqx.base.css” rel=”stylesheet” />
<link href=”jqx.arctic.css” rel=”stylesheet” /><script src=”jquery-1.11.1.min.js”></script>
<script src=”angular.min.js”></script>
<script src=”jqx-all.js”></script><script src=”jqxangular.js” type=”text/javascript”></script>
</head>
<body ng-controller=”MainController as main”><div class=”window” window-form></div>
<button ng-click=”main.form1();”>Open Form2</button>
<button ng-click=”main.form2();”>Open Form1</button><script type=”text/javascript”>
var app = angular.module(‘app’, [‘jqwidgets’]);
app.controller(‘MainController’, MainController);MainController.$inject = [‘$rootScope’];
function MainController($rootScope){
var vm = this;vm.form1 = function(){
$rootScope.$emit(‘displayForm’, {
form: {
title: ‘TestForm1’,
submit: ‘Submit’,
rows: [
{ type: ‘String’, label: ‘TestInput4’, key: null, value: null, validators: [{ type: ‘Required’ }] },
{ type: ‘String’, label: ‘TestInput5’, key: null, value: null, validators: [] },
{ type: ‘String’, label: ‘TestInput6’, key: null, value: null, validators: [{ type: ‘Required’ }] }
]
}
}, vm.submit);
};
vm.form2 = function(){
$rootScope.$emit(‘displayForm’, {
form: {
title: ‘TestForm2’,
submit: ‘Submit’,
rows: [
{ type: ‘String’, label: ‘TestInput6’, key: null, value: null, validators: [{ type: ‘Required’ }] }
]
}
}, vm.submit);
};
vm.submit = function(results){
console.log(results);
}
}app.directive(‘windowForm’, windowForm)
windowForm.$inject = [‘$compile’, ‘$rootScope’, ‘$timeout’];
function windowForm ($compile, $rootScope, $timeout) {var _window, _settings, _callback, $element = null;
controller.$inject = [‘$scope’];
function controller($scope){
var vm = this;vm.submit = function(results){
_window.close();
_callback(results);
};
vm.reset = function(){
angular.forEach(_settings.form.rows, function(row){
vm[row.$key] = null;
vm[row.$key + ‘Instance’].destroy();
});
vm.submitButton.destroy();
_window.setContent(”);
};
}function link(scope, element, attrs, ngModel) {
$element = element;var content = generateWindow();
element.html(content).show();
element.jqxWindow({
theme: ‘artic’,
isModal: true,
autoOpen: false,
keyboardCloseKey: ‘esc’,
draggable: true,
resizable: false,
position: ‘center’,
width: ‘18%’,
height: ‘auto’,
maxHeight: 800
});
compileForm(element.contents(), scope);
_window = element.jqxWindow(‘getInstance’);element.bind(‘open’, function(){
if(element && element.find(‘input’))
element.find(‘input’)[0].focus();
});
element.bind(‘close’, function(){
scope.vm.reset();
});$rootScope.$on(‘displayForm’, function(event, settings, callback){
_settings = settings;
_callback = callback;
init(settings);
_window.open();
});$rootScope.$on(‘hideForm’, function(event){
_window.close();
});function init(settings){
var form = generateForm(settings);
_window.setContent(form);
_window.setTitle(settings.form.title);
compileForm(element.contents(), scope);
}
}// Generate window HTML
function generateWindow(config){
return ‘<div class=”windowTitle”>Default</div>\
<div class=”windowContent”><\div>’;
};// Generate form HTML
function generateForm(config){
return addForm(config);
}// Add form HTML
function addForm(config){
config.$formName = config.form.title.replace(‘ ‘, ”);
return ‘<form name=”vm.’ + config.$formName + ‘” novalidate>’
+ addRows(config) +
‘<div class=”windowActionRow”>\
<div class=”windowContentLeft”></div>\
<div class=”windowContentRight”>\
<jqx-button class=”windowActionBtn” jqx-instance=”vm.submitButton” jqx-theme=”\’artic\'” jqx-width=”\’40%\'” jqx-height=”\’100%\'”\
jqx-template=”\’info\'” ng-click=”vm.submit(‘ + addFormSubmission(config) + ‘)” ng-disabled=”!vm.’ + config.$formName + ‘.$valid”>’ + config.form.submit + ‘</jqx-button>\
</div>\
</div>\
</form>’;
}function addRows(config){
var html = ”;
angular.forEach(config.form.rows, function(row){
html += addRow(config, row);
});
return html;
}function addRow(config, row){
return ‘<div class=”windowContentRow”>\
<div class=”windowContentLeft”><label>’ + row.label + ‘</label></div>\
<div class=”windowContentRight”>’
+ addField(row) +
‘</div>\
</div>’
+ addErrors(config, row);
}function addField(row){
row.$key = !row.key?row.label:row.key;
switch(row.type){
case ‘Boolean’:
break;
case ‘Double’:
break;
case ‘Int’:
break;
case ‘String’:
return ‘<jqx-input jqx-instance=”vm.’ + row.$key + ‘Instance” ng-model=”vm.’ + row.$key + ‘” name=”‘ + row.$key + ‘” jqx-theme=”\’artic\'” jqx-width=”\’100%\'” jqx-height=”\’100%\'” ‘ + addValidators(row) + ‘ autocomplete=”off”></jqx-input>’;
case ‘SelectValue’:
break;
case ‘SelectObject’:
break;
}
}function addValidators(row){
if(!row.validators) return ”;
var html = ”;
angular.forEach(row.validators, function(validator){
html += addValidator(validator)
});
return html;
}function addValidator(validator){
switch(validator.type){
case ‘Required’:
return ‘ng-required=”true”‘;
}
}function addErrors(config, row){
if(!row.validators) return ”;
return ‘<div class=”windowContentError” ng-messages=”vm.’ + config.$formName + ‘.’ + row.$key + ‘.$error”>’
+ addErrorMessages(row) +
‘</div>’;
}function addErrorMessages(row){
var html = ”;
angular.forEach(row.validators, function(validator){
html += addErrorMessage(validator)
});
return html;
}function addErrorMessage(validator){
switch(validator.type){
case ‘Required’:
return ‘<div class=”errorMsg” ng-message=”required”>Required….</div>’
}
}function compileForm(form, scope){
$compile(form)(scope)
}function addFormSubmission(config){
var html = ‘{‘;
angular.forEach(config.form.rows, function(row){
html += row.$key + ‘:vm.’ + row.$key + ‘,’
});
html = html.substring(0, html.length-1) + ‘}’;
return html;
}// DDO
return {
restrict: ‘EA’,
scope: {
//settings: ‘=’,
// onSubmit: ‘&’
},
controller: controller,
controllerAs: ‘vm’,
link: link
};
}
</script><style type=”text/css”>
.windowTitle{
font-size: 1em;
}
.windowContent {
font-size: 1em;
margin-top: 0;
overflow: hidden;
}
.windowContent form {
position: relative;
width: 99%;
height: 100%;
}
.windowContent label {
font-weight: bold;
font-size: 0.8em;
}
.windowContentLeft {
position: relative;
width: 40%;
float: left;
height: 100%;
}
.windowContentRight {
position: relative;
width: 60%;
float: left;
height: 100%;
}
.windowActionBtn {
float: right;
line-height: 0.5em;
margin-top: 0;
}
.errorMsg {
font-weight: bold;
font-size: 0.7em;
color: red;
float: right;
}
.windowContentRow {
position: relative;
width: 100%;
height: 1.4em;
margin-bottom: 3px;
}
.windowContentError {
position: relative;
width: 100%;
height: 1.2em;
}
.windowActionRow {
position: relative;
width: 100%;
height: 1.65em;
margin-bottom: 3px;
margin-top: 5px;
}
</style></body>
</html>
`We would also like to see a type definition file, any future plan for this?
Thanks Dimitar, it works perfectly now.
Regards,
PatrickHi Dimitar,
Sorry the closing tags where accidentally removed when I removed references to images. I have created a plunk @ http://plnkr.co/edit/99o3Hek4OdXYx8NZvlHd. Please try this in FireFox (38.0.5) to see the issue.
Regards,
Patrick -
AuthorPosts