I'm implementing a simple search input field on Compose desktop.
My code looks as below.
BasicTextField(
modifier = Modifier.align(Alignment.CenterVertically).onPreviewKeyEvent {
if(it.key == Key.Enter && it.type == KeyEventType.KeyDown){
println("enter down: $textFieldState")
true
}else {
false
}
},
value = textFieldState,
onValueChange = { input ->
textFieldState = input
},
textStyle = TextStyle(
fontSize = 14.sp,
textAlign = TextAlign.Start,
fontWeight = FontWeight.Normal,
fontFamily = NotoSans,
color = Color.Black
),
maxLines = 1,
decorationBox = { innerTextField ->
Row(modifier = Modifier.fillMaxWidth()) {
if (textFieldState.isEmpty()) {
Text(
text = "Search with user name.",
fontSize = 14.sp,
color = Color(0xFF909ba9),
textAlign = TextAlign.Start,
fontWeight = FontWeight.Normal,
fontFamily = NotoSans,
modifier = Modifier.fillMaxWidth()
.align(Alignment.CenterVertically),
)
}
}
innerTextField()
}
)
This code will create a textfield which has 1 max lines.
It works without any problem on english inputs.
But when I type in Korean inputs, keys such as space, enter, or even numbers will duplicate the last Korean character. For example, in english, if I type in H, I, !,
it will be HII!.
Is there some locale settings that can be done to the textField?
I found no working solution in here or in the Compose multiplatform git issue page. I found a workaround using SwingPanel and JTextField.
SwingPanel(background = Color(0xFFf5f6f6), modifier = Modifier.fillMaxSize(), factory = {
//Some JTextfield I've obtaines from stackoverflow to show place holder text.
//Can be replaced to JTextField(columnCount:Int)
HintTextField("Enter in name",1).apply {
background = java.awt.Color(0xf5, 0xf6, 0xf6)
border = null
}
}, update = {
//SimpleDocumentListener is an implementation of DocumentListener.
//Which means it can be replaced by it.
it.document.addDocumentListener(object : SimpleDocumentListener{
override fun update(e: DocumentEvent) {
try{
val text = it.text
textFieldState = text
} catch(e : Exception) {
e.printStackTrace()
}
}
})
//I need an enter key to trigger some search logics.
//textFieldState seems to print the value as I intended
it.addKeyListener(object : KeyAdapter(){
override fun keyPressed(e: KeyEvent?) {
if(e?.keyCode == KeyEvent.VK_ENTER){
println("ENTER : $textFieldState")
}
}
})
})
Really hope the compose multiplatform team comes up with a better solution.
With this script I can exclude to insert the same value column in Google Sheet for maximum 100 times.
But I am trying to exclude (with if statement) some values from this script, in particular the date "25/12/2022" and the date "12/01/2012".
How could I proceed?
function onEdit(e) {
var r = e.range;
var s = r.getSheet();
if (s.getName() === 'New Rise 2022' && r.getColumn() === 27) {
var newValue = r.getDisplayValue();
if (newValue == "") return;
var count = s.getRange('AA1:AA').getDisplayValues().filter(([a]) => a === newValue).length;
if (count > 99) {
r.setValue(e.oldValue);
SpreadsheetApp.flush();
SpreadsheetApp.getUi().alert('Questa data è stata già inserita 100 volte');
}
}
}
Update:
function onEdit(e) {
var r = e.range;
var s = r.getSheet();
if (s.getName() === 'New Rise 2022' && r.getColumn() === 27) {
var newValue = r.getDisplayValue();
if (newValue == "") return;
var count = s.getRange('AA1:AA').getDisplayValues().filter(([a]) => a === newValue).length;
if (count > 99 || e.range.getDisplayValue() == "25/12/2012" || e.range.getDisplayValue() == "12/01/2012") {
r.setValue(e.oldValue);
r.setNumberFormat('dd/mm/YYYY');
SpreadsheetApp.flush();
SpreadsheetApp.getUi().alert('Questa data è stata già inserita 100 volte');
}
}
}
How about this?
function onEdit(e) {
const sh = e.range.getSheet();
const x = ["25/12/2022","12/01/2012"];
const idx = x.indexOf(e.value);
if (sh.getName() === 'New Rise 2022' && e.range.columnStart == 27 && e.value && !~idx) {
var count = sh.getRange('AA1:AA' + sh.getLastRow()).getDisplayValues().flat().filter(e => e == e.value).length;
if (count > 99) {
e.range.setValue(e.oldValue);
}
}
}
You can get the newly entered display value and compare it against the "forbidden" values
Therefore, retrieve the latest modified cell with e.range:
...
if (count > 99 || e.range.getDisplayValue() == "25/12/2022" || e.range.getDisplayValue() == "12/01/2012") {
...
}
...
Note:
I understood that what you are interested in is the displayed value (date in this case), but depending on your date formatting the display value will be different from the value you typed in.
If it is the typed in value you are after, you can retrieve it with e.value:
...
console.log("e.value: " + e.value)
console.log("e.range.getDisplayValue(): " + e.range.getDisplayValue())
if (count > 99 || e.value == "25/12/2022" || e.value == "12/01/2012") {
...
}
...
References:
Event Objects
getDisplayValue()
UPDATE:
If you have problems with number formatting you can use the method setNumberFormat().
Modify your code block in the if statement to
r.setValue(e.oldValue);
r.setNumberFormat('dd/mm/YYYY');
I am looping over the list "res_1" and when the Id is "400" then need to multiply "Total_Weight" with variable "cost_400"; else if the id is "400W", then need to multiply "Total_Weight"
with variable "cost_400W". In the end, "result" array should contain "Vendor" and correspoding number ("Total_Weight" * "cost_400").
In the code below, I loop over "res_1", but for some reason, the if condition is not getting detected and it does not go inside the corresponding if or else if condition.
Any suggestions would be appreciated.
Expected result:
result = [['ABC',42341820 ],['DEF',91734000]]
Input:
res_1:
[ { Id: '400 ', Vendor: 'ABC', Total_Weight: 32322 },
{ Id: '400W ', Vendor: 'DEF', Total_Weight: 61156 } ]
var cost_400 = 1310
var cost_400W = 1500
res_1.forEach((r2,i2)=>{
if (r2['Id'] == "400" ) {
Logger.log(r2['Total_Weight']*cost_400)
}
else if (r2['Id'] == "400W" ) {
Logger.log(r2['Total_Weight']*cost_400W)
}
});
Issue:
Extra space on the res_1. if (r2['Id'] == "400" ) and if (r2['Id'] == "400W" ) will always get false because '400 ' is not equal to '400' and '400W ' is not equal to '400W'.
Solution:
If you cannot manipulate the output of res, you can use String.match() and reverse the if else statement. The reason for reversal is that String.match(400) can catch both 400 and 400W and if we start with String.match('400W') we can prevent the method from catching 400.
Your code should look like this:
function myFunction() {
var res_1=
[ { Id: '400 ', Vendor: 'ABC', Total_Weight: 32322 },
{ Id: '400W ', Vendor: 'DEF', Total_Weight: 61156 } ]
var cost_400 = 1310
var cost_400W = 1500
res_1.forEach((r2,i2)=>{
if (r2['Id'].match("400W")) {
Logger.log(r2['Total_Weight']*cost_400W)
}
else if (r2['Id'].match("400")) {
Logger.log(r2['Total_Weight']*cost_400)
}
});
}
Output:
Reference:
String.match()
I need to replace only numbers that are decimal to 3 places.
The following example is working fine.
Output look like this:
0.000
But i can type 0..
How can i do only one decimal point (.) 0.000
Here is my directive:
app.directive('allowDecimalNumbers', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keypress', function (event) {
var $input = $(this);
var value = $input.val();
value = value.replace(/[^0-9\.]/g, '')
if(value == "" && event.which == 46) {
return false;
}
var findsDot = new RegExp(/\./g)
var containsDot = value.match(findsDot)
if (containsDot != null && ([46, 110, 190].indexOf(event.which) > -1)) {
event.preventDefault();
return false;
}
var arrValue = value.split('.');
if (value.split('.').length == 2) {
if(value.split('.')[1].length > 2) {
event.preventDefault();
return false;
}
}
$input.val(value);
if (event.which == 64 || event.which == 16) {
// numbers
return false;
}
else if (event.which >= 48 && event.which <= 57 || event.which == 46) {
// numbers
return true;
}
else {
event.preventDefault();
return false;
}
});
}
}});
Here is my html:
<input type="number" allow-decimal-numbers ng-model="length1" >
Note that validation can cause problem depending on locale, in french decimal separator is , and input type="number" prevents . to be typed.
could make it working removing code, note that . doesn't need to be escaped when it is in a character set ( between [ and ])
var app = angular.module('app', []);
app.directive('allowDecimalNumbers', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keydown', function (event) {
var $input = $(this);
var value = $input.val();
if ([8, 13, 16, 27, 37, 38, 39, 40, 46].indexOf(event.which) > -1) {
// backspace, enter, shift, escape, arrows, delete
return true;
} else if ( (event.which >= 48 && event.which <= 57 ||
event.which >= 96 && event.which <= 105) && !value.match(/[.,]\d{3}/)) {
// numbers
return true;
} else if ([46, 110, 190, 188].indexOf(event.which) > -1 && !value.match(/[.,]/)) {
// dot and numpad dot
return true;
} else {
event.preventDefault();
return false;
}
});
}
}
});
Note that a digit can't be inserted after there's a decimal separator followed by three digit but we can't check where the digit is inserted even if it's in front.
I have a jqgrid containing some data to filter. I'd like to define a combo box with some pre-defined filter sets / templates.
If a user selects an item of the combobox, the grid should automatically apply combined filters. Preferably, the combo box should be integrated into a toolbar or jqGrid's pager, but also in the html page would be fine.
For example:
COMBO BOX
Item templates filter parameters
___________
|Expired | << Timeout = true
|Last Week | << OpenDate between 02/13/2012 and 02/16/2012
|Last Month | << OpenDate between 01/01/2012 and 02/16/2012
|......... | ......
Thanks in advance for your help
jqGrid supports Searching Templates in the Advance Searching (see "Searching"/ "Search Templates" in the official jqGrid demo), but there are currently no searching templates support in the Toolbar Filtering.
I find your question very interesting. In the old question I described how one can use generic external filters to send additional information to the server. The way can be good in case of remote data, but it can't be used directly in the local grid or in the grid with the loadonce: true option.
So I created the demo which shows how the filter templates can be implemented in Toolbar Filtering and how to integrated the template in the jqGrid. I used toolbar: [true, "top"] to have additional empty toolbar above the column headers:
In the implementation I used the refreshSerchingToolbar function which I suggested originally here. It's important to understand, that the refreshSerchingToolbar function fill in the filter toolbar only the information which can be exactly represented by the filter. For example the filter for "Closed" rows can be represented in the filter toolbar (see the picture above), but the interval of dates "Last Week" and "Last Month" con't. In the cases the data in the grid will be filtered, but the corresponding fields of the filter toolbar stay empty.
The most important part of the code of the demo you can find below
var $grid = $("#list"),
initDate = function (elem) {
$(elem).datepicker({
dateFormat: 'dd-M-yy',
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number', editable: true/*,
searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }*/},
dateTemplate = {width: 80, align: 'center', sorttype: 'date',
formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, editable: true, datefmt: 'd-M-Y',
editoptions: { dataInit: initDate },
searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], dataInit: initDate }},
yesNoTemplate = {align: 'center', editable: true, formatter: 'checkbox',
edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'No'},
stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;true:Yes;false:No' }},
myDefaultSearch = 'cn',
getColumnIndex = function (columnIndex) {
var cm = this.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++) {
if ((cm[i].index || cm[i].name) === columnIndex) {
return i; // return the colModel index
}
}
return -1;
},
refreshSerchingToolbar = function (myDefaultSearch) {
var filters, i, l, rules, rule, iCol, cmi, control, tagName,
$this = $(this),
postData = $this.jqGrid('getGridParam', 'postData'),
cm = $this.jqGrid('getGridParam', 'colModel');
for (i = 0, l = cm.length; i < l; i++) {
control = $("#gs_" + $.jgrid.jqID(cm[i].name));
if (control.length > 0) {
tagName = control[0].tagName.toUpperCase();
if (tagName === "SELECT") { // && cmi.stype === "select"
control.find("option[value='']")
.attr('selected', 'selected');
} else if (tagName === "INPUT") {
control.val('');
}
}
}
if (typeof (postData.filters) === "string" &&
typeof (this.ftoolbar) === "boolean" && this.ftoolbar) {
filters = $.parseJSON(postData.filters);
if (filters && filters.groupOp === "AND" && typeof (filters.groups) === "undefined") {
// only in case of advance searching without grouping we import filters in the
// searching toolbar
rules = filters.rules;
for (i = 0, l = rules.length; i < l; i++) {
rule = rules[i];
iCol = getColumnIndex.call($this, rule.field);
if (iCol >= 0) {
cmi = cm[iCol];
control = $("#gs_" + $.jgrid.jqID(cmi.name));
if (control.length > 0 &&
(((typeof (cmi.searchoptions) === "undefined" ||
typeof (cmi.searchoptions.sopt) === "undefined")
&& rule.op === myDefaultSearch) ||
(typeof (cmi.searchoptions) === "object" &&
$.isArray(cmi.searchoptions.sopt) &&
cmi.searchoptions.sopt.length > 0 &&
cmi.searchoptions.sopt[0] === rule.op))) {
tagName = control[0].tagName.toUpperCase();
if (tagName === "SELECT") { // && cmi.stype === "select"
control.find("option[value='" + $.jgrid.jqID(rule.data) + "']")
.attr('selected', 'selected');
} else if (tagName === "INPUT") {
control.val(rule.data);
}
}
}
}
}
}
},
templateClosed = {
groupOp: "AND",
rules: [
{ field: "closed", op: "eq", data: "true" }
]
},
templateLastWeek = {
groupOp: "AND",
rules: [
{ field: "invdate", op: "ge", "data": "13-Feb-2012" },
{ field: "invdate", op: "le", "data": "16-Feb-2012"}
]
},
templateLastMonth = {
groupOp: "AND",
rules: [
{ field: "invdate", op: "ge", "data": "16-Jan-2012" },
{ field: "invdate", op: "le", "data": "16-Feb-2012"}
]
},
myFilterTemplateLabel = 'Filter by Template: ',
myFilterTemplateNames = ['Closed', 'Last Week', 'Last Month'],
myFilterTemplates = [templateClosed, templateLastWeek, templateLastMonth],
iTemplate,
cTemplates = myFilterTemplateNames.length,
templateOptions = '',
reloadWithNewFilterTemplate = function () {
var iTemplate = parseInt($('#filterTemplates').val(), 10),
postData = $grid.jqGrid('getGridParam', 'postData');
if (isNaN(iTemplate)) {
$grid.jqGrid('setGridParam', {search: false});
} else if (iTemplate >= 0) {
$.extend(postData, {
filters: JSON.stringify(myFilterTemplates[iTemplate])
});
$grid.jqGrid('setGridParam', {search: true});
}
$grid.trigger('reloadGrid', [{current: true, page: 1}]);
};
$grid.jqGrid({
...
toolbar: [true, "top"],
loadComplete: function () {
var $this = $(this);
if (typeof (this.ftoolbar) !== "boolean") {
// create toolbar if needed
$this.jqGrid('filterToolbar',
{stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch});
}
refreshSerchingToolbar.call(this, myDefaultSearch);
}
});
$.extend($.jgrid.search, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: true,
closeOnEscape: true,
closeAfterSearch: true,
overlay: 0,
tmplLabel: myFilterTemplateLabel,
tmplNames: myFilterTemplateNames,
tmplFilters: myFilterTemplates
});
$grid.jqGrid('navGrid', '#pager', {edit: false, add: false, del: false});
for (iTemplate = 0; iTemplate < cTemplates; iTemplate++) {
templateOptions += '<option value="' + iTemplate + '">' +
myFilterTemplateNames[iTemplate] + '</option>';
}
$('#t_' + $.jgrid.jqID($grid[0].id)).append('<label for="filterTemplates">'+
myFilterTemplateLabel + '</label>' +
'<select id="filterTemplates"><option value="">Not filtered</option>' +
templateOptions + '</select>');
$('#filterTemplates').change(reloadWithNewFilterTemplate).keyup(function (e) {
// some web browsers like Google Chrome don't fire "change" event
// if the select will be "scrolled" by keybord. Moreover some browsers
// like Internet Explorer don't change the select option on pressing
// of LEFT or RIGHT key. Another web browsers like Google Chrome do this.
// We make refrech of the grid in any from the cases. If needed one
// could modify the code to reduce unnneded reloading of the grid,
// but for the demo with a few local rows it's such optimization
// isn't really needed
var keyCode = e.keyCode || e.which;
if (keyCode === $.ui.keyCode.PAGE_UP || keyCode === $.ui.keyCode.PAGE_DOWN ||
keyCode === $.ui.keyCode.END || keyCode === $.ui.keyCode.HOME ||
keyCode === $.ui.keyCode.UP || keyCode === $.ui.keyCode.DOWN ||
keyCode === $.ui.keyCode.LEFT || keyCode === $.ui.keyCode.RIGHT) {
reloadWithNewFilterTemplate();
}
});