I am using kendo grid where one of the td has tooltip but for the first row my tooltip is hiding under the kendo header, Any idea how to resolve this issue i tried to make it work with tooltip-append-to-body and also tried to target with css but its not working.
config.js
{
field: 'locationComments',
title: 'Location Comments',
width: '210px',
filterable: false,
sortable: false,
template: function () {
return '<textarea class="zIndexTooltip" '+
'data-tooltip-html-unsafe="<div>{{512 - this.dataItem.locationComments.length}} characters left</div>" '+
'tooltip-trigger="{{{true: \'focus\', false: \'never\'}[this.dataItem.locationComments.length >= 0 || this.dataItem.locationComments.length == null ]}}" '+
'tooltip-placement="top" tooltip-append-to-body="true" tooltip-class = "bluefill" '+
'maxlength="512" #=gridStatus=="NOT_EDITABLE" ? "disabled" : "" # type="text" id="locationComments" name="locationComments" ng-model="this.dataItem.locationComments" ></textarea>';
}
config.css
.k-grid tr td textarea.zIndexTooltip {
z-index:100020;
}
I added below code in my config and set the z-index using .tooltip that solves my problem.
$tooltipProvider.options({
appendToBody: true
});
Related
I am looking for an example where I can specify template for rendering options, so that I can render an option as a two part: span with a background color and a value.
Simillar to this https://jqueryui.com/selectmenu/#custom_render
is this supported in the jsviews tag implementation?
Many thanks.
There are probably other approaches, including making your own custom tag - not using jQuery UI, or creating a derived version of the {{selectmenu}} tag control here, {{myselectmenu}} (using baseTag).
But here is a quick suggestion of one way you can do it:
{^{selectmenu person name="person" onBind=~onbind}}
{^{for people}}
<option data-style="{{:style}}" value="{{:id}}">{{:name}}</option>
{{/for}}
{{/selectmenu}}
Data:
people: [
{name: "John Resig", id: "1", style: "background-image: url(...);"},
...
Code:
pageTmpl.link("#page", model, {
onbind: function(val) {
// override onBind for this tag control instance
this.baseApply(arguments);
// override _renderItem for this widget instance:
this.widget._renderItem = function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", { text: item.label } );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
$( "<span>", {
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
})
.appendTo( wrapper );
return li.append( wrapper ).appendTo( ul );
};
}
});
I'm trying to create a code button with the Froala editor which can basicly do the same thing as here on SO by pressing CNTRL+K. Now I think I have two choices.
The first one is to edit the froala-editor.js file, because Froala already has a 'code' button which only adds the <pre> tags. If I could somehow get it to also add the <code> tag, problem solved. Unfortunately I didn't get this to work.
The second option is to create a custom button, so far I have this piece of code:
$('textarea[name="description"]').editable({
//Settings here
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
this.saveSelection();
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<pre><code>' + this.text() + ' </code></pre>';
this.restoreSelection();
this.insertHTML(html);
this.saveUndoStep();
}
}
}
});
It works somehow, but it's buggy and produces strange html like so:
<p><code></code>
<pre><code>asdasdasdasd
</code></pre>
</p>
Any help with getting this done for either option one or two would be greatly appreciated.
If you upgrade to version 1.2.3 that is available on Github your code should work https://github.com/froala/wysiwyg-editor. It's not necessary to save/restore selection.
LATER EDIT:
Here is a jsFiddle for it http://jsfiddle.net/9pmmg1jk/.
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<code>' + (this.text() || '') + '<span class="f-marker" data-type="false" data-id="0" data-fr-verified="true"></span><span class="f-marker" data-type="true" data-id="0" data-fr-verified="true"></span></code>';
this.insertHTML(html);
this.restoreSelectionByMarkers();
this.saveUndoStep();
}
}
}
I am trying to add an icon to my toolbar (arbitrary - not associated with a button).
In my CSS I define the URL like this :
.myCoolLookingIcon {
background-image: url('../ext-theme-gray/images/grid/columns.gif');
}
And that works fine if I am setting icons for buttons by using iconCls.
I would like this icon in a label or image
I have tried :
xtype: 'label',
iconCls: 'myCoolLookingIcon '
and
xtype: 'image',
html: '<img class="myCoolLookingIcon "/>'
but that doesn't seem to work in either case.
This is one of the way of achieving what you want (Not using the iconCls)
xtype:'label',
html: '<img src=\"path_to_icon\">'
Try this:
xtype:'label',
html: '<img class="className" width="20" height="20">'
Giving width and height, makes it work.
Ultimately I ended up doing this. A little hacky but it worked.
{
xtype: 'label',
itemId: 'labelWithIcon',
text: '',
cls: 'classNameWithImgBackground',
listeners: {
render: function () {
this.setText('<span style="margin-left: 16px;">Label Text</span>', false);
}
}
}
I have two grids side by side.
The left grid has a list of tags the user can select, and the grid on the right is empty so the user can drag the tags he wants there.
The plugin code for both grids is:
viewConfig: {
plugins: [
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup: 'selectedTags'
})
]
}
So, as I wanted to limit the user to be able to drag only 5 tags, I've added the following code to the grid on the right:
listeners: {
beforedrop: {
fn: function() {
if (grid.getStore().data.items.length > 4) {
dropHandlers.cancelDrop();
}
},
scope: me
}
}
This is working perfectly but what I wanted is to show the NO-DROP icon when the items are dragged over the grid instead of showing the green line as if the action was allowed.
Thanks,
After looking for this solution for a while, I finally figured it out.
You must add two methods to the dropZone in the Target Grid:
notifyOver and onNodeDrop
The solution for my problem would be the code below:
Ext.create('Ext.grid.Panel', {
store: myStore,
columns: [columns],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragText: 'Drag and drop to reorganize',
pluginId : 'dragNdrop',
dropZone:{
notifyOver:function(source, e, data){
var store = this.view.ownerCt.getStore();
return store.getCount()<5?this.dropAllowed:this.dropNotAllowed
},
onNodeDrop:function(targetNode,dragZone,e,data){
var sourceStore = dragZone.view.ownerCt.getStore(),
targetStore = this.view.ownerCt.getStore(),
isDropValid = targetStore.getCount()<5;
if(isDropValid){
sourceStore.remove(data.records[0])
targetStore.add(data.records[0]);
}
return isDropValid;
}
}
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Lopes, you can use column renderer in grid where you can check the items count and display appropriate icon. Code snippet for your reference:
gridCheckboxRenderer: function(value, meta, rec, rowInd, colInd, store){
var cssPrefix = Ext.baseCSSPrefix, cls = [cssPrefix + 'grid-checkheader'];
if (condition == false) {
cls.push(cssPrefix + 'grid-checkheader-checked-disabled');
return '<div class="' + cls.join(' ') + '"> </div>';
}
return '<div class="x-grid-row-checker"> </div>';
}
Hope it helps.
I have created a menu with extjs where you click on it and can see menu items dropping down. The first item is open. This button is supposed to open a file from file-dialog. But the only way I can open the file dialog I found is to place the file dialog field in the menu by only showing the button.
Now I need help to make this button look like just regular menu item:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
// maybe to add some css class here
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
var mainmenu = Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [item]
});
You can add the attribute buttonConfig to the Ext.form.field.File item and then use the standard attributes to a button. For example, this might work:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
buttonConfig: {
style: {
background: "#f1f1f1",
border: 0
}
},
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
Try changing putting a cls instead of a style attribute in the buttonConfig to use a CSS class instead of inline CSS.