Is it possible configure a Kendo UI tooltip's content template when using the data- declarative syntax.
The following would simple create a tooltip using the word template as the content.
<div data-role="tooltip" data-content="template">
Lorum ipsum....
</div>
You can, but I don't know if it is actually usable since doing it this way, you should have the element to which it refers inside the element.
For initializing it, you should have a JavaScript like:
<script type="text/javascript">
$(document).ready(function () {
kendo.init($("body"));
});
</script>
And then your HTML is fine.
Or you can have an HTML little more complex like:
<div>
<ol data-role="tooltip" data-content="message" data-filter="li>span">
<li><span>item 1</span></li>
<li><span>item 22</span></li>
<li><span>item 333</span></li>
<li><span>item 4444</span></li>
<li><span>item 55555</span></li>
<li><span>item 666666</span></li>
</ol>
</div>
Example in JSFiddle: http://jsfiddle.net/OnaBai/GerEN/
You can also use something like:
<div>
<ol data-role="tooltip" data-content="{ url : 'url.html'} " data-filter="li>span">
<li><span>item 1</span></li>
<li><span>item 22</span></li>
<li><span>item 333</span></li>
<li><span>item 4444</span></li>
<li><span>item 55555</span></li>
<li><span>item 666666</span></li>
</ol>
</div>
Where you pass a content.url for retrieving the actual content.
The data-content tag can take HTML as it's property meaning you can avoid using a separate content tempate:
<script id="row-template" type="text/x-kendo-template">
data-content="<div style='text-align: left; font-size: 11px; font-weight: bold;'><p>MVVM Property: #= mvvmPropertyName #</p></div>"
</script>
Hope this helps.
Related
when there are many contents then the contents are going outside the window box but i want to show all the contents within that box n if there are many contents then a scrollbar will be shown by which i can keep the contents within the box..can anyone help me fixed this?any help would be appreciated.
html page:
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
//$(document).ready(function()
//{
//var hei=$('#notificationsBody').height();
//});
function myFunction2() {
$.ajax({
url: "all_notification.php",
processData:false,
success: function(data){
$('#notificationsBody').height();
$("#notification-latest").html(data);
},
error: function(){}
});
}
</script>
<div id="notificationsBody" style="overflow: auto;height:348px;">
<div id="notification-latest"></div>
</div>
<div id="notificationFooter">
<a onclick="myFunction2()" href="">See All</a>
</div>
You do not need any java script for this...
just put your html content into another div and give it height, width and overflow: scroll;
<div style="height:500px; width: 200px; overflow: scroll;">
<div id="notificationsBody" style="overflow: auto;height:348px;">
<div id="notification-latest"></div>
</div>
<div id="notificationFooter">
<a onclick="myFunction2()" href="">See All</a>
</div>
</div>
Now the internal content will not get outside and if overflow then scroll.
UPDATE -
<script id="clientEvals-template" type="text/x-kendo-template">
<ul data-role="listview" data-style="inset">
<li>
${entry_stamp}
</li>
</ul>
</script>
It seems that chars like the ? and the = contained in a kendomobile template break the local link
ie this WONT work:
<ul data-role="list-view">
<li>${entry_stamp}</li>
</ul>
</script>
But this WILL work (without the query string
<script id="clientEvals-template" type="text/x-kendo-template">
<ul data-role="list-view">
<li>${entry_stamp}</li>
</ul>
</script>
Ive tried escaping this with mutiple chars ie \ \ // etc.. with now luck
Anyone know how to format this so that the local view is found WITH the query string?
This was a known issue, it was resolved in the current service pack release.
the fix is to format all ampersands using html encoding inline, in any icenium template script areas
ie.
<!-- always use inline html encoding in icenium template scripts ie. & -->
<script id="clientEvals-template" type="text/x-kendo-template">
<ul data-role="listview" data-style="inset">
<li>
${entry_stamp}
</li>
</ul>
</script>
I have this view:
<script type="text/x-handlebars" data-template-name="articlesOne">
<div class="main">
<div id="articlesOne">
<h2 id="article-title">{{App.ArticlesOneController.article.title}}</h2>
<h3 id="article-lead">{{App.ArticlesOneController.article.lead}}</h3>
<div id="article-body">{{App.ArticlesOneController.article.body}}</div>
</div>
</div>
</script>
When I change the App.ArticlesOneController.article.title property to, say <p>Pragraph</p>, the browser displays the plain text, not parsed as HTML.
I would like to display that in HTML, due to building an editor on that div. How should I do that?
You should try triple brackets with {{{App.ArticlesOneController.article.title}}}. I think this link is useful for you: Show property which includes html tags
I am having left side ul and right side ul. When i am clicking left side li making an ajax call in that ajax call i am adding a dynamic li in right side ul. The content was coming but the jquery mobile design was missing. I searched i got a solution like add $("#ul_id").listview('refresh') but it's not working for me.
$.post('/app/Unit/unit_detail', {item_id : task_id},
function(data){
$('#right_ul').html(data);
$("#right_ul").listview('refresh');
});
In my unit_detail.erb i am having the following code
<li class="showDetails" style="list-style:none;" data-theme="b">
<a href="#">
<div class="ui-grid-b">
<div class="ui-block-a"><div><%= unit_detail.name %></div></div>
<div class="ui-block-b"><div><%= unit_detail.description %> </div></div>
<div class="ui-block-c"><div><%= unit_detail.accessories %> </div></div>
</div>
</a>
</li>
In some place i found first find the id of ul in div and refresh the list view
$("#rigth_pane_content_footer").find("#right_ul").listview('refresh');
I tried that also not working.
In my page i am having the following
<div id="rigth_pane_content_footer">
<ul data-role="listview" id="right_ul">
</ul>
</div>
Any suggestions?
try this
$.post('/app/Unit/unit_detail', {item_id : task_id},
function(data){
var container = document.getElementById('right_ul');
var new_element = document.createElement('li');
new_element.innerHTML =data;
container.appendChild(new_element);
$(container).listview("refresh");
});
I am implementing an input text with an onkeyup that calls a JavaScript function. I have to put that text over an image, so I was thinking to use innerHtml inside a div that is on the image.
The div:
<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4">
<div id="uno" style="z-index:20">
<img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205>
</div>
</div>
The input:
<input name="formtext1" id="ft1" style="position:absolute;width:571px;left:319px;top:194px;z-index:6" onkeyup="go(this.value)">
The JavaScript:
<script type="text/javascript">
function go(asd){
document.getElementById('uno').innerHTML=asd;
}
</script>
When I write inside input text image will disappear and text appear with background white. Can you help my work out why this happens and what I can do about it?
Setting the innerHTML removes what used to be in the div.
One way to fix this would be to change the html to
<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4">
<div id="uno" style="z-index:20">
<div id="input"></div>
<img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205>
</div>
</div>
Then use innerhtml on the input div instead.