I would like to know how to modify the example grouped listview that comes with kendo mobile.
The list view shows both flat view and grouped view. How do you make the items in the list view clickable so they will navigate to a different web page when clicked?
I've tried creating a template with an anchor tag and href and it works in IE but does nothing when clicked on the android phone.
//The Template
<script type="text/x-kendo-tmpl" id="template">
<div class="myclass">
#:name#
</div>
</script>
//The data binding
function mobileListViewDataBindInitGrouped() {
$("#grouped-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
template: kendo.template($("#template").html()),
fixedHeaders: true
});
}
Thanks
After some trial and error I have found that if i remove the div tag in the template, the anchor tags work correctly. Not sure if this is a bug or by design.
Thanks Whizkid747 for your help.
//Updated Template (removed <div>)
<script type="text/x-kendo-tmpl" id="template">
#:name#
</script>
Related
I want to display name and id filed in kendo treeview. the below one is not working
$("#trainingtreelist").kendoTreeView({
dataTextField:"name"+"id",
dataSource: data
});
I have prepared a simple dojo for you showing you how to template the items being displayed in the treeview.
https://dojo.telerik.com/IsUZewoX
the important thing to look at here is the config of the treeview:
$("#treeview").kendoTreeView({
template: kendo.template($("#treeview-template").html()),
dataSource: ...remove for brevity
});
then using the template outlined here:
<script id="treeview-template" type="text/kendo-ui-template">
#: item.text # <span style="border:1px solid black; margin:3px;padding:10px; font-weight:bold; "> #:item.id#</span>
# if (!item.items) { #
<a class='k-icon k-i-close-outline' href='\#'></a>
# } #
</script>
we can restyle the items how we like. I have simply taken the demo templating example from: https://demos.telerik.com/kendo-ui/treeview/templates and added the id and styled that so it is noticeable (contained in the bordered box).
I need to trigger the built in kendo-ui grid "add" action to this custom button in my template. only examples i can find are triggering custom functions. thanks
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label>Mock Text:</label>
<a class="k-button" onclick="trigger dataSource.change.add">Add Product</a>
</div>
</script>
You can add event for that button with jQuery, you can select it either by ID or its class and call addRow method of grid.
$("#btnAdd").click(function() {
var grid = $("#grid").getKendoGrid();
grid.addRow();
});
I have a div with an un-ordered navigation list in it. The div it is in has a set height and the overflow set to auto to give me a scroll bar. What I want is to have the "current" navigation link scrolled to the top of the div on page load. Each list items has the class 'current-menu-item' when current. Here is what the code looks like.
<div class="menu-portfolio-container">
<ul id="menu-portfolio" class="menu">
<li id="menu-item-174" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-174 has-image">
<a href="http://dnb.khcreativemedia.com/hinton/">
</li>
Here is the jQuery I tried.
<script>
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('.current-menu-item').offset().top
}, 'slow');
});
</script>
Here's the link to jQuery in the head:
<script src="http://dnb.khcreativemedia.com/wp-includes/js/jquery/jquery.js?ver=1.11.1" type="text/javascript">
Can anyone tell me what I would need to do to get this working? This is a wordpress site using the genesis framework.
Thanks to Tim's help, I've got it working. You can check the js fiddle page to see it in action. jsfiddle.net/KHCreative/2rn7otax
Thanks again for your help Tim.
Why don't I see anything in my view?
console.log(d); outputs this ...
[{"id":1,"name":"a","age":1,"photo":"","group":"A"},
{"id":5,"name":"alan","age":22,"photo":"","group":"A"},
{"id":3,"name":"b","age":2,"photo":"","group":"B"},
{"id":2,"name":"c","age":3,"photo":"","group":"C"},
{"id":4,"name":"graham","age":43,"photo":"","group":"G"}]
Code: show
console.log(d);
$("#customers-group").kendoMobileListView({
dataSource: kendo.data.DataSource.create({data: d, group: "group"}),
template: "${name}",
fixedHeaders: true
});
View
<div data-role="view" id="customers" data-title="My Data" data-layout="layout-customers" data-show="show">
<ul id="customers-group"></ul>
</div>
Make sure that you are working with kendo latest version. because kendo latest version will support grouping, fixed header concept..
Your code is working well.
click
here for working sample
So I've got an image that inside a tag, and I've also got a div that is centred in the middle of the screen.
How do I make this div invisible until the image is clicked?
Preview of page when the div is visible:
So that added to cart is a div in the middle of the screen. I want that to only show up when the "Add to cart" button has been clicked.
I want the div to go away again after 2 seconds. Transitions would be nice (eg fade into visibility), but I don't mind.
Set the display of the div to none and do a onclick event for the image which sets the display of the div to block. I would recommend using JQuery to add in any transitions or animations.
Something like (without animations):
<div id="cart" style="display:none">
</div>
<img src="imgsource" onClick="document.getElementById('cart').style.display = 'block'"/>
Worked it out. Had to use jQuery.
In the < head> :
<script>
$(document).ready(function(){
$(".addtocart").click(function(){
$(".addedcartbg").fadeIn(500);
$(".addedcartbg").delay(1000);
$(".addedcartbg").fadeOut(500);
});
});
</script>
In the < body> :
<div class="addedcartbg" style="display:none"><div class="addedcart"> Successfully added to cart. </div></div>
css
.hide{
display:none;
}
html
<div class="hide">
// put content here
</div>
<img class="hide-show" src="site.com/image.png" alt=""/>
js
$(function(){
$('.hide-show').bind('click',function(){
$('.hide').fadeIn(500).delay(2000).fadeOut(500);
});
});