How to use custom content to show the grid's tooltip? I want to show the tooltio ofcoloumn 2 and coloumn 3 ,and the content is a span which id called spanid or div which is called divid?
var tooltip = $("#Grid").kendoTooltip({
filter: "td",
width: 120,
position: "top",
content: value
}).data("kendoTooltip");
I try to write this,but it seems wrong.
var tooltip = $("#Grid").kendoTooltip({
filter: "td[3n]||td[2n]",
width: 120,
position: "top",
content: divid.html
}).data("kendoTooltip");
This is a working code for my scenario, it will work tool tip for all product names with class pLink
$(".pLink")
.kendoTooltip(
{
content: kendo.template($("#toolTipTemplate").html()),
position: "top",
width: "auto",
height: "auto",
animation: {
close: { effects: "fadeOut zoom:out", duration: 300 },
open: { effects: "fadeIn zoom:in", duration: 300 }
}
});
<script id="toolTipTemplate" type="text/x-kendo-template">
<p class="tooltipProductName">#=target.data('title')#</p>
</script>
//show the tooltip
tooltip = $("#grdData").kendoTooltip({
filter: 'td:not(:first-child, :nth-child(2), :empty)',
})
this will allow you to select first column , second column and it will also filter out empty cells. You can use the nth child selector. As this is a CSS3 selector, it will work from IE9+, chrome and firefox won't be an issue.
Hope this helps !
Related
(sencha fiddle for filefield inside fieldset)
I have a filefield inside a fieldset in extjs6. Fieldset is collapsed initially and I made filefield as button only. If I open the fieldset in chrome button shown and I don't see the button in firefox.
If I comment out line no 19 in the attached fiddle or make the fieldset open when starting, filefield looks good in both firefox and chrome.
Please refer the attached sencha fiddle and tell whats wrong.
Mohan, it sure does look like a bug.
I noticed that if you start out not collapsed then it works OK. So as a workaround you can chage your config to start out not collapsed and then collapse it in the afterrender:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'Fieldsets with Files',
//labelWidth: 75,
frame: true,
bodyStyle: 'padding:5px 5px 0',
width: 550,
renderTo: Ext.getBody(),
//layout: 'column', // arrange fieldsets side by side
items: [{
xtype : 'fieldset',
name : 'docAttachment',
border: 2,
title : '<b>Attach your document</b>',
collapsible : true,
//collapsed : true,
//layout : {
// type : 'hbox',
// align : 'center',
// pack : 'center'
//},
items :[{
xtype: 'fileuploadfield',
name: 'fileuploads',
buttonOnly: true,
buttonText : 'Select a File...'
}],
listeners:{
'afterrender':function(){this.collapse();}
}
}]
});
}
});
I am building an MVC 4 app with lots of cells in a table which the user will click for additional data about the contents of that cell, so I pop up a modal jQuery dialog. I don't claim to have done this correctly but I have an Ajax form that contains nothing but a hidden field to send off the id of the clicked cell contents to the controller.
#Html.Hidden("selectedStatusId")
Then on clicking I get the id and put it into that hidden:
$(".statusCell").click(function () {
var statusId = this.id;
document.getElementById("getStatusDataForm").selectedStatusId.value = statusId;
$("#getStatusDataForm").submit();
$("#StatusData").dialog("open");
});
The next to the last line is submitting the form which returns a partial to the empty div:
<div id="StatusData" title="Status Details" class="selectedStatusDetail" style="display: none"></div>
Then I configure my dialog:
$(function () {
$("#StatusData").dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: true,
width: 800,
show: {
effect: "fade",
duration: 100
},
hide: {
effect: "fade",
duration: 100
},
create: function (event, ui) {
// Center the dialog each time it re-opens
$(this).dialog('widget')
.css({ position: 'fixed' })
.position({ my: 'center', at: 'center', of: window, collision: 'fit' });
},
open: function (event, ui) {
// Remove the closing 'x' from the toolbar and replace it with the text 'Close'
$('.ui-dialog-titlebar-close')
.removeClass("ui-dialog-titlebar-close")
.html('<span style="float:right; margin-right: 10px; font-weight: normal;">Close</span>');
},
});
So the first time I click on one of the cells the dialog displays 107px below where it displays every time from then on. Other than that it works perfectly.
I have read about how you don't want to display before the dialog is loaded and I suspect that might be happening since the call to the db is async and I create the dialog before I know I get the data back. But this is the only way I have been able to get all of the rest to work.
Do I need to refactor the whole mess or is there a fix?
We have an application to draw some bioinformatics images. HighCharts.js is a very good plotter. I know that we may define the tooltip by the API:
tooltip: {
useHTML: true,
formatter: function() {
return 'here the html code';
}
},
But how to add a tooltip for the customized parts? Say add a tooltip for labels here
It seems that the title field is used as a tooltip (no need for jquery-ui) :
renderer.circle(200, 150, 100).attr({
fill: '#FCFFC5',
stroke: 'black',
title:'Hello\nI am a \nmultiline tooltip',
'stroke-width': 1
}).add();
In action :
http://jsfiddle.net/Snarkturne/NYZNT/
You can't use the default tooltip of Highchart on custom objects. renderer.text, renderer.label, etc... because they return SVGObject.
The solution is to create your own tooltip. I would suggest you to use a predefined tooltip library like twitter boostrap :
// your tooltip created with bootstrap
$(".yourlabel").tooltip({
// ^^^^^^^^^^
'container': '#container',
'placement': 'top',
'title': 'Mytooltip'
});
// with
ren.label('Rasterized image', 100, 215)
.attr({
'class': 'yourlabel'
// ^^^^^^^^^
})
.css({
color: colors[1],
fontSize: '10px'
})
.add();
You can see that we link the tooltip with your custom object thanks to the class attribute. If you choose to use the twitter bootstrap tooltips, don't forget to use the container attribute. It will not work without it...
Here is a live example : http://jsfiddle.net/rttav/
And this is the documentation for twitter boostrap tooltips : http://twitter.github.io/bootstrap/javascript.html#tooltips
There is no built-in option for custom elements tooltip, however you can add your own tooltip to each element. Just use on() function, something like that:
ren.path(...).attr(...).add().on('mouseOver', function () { alert ('mouseOver!'); }).on('moueOut', function () { alert('mouseOut'); });
I'm using .tooltip for a simple description of each throughout a page. It works fantastic for everything but the title name of the page (not just icons and menus) shows up at the bottom left side of the screen. How can I make an exception for just the title tag that starts with the word "step"? Thanks.
$.widget( "ui.tooltip", {
version: "1.9.2",
options: {
content: function() {
return $( this ).attr( "title" );
},
hide: true,
// Disabled elements have inconsistent behavior across browsers (#8661)
items: "[title]:not([disabled])",
position: {
my: "left top+15",
at: "left bottom",
collision: "flipfit flip"
},
show: true,
tooltipClass: null,
track: false,
// callbacks
close: null,
open: null
},
Just use a normal jquery selector for your items definition:
items: '[title^="step"]:not([disabled])',
should do the trick, for more selector fun, see the jquery selector documentation
#edit:
I just re-read your question, to exclude the items with the word "step" at the beginning of the title, use this:
items: '[title]:not([disabled]):not([title^="step"])',
<style type="text/css">
/* hide the html title tag from on-screen display */
#ui-tooltip-0 {
display: none !important;
visibility: hidden !important;
}
</style>
I'm working on a little app which uses Sencha Touch 2 for the user interface. Right now I'm running it in Safari on my iPad and iPhone.
My problem is that whenever I tap a text field, Safari brings up the virtual keyboard and pushes the whole web view upwards, off the screen.
This doesn't look very natural, since the top-toolbar is not visible anymore.
Here are two screenshots which demonstrate the problem.
In the second screenshot you can see the effect when the keyboard is visible.
Is there a way to prevent this behavior, and have Safari resize the user interface instead?
Unfortunately, Apple wants this behavior, but someone suggested a little hack using window.scrollTo():
listeners: {
focus: function() {
window.scrollTo(0,0);
}
}
Putting this code in launch function in app.js worked for me:
if (Ext.os.is.Android) {
Ext.Viewport.on('painted', function () {
Ext.Viewport.setHeight(window.innerHeight);
});
}
if (Ext.os.is.iOS) {
Ext.Viewport.on('painted', function () {
Ext.Viewport.setHeight(window.innerHeight);
});
}
I have found a solution that works for me.
You move the topbar into the container.
xtype: 'container',
docked: 'top',
height: '100%',
html: '',
itemId: 'MyContainer',
width: '100%',
items: [
{
xtype: 'titlebar',
docked: 'top',
itemId: 'topBar',
title: 'Obec Webchat',
layout: {
type: 'hbox',
align: 'start'
},
items: [
{
xtype: 'button',
action: 'back',
id: 'BackButton',
itemId: 'BackButton',
margin: '5 70% 5 15',
ui: 'back',
text: 'Home'
}
]
},
{
xtype: 'container',
docked: 'bottom',
height: '95%',
html: '<iframe src="http://webim.obec.local/" width="100%" height="100%" scrolling="yes"></iframe>',
itemId: 'MyContainer1',
width: '100%'
}
]
}
Hope this helps.
You will need to call the blur() method on textfield
// Assuming the id of textfield - "textFieldId"
Ext.getCmp('textFieldId').blur();
Attempts to forcefully blur input focus for the field.
If you this using html into Sencha elements must remove something tag html. Or can you put tag in the source html code. I hope help you. :)