visible not working within command in kendoTreeList.
{
command: [
{
imageClass: "k-i-info",
name: "details",
text: "Details",
visible: function (dataItem) { return dataItem.LastName.charAt(0) !== "D" }
}
]
}
visible not working in treelist command in kendoUI Jquery
Of course not. It is not part of the API. See https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist/configuration/columns.command
Depending on what you are trying to achieve, the DataBound-event may help you: https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist/events/databound
Related
I have a custom Media Library which I need to integrate with CKEditor 5. I've managed to write a plugin for adding images and another for adding download links for documents, but I can't get the downcast conversion for the download links to work properly.
I am currently able to insert the following into the content of the CKEditor window:
<a class="downloadLink" data-file-id="3" download="pretty-file-name-for-download.pdf" href="actual_file_name.pdf">Download link text</a>
and when I save my content this gets written to the database - so far so good.
When I reload the content into the editor, it comes back formatted differently:
<a href="actual_file_name.pdf">
<a class="downloadLink" data-file-id="3" download="pretty-file-name-for-download.pdf" href="actual_file_name.pdf">Download link text</a>
</a>
There is now an additional anchor tag wrapping the original anchor tag.
My downcast and upcast converters look like this:
conversion.for('downcast').elementToElement( {
model: {
name: 'downloadLink',
attributes: ['fileId', 'fileUrl', 'fileDownloadName', 'title']
},
view: (modelElement, conversionApi) => {
const viewWriter = conversionApi.writer;
return viewWriter.createContainerElement(
'a',
{
'data-file-id': modelElement.getAttribute('fileId'),
'download': modelElement.getAttribute('fileDownloadName'),
'href': modelElement.getAttribute('fileUrl'),
'class': 'downloadLink'
},
viewWriter.createText(modelElement.getAttribute('title'))
);
}
} );
conversion.for('upcast').elementToElement( {
view: {
name: 'a',
classes: 'downloadLink'
},
model: (viewElement, conversionApi) => {
const modelWriter = conversionApi.writer;
return modelWriter.createElement(
'downloadLink',
{
fileId: viewElement.getAttribute('data-file-id'),
fileUrl: viewElement.getAttribute('href'),
fileDownloadName: viewElement.getAttribute('download'),
title: viewElement.getChild(0).data,
}
);
}
} );
If anyone has any suggestions about what I'm doing wrong I'd appreciate the help!
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!
I have a this md-dialog https://codepen.io/patapron/pen/oLaxap
<md-button ng-click="answer('not useful')" >
Not Useful
</md-button>
<md-button ng-click="answer('useful')" style="margin-right:20px;" >
Useful
</md-button>
How do to I get remove the md-autofocus from the buttons?
Objetive: Any button must be pre-selected paint in grey.
There is an easier way to do this without having to write a custom directive. Angular Material has the ability to remove autofocus built-in.
In your controller where you are writing the .show function, set the focusOnOpen to false focusOnOpen: false
The documentation explains it here $mdDialog
Here is an example of how mine looks
function deleteMediaDialog() {
var dialogData = {
};
$mdDialog.show({
controller : 'deleteMediaDialogController',
controllerAs : 'vm',
templateUrl : 'app/main/apps/scala-media/dialogs/delete/delete-dialog.html',
parent : angular.element($document.body),
focusOnOpen : false,
clickOutsideToClose: true,
locals : {
dialogData: dialogData
}
});
}
I solved by mysleft. Directive magic
scope.$watch(function () { return ele.attr('class'); }, function () {
if (ele.hasClass('md-focused')) {
ele.removeClass('md-focused');
}
});
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'
});
}
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.