Develop Reference

How can enable/disable auto complete options for ACE editor?

I'd like to enable/disable autocomplete options of the ACE editor by pressing the keys 'ctrl+spacebar'.
Below mentioned is my code which I am using
highlightEditor(editor, codeEditorElmRef) {
const element = codeEditorElmRef;
const editorOptions: Partial<ace.Ace.EditorOptions> = {
highlightActiveLine: true,
showLineNumbers: true,
highlightSelectedWord: true,
fontSize: 12,
tabSize: 2
};
const codeEditor: ace.Ace.Editor = ace.edit(element, editorOptions);
codeEditor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
console.log("153 else statement")
codeEditor.setOptions({
enableBasicAutocompletion: false,
enableSnippets: false,
enableLiveAutocompletion: false
let currentObj = this;
// key bindings to ace editor
codeEditor.commands.addCommand({
name: 'turn-on/off',
bindKey: { win: "Ctrl-space", mac: "Cmd-space" },
exec: function (editor) {
currentObj.highlightEditor(editor, codeEditorElmRef);
}
});
editor.editorID = codeEditor.id;
codeEditor.resize(true);
this.aceCodeEditors.push(codeEditor);
}
Please help me in this.

Getting a Garbage value on Printing a Page in PHP Desktop

I am Printing a invoice I filled with input values for print, After generating Final Invoice I am getting Garbage value not in correct format I have shared Below Image. But if I use Php Desktop on external Browser then Printing a page getting correct value. Thanks in Advance.
This is My json for php Desktop
{
"application": {
"single_instance_guid": "",
"dpi_aware": true
},
"debugging": {
"show_console": false,
"subprocess_show_console": false,
"log_level": "DEBUG4",
"log_file": "debug.log"
},
"main_window": {
"title": "PHP Desktop",
"icon": "",
"default_size": [1024, 768],
"minimum_size": [800, 600],
"maximum_size": [0, 0],
"disable_maximize_button": false,
"center_on_screen": true,
"start_maximized": false,
"start_fullscreen": false,
"print": true
},
"popup_window": {
"icon": "",
"fixed_title": "",
"center_relative_to_parent": true,
"default_size": [1024, 768]
},
"web_server": {
"listen_on": ["127.0.0.1", 0],
"www_directory": "www",
"index_files": ["index.html", "index.php"],
"cgi_interpreter": "php/php-cgi.exe",
"cgi_extensions": ["php"],
"cgi_temp_dir": "",
"404_handler": "/pretty-urls.php"
},
"chrome": {
"log_file": "debug.log",
"log_severity": "default",
"cache_path": "webcache",
"external_drag": true,
"external_navigation": true,
"reload_page_F5": true,
"devtools_F12": true,
"remote_debugging_port": 0,
"command_line_switches": {},
"enable_downloads": true,
"context_menu": {
"enable_menu": true,
"navigation": true,
"print": true,
"view_source": true,
"open_in_external_browser": true,
"devtools": true
}
}
}
The Above json is for PHP Desktop Settings, should I change anything in this json?
Below is my code.
function data() {
var separateDecimal = lclTotal.toString().split('.');
var paisa = parseInt(separateDecimal[1]);
var paisaInt = parseInt(paisa);
$("#txtPrintName").val($("#name").val());
$("#txtPrintAddress").val($("#address").val());
$("#txtPrintMobile").val($("#mobile").val());
}
$(document).on("click", "#print", function (e) {
// $("#supplier-info, #invoice-no, #txtUniqueNo, #delivery-note, #supplier-reference, #txtSupplierRef, #buyer, #buyer-label, #buyer-label, #txtCusName, #txtAddress, #txtGSTIN").printThis({
$("#printCode").printThis({
debug: true, // show the iframe for debugging
importCSS: true, // import page CSS
importStyle: true, // import style tags
printContainer: true, // grab outer container as well as the contents of the selector
loadCSS:"sale.css", // path to additional css file - use an array [] for multiple
pageTitle: "TAX INVOICE", // add title to print page
removeInline: true, // remove all inline styles from print elements
printDelay: 300, // variable print delay; depending on complexity a higher value may be necessary
base: true,
footer: "", // prefix to html
formValues: true // preserve input/form values
});
});

I got Fixed with, I changed version of the PHP Desktop.

How to get Regular Expression in IgGrid cell (Infragistics)?

how can i have a regular expression on a igTextEditor in igGrid Updating?
i tried to use validate option but it didn't worked.
$("#schedulerTable").igGrid({
columns: $scope.schedulerColumns,
width: "87%",
height: "300px",
fixedHeaders: true,
autoGenerateColumns: false,
autofitLastColumn: true,
autoCommit: true,
renderCheckboxes: true,
responseDataKey: "results",
dataSource: $scope.schedulerData,
updateUrl: "",
primaryKey: 'Id',
features: [
{
name: "Updating",
generatePrimaryKeyValue: function (evt, ui) {
nextPrimarykey -= 1;
ui.value = nextPrimarykey;
},
enableAddRow: true,
enableDeleteRow: true,
editMode: "row",
columnSettings: [
{
columnKey: "Id",
editorType: "numeric",
editorOptions: {
readOnly: true
}
}, {
columnKey: "Time",
editorType: "text",
editorOptions: {
},
validatorOptions: {
regExp: /^[a-zA-Z]{1}[a-zA-Z0-9_\.\-]*\#\w{2,10}\.\w{1,10}$/,
onblur: true,
onchange: true
},
required: true,
validation: true,
defaultValue: "00:00"
},
{
columnKey: "Mo"
},
{
columnKey: "Tu"
},
{
columnKey: "We"
},
{
columnKey: "Th"
},
{
columnKey: "Fi"
}]
}]
});
i want to achive a time picker in the Time Column but that doesn't exist so i try to get only time in the textEditor by regular expression.
the grid gets loaded with columns named Time, Mo- Friday.
if you click on add in grid you can click in the input field and fill your time. the time should get validated before clicking on done and show a error message.
to see how the table look like: https://codepen.io/ablablabla/pen/PJLbJz

The lack of validation is because the validatorOptions belong to the editorOptions (as those get passed down to whatever editor you choose as provider). The validation: true only gets some defaults, which really won't do much for a text field besides the required.
And then the RegExp option (which is for an email in the snippet above as far as I can tell) has been pattern since 15.2 :) So in the end for that time column you can try:
//...
editorOptions: {
validatorOptions: {
pattern: /^\d{1,2}\:\d{2}$/,
onblur: true,
onchange: true
},
},
//..
Here's an updated codepen: https://codepen.io/anon/pen/YrgYxj
Edit: Or if you want to set the error message:
//...
editorOptions: {
validatorOptions: {
pattern: {
expression: /^\d{1,2}\:\d{2}$/,
errorMessage: "Time should match a pattern like 00:00"
},
onblur: true,
onchange: true
},
},
//..
Depending on your goals you could also use a Mask Editor or a Date Editor as provider. Also the obligatory docs link: https://www.igniteui.com/help/iggrid-updating
P.S. Bind to an empty array to avoid the error for that first row that has no values and more importantly primary key.

Knockout JS issue with tinymce textarea

Javascript
var tiny_options = {
height: 120,
width: 300,
mode: 'textareas',
theme: 'advanced',
theme_advanced_buttons1: 'bold,italic,underline',
theme_advanced_buttons2: '',
theme_advanced_fonts: 'Arial=arial,helvetica,sans-serif,Courier New=courier new,courier,monospace,Georgia=georgia,times new roman,times,serif,Tahoma=tahoma,arial,helvetica,sans-serif,Times=times new roman,times,serif,Verdana=verdana,arial,helvetica,sans-serif',
theme_advanced_toolbar_location: 'top',
theme_advanced_toolbar_align: 'left'
};
//tinymce.init(tiny_options); // Please, remove comment to activate the tinymce
var initData = function (d) {
this.id = ko.observable(d.id);
this.text = ko.observable(d.text);
};
var viewModel = function () {
var self = this,
data = [{
id: 1,
text: 'some text 1'
}, {
id: 2,
text: 'some text 2'
}];
self.dataSet = ko.observableArray([]);
$.each(data, function (i, d) {
self.dataSet.push(new initData(d));
});
};
var model = new viewModel();
ko.applyBindings(model);
UI
<!-- ko foreach : dataSet -->
<br>
<textarea data-bind="value: text, valueUpdate : 'change'"></textarea>
<br>
<!-- /ko -->
Link to Demo
Above, code is working fine, i.e. model data is updating nicely without tinymce binding, but when I activate the tinymce, view model observable is not updating. I tried this also, but no result.
So, Please help me to configure, how can I update the view model observables using tinymce binding?

Looks like you need a custom binding that will bind up the value and apply the TinyMCE Editor to your <textarea>. The net result looking something like this;
<textarea data-bind="wysiwyg: text"></textarea>
Give the one I've put together on Github a try https://github.com/michaelpapworth/tinymce-knockout-binding

This is a simple custom binding to update observable:
ko.bindingHandlers.richTextEditor = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
window.tinymce.init({
target: element,
skin: "lightgray",
menubar: false,
statusbar: false,
forced_root_block: false,
browser_spellcheck: true,
toolbar: "bold italic underline",
valid_elements: "strong,br,em,span[style|class|id|data],i[class]",
formats: {
bold: { inline: "strong" },
italic: { inline: "em" },
underline: { inline: "span", styles: { "text-decoration": "underline" } }
},
plugins: "paste",
resize: false,
setup: function (editor) {
editor.on("change", function () {
var textInputBinding = allBindings().textInput;
var content = this.getContent();
textInputBinding && textInputBinding(content);
});
}
});
}
};
the binding on textarea should be data-bind="textInput: yourObservable".

EXTJS CustomDateField disable manual text entering

I have ExtJS grid (editorGridPanel), where one of cells is CustomDateField.
How can i disable manual entering the date inside this field?
I try add listeners to editor, but there is no keypress event (!) to disable entering.
Also - i try an adding of listener to whole grid, = but when editor is active, it is not fired grid keypress event.
Pls help me. Here is field definition:
{
header : "Release Date",
dataIndex : 'releasedate',
sortable : true,
width: 90,
locked: true,
renderer: function(value, metaData, r) {
metaData.attr = rowcolor(r.data.status);
return value;
},
editor : new Ext.ux.form.CustomDateField({
allowBlank: true,
format: 'm/d/Y',
width : 120
/* this not works VVVV */
,listeners: {
'keypress' : function (field_, new_, old_ ) {
$.log( "Field", field_ );
$.log( "New", new_ );
$.log( "Old", old_ );
}
}
})
},
Thanks!

This is answer:
editor : new Ext.form.DateField({ /*Ext.ux.form.Custom*/
allowBlank: true,
format: 'm/d/Y',
width : 120,
enableKeyEvents: true,
listeners: {
'keydown' : function (field_, e_ ) {
// $.log( "keydown", field_, e_ );
e_.stopEvent();
return false;
}
}
})

To prevent the manual input, just set the 'editable' property of the editor to false. It is true by default.
Your grid column would be like:
header: 'Test',
dataIndex: 'xyz',
editor: {
xtype: 'datefield',
editable: false,
}
That is a better solution provided by framework itself.