Kendo variables in Command section in a grid - kendo-ui

I have noticed that it is possible to have some kendo logic and variables inside a template in the columns sections.
This is an example from my column section template
template: "#= myVariable# #if(myBoolean) {# <img src='/images/myImage.png' /> #}#"
Please do note that myVariable and myBoolean are variables (fields) of each row of the grid.
Unfortunately i tried the same under the command section in the template. I get the following error "ReferenceError: myVariable is not defined"
Is there any way to add variables in the command sections as it happens with the columns?

As far as I know using templates in columns.command is not even documented: although it works. And you can do things like:
columns : [
{
command: {
template : "# console.log('this', this); console.log('data', data); # toto"
}
},
...
]
or even like:
command: {
template : function (arg) {
console.log("this" ,this);
console.log("arg", arg);
console.log("data", data);
return "toto";
}
}
But what the template returns needs to be a string and in the console of your browser you will see that this is window, arg is the object command and data is an array containing grid data.
Although you can include extra arguments as:
command: {
template : function (arg) {
console.log("this" ,this);
console.log("arg", arg);
console.log("arg.a", arg.a);
console.log("data", data);
return "toto";
},
a: "extra argument"
}
Where I add an extra a argument that can be accessed via arg.a you still cannot get access to current row data since the element is still not inserted.
Instead of that what I do propose is doing something like:
columns : [
{
title: " ",
template: "#= myVariable# #if(myBoolean) {# <img src='/images/myImage.png' /> #}#"
},
...
]
You don't need to have it as command, right? Why do you need it as command?

Related

Alter the text displayed for a token in ace-editor

I have this example where I am locating a matching string via regex and changing the styles using highlight rules.
this.$rules = {
start: [{
token: 'variableRef',
regex: /\$variable\..+\$/
}]
};
and alter the color using a css class:
.ace_variableRef {
color: red;
}
But what I would really like to do is change the text that is being displayed from $variable.1.name$ to the "resolved value". I have access to:
var variables = {
1: 'timeout'
};
so I can use the reference path to get the value, but is it even possible to do this with ace-editor?
Ideally I would display the string in the user friendly way, but keep the original reference value handy (in metadata or something) since that is what is actually stored in the db.
You can accomplish this by defining a custom onMatch for your rule, like so
this.$rules = {
start: [{
onMatch: function(value, state, stack) {
var values = this.splitRegex.exec(value);
return [{
type: 'variableRef',
value: variables[values[1]]
}]
},
regex: /\$variable\.(\d+).+\$/
}]
};
but the actual text will remain unaltered (thus causing oddities with text selection/cursor), so you'll need to pad/clip the resulting value for it to match length of values[0]

Get label of vue-i18n in JS

In my laravel 5.6 / vue.js 2.5.7/ Bootstrap4.1.0 application I added i18n support using
https://github.com/kazupon/vue-i18n
plugin
It works ok, but if in vue code I use syntax, like :
<p>{{ $t('message.hello', {name: 'visitor'}) }}</p>
I would like to get label in Javascript, say in computed , as some labels depends on values of other data.
Can I do this and if yes how?
UPDATED :
I want to detalize my task:
I have editor in 2 modes for insert and update and in the template I give a parameter to other subcomponent editor-header :
<template>
...
<editor-header :header_title="header_title"></editor-header>
...
mounted() {
...
this.setAppTitle(this.header_title, false);
}, // mounted() {
...
computed: {
header_title: function () {
// if (!this.is_insert) return "Edit " + t("document_category.document_category");
// return "Add "+t("document_category.document_category");
if (!this.is_insert) return "Edit document category";
return "Add document category";
},
In my i18n files I have both labels : “Edit/Add” and “document category”, but I do not know if there is a way to manipulate as I tried in header_title.
Can it be done in some other way ?
Thanks!

Extjs validate in separate files

I'm trying to validate fields in my form, but I keep getting an error message.
Here is my code:
Ext.define('ExtDoc.views.extfields.FieldsValidator',{
valEng: function(val) {
var engTest = /^[a-zA-Z0-9\s]+$/;
Ext.apply(Ext.form.field.VTypes, {
eng: function(val, field) {
return engTest.test(val);
},
engText: 'Write it in English Please',
// vtype Mask property: The keystroke filter mask
engMask: /[a-zA-Z0-9_\u0600-\u06FF\s]/i
});
}
});
And I define my field as follow:
{
"name": "tik_moed_chasifa",
"type": "ExtDoc.views.extfields.ExtDocTextField",
"label": "moed_hasifa",
"vtype": "eng",
"msgTarget": "under"
}
The first snippet is in a separate js file, and I have it in my fields js file as required.
When I start typing text in the text field, I keep seeing the following error msg in the explorer debugger:
"SCRIPT438: Object doesn't support property or method 'eng' "
What could it be? Have I declared something wrong?
You have defined your own class with a function valEng(val), but you don't instantiate it, neither do you call the function anywhere.
Furthermore, your function valEng(val) does not require a parameter, because you are not using that parameter anywhere.
It would be far easier and more readable, would you remove the Ext.define part and create the validators right where you need them. For instance if you need them inside an initComponent function:
initComponent:function() {
var me = this;
Ext.apply(Ext.form.field.VTypes, {
mobileNumber:function(val, field) {
var numeric = /^[0-9]+$/
if(!Ext.String.startsWith(val,'+')) return false;
if(!numeric.test(val.substring(1))) return false;
return true;
},
mobileNumberText:'This is not a valid mobile number'
});
Ext.apply(me,{
....
items: [{
xtype:'fieldcontainer',
items:[{
xtype: 'combobox',
vtype: 'mobileNumber',
Or, you could add to your Application.js, in the init method, if you need it quite often at different levels of your application:
Ext.define('MyApp.Application', {
extend: 'Ext.app.Application',
views: [
],
controllers: [
],
stores: [
],
init:function() {
Ext.apply(Ext.form.field.VTypes, {
mobileNumber:function(val, field) {
var numeric = /^[0-9]+$/
if(!Ext.String.startsWith(val,'+')) return false;
if(!numeric.test(val.substring(1))) return false;
return true;
},
mobileNumberText:'This is not a valid mobile number'
});
}

CGI::Ajax can not control returned table css style?

I have question regarding using CGI::Ajax.
my CGI::Ajax registered function will return a table, and I want to control the table's style by using jquery plugin tablesorter
the result table is returned, but I just can not control the style of it, i.e, I can not sort the table with using the plugin tablesorter in calling function
major part of code is as below, these are just part of the code, if there are some punctuation problems, please ignore it
as you can see, the main program, "show_html", can sort the table, "metatable"; however, the return table, "resulttable" can not be sorted even if I put id='resulttable' there.
Could someone help me with this issue?
Thank you
my $cgi = CGI->new();
my $pjx = CGI::Ajax->new('js_fun'=>\&perl_fun);
sub per_fun{
...
print $cgi->start_table({id=>'resulttable'}),
...
}
sub show_html{ //partial code
print $html_fh $cgi->start_html(
-title=>'Selected GEO MetaData',
-style=> {-src=>[ "jquery-ui-1.8.20.custom.css",
"jq_tablesorter/themes/green/style.css",
"jq_ui_redmond/css/selectable.css",
]
},
-script=>[
{ -type => "text/javascript",
-src => "$tempdir/jq/js/jquery-1.7.2.min.js"
},
{ -type => 'text/javascript',
-src => "$tempdir/jq/jq_tablesorter/jquery.tablesorter.min.js"
},
{ -type => 'text/javascript',
-src => "$tempdir/jq/jq_ui_redmond/js/jquery-ui-1.8.20.custom.min.js"
},
q<
$(document).ready(function(){
$("#metatable").tablesorter();
$("#resulttable").tablesorter();
)}
....
$("#done").click(function(){
$("#metatable").slideUp();
js_fun(['val1'],['result1']); //ajax
return false;
})
.....
print $cgi->div({id=>'result1'});
.....
}
The binding of the result table to the sort method has to be redone after the AJAX request returns successfully, something like this:
$.post("ajax/jsfun", "['val1']", function(data) {
$('#resulttable').html(data);
$("#resulttable").tablesorter();
});

Translating JSON into custom dijit objects

I am looking for an example where JSON constructed from the server side is used to represent objects that are then translated into customized widgets in dojo. The JSON would have to be very specific in its structure, so it would not be a very general solution. Could someone point me to an example of this. It would essentially be the reverse of this
http://docs.dojocampus.org/dojo/formToJson
First of all let me point out that JSON produced by dojo.formToJson() is not enough to recreate the original widgets:
{"field1": "value1", "field2": "value2"}
field1 can be literally anything: a checkbox, a radio button, a select, a text area, a text box, or anything else. You have to be more specific what widgets to use to represent fields. And I am not even touching the whole UI presentation layer: placement, styling, and so on.
But it is possible to a certain degree.
If we want to use Dojo widgets (Dijits), we can leverage the fact that they all are created uniformly:
var myDijit = new dijit.form.DijitName(props, node);
In this line:
dijit.form.DijitName is a dijit's class.
props is a dijit-specific properties.
node is an anchor node where to place this dijit. It is optional, and you don't need to specify it, but at some point you have to insert your dijit manually.
So let's encode this information as a JSON string taking this dijit snippet as an example:
var myDijit = new dijit.form.DropDownSelect({
options: [
{ label: 'foo', value: 'foo', selected: true },
{ label: 'bar', value: 'bar' }
]
}, "myNode");
The corresponding JSON can be something like that:
{
type: "DropDownSelect",
props: {
options: [
{ label: 'foo', value: 'foo', selected: true },
{ label: 'bar', value: 'bar' }
]
},
node: "myNode"
}
And the code to parse it:
function createDijit(json){
if(!json.type){
throw new Error("type is missing!");
}
var cls = dojo.getObject(json.type, false, dijit.form);
if(!cls){
// we couldn't find the type in dijit.form
// dojox widget? custom widget? let's try the global scope
cls = dojo.getObject(json.type, false);
}
if(!cls){
throw new Error("cannot find your widget type!");
}
var myDijit = new cls(json.props, json.node);
return myDijit;
}
That's it. This snippet correctly handles the dot notation in types, and it is smart enough to check the global scope too, so you can use JSON like that for your custom dijits:
{
type: "my.form.Box",
props: {
label: "The answer is:",
value: 42
},
node: "answer"
}
You can treat DOM elements the same way by wrapping dojo.create() function, which unifies the creation of DOM elements:
var myWidget = dojo.create("input", {
type: "text",
value: "42"
}, "myNode", "replace");
Obviously you can specify any placement option, or no placement at all.
Now let's repeat the familiar procedure and create our JSON sample:
{
tag: "input",
props: {
type: "text",
value: 42
},
node: "myNode",
pos: "replace"
}
And the code to parse it is straightforward:
function createNode(json){
if(!json.tag){
throw new Error("tag is missing!");
}
var myNode = dojo.create(json.tag, json.props, json.node, json.pos);
return myNode;
}
You can even categorize JSON items dynamically:
function create(json){
if("tag" in json){
// this is a node definition
return createNode(json);
}
// otherwise it is a dijit definition
return createDijit(json);
}
You can represent your form as an array of JSON snippets we defined earlier and go over it creating your widgets:
function createForm(array){
dojo.forEach(array, create);
}
All functions are trivial and essentially one-liners — just how I like it ;-)
I hope it'll give you something to build on your own custom solution.

Resources