Questions on Kendo UI for jQuery Forum

1 answer

405 views

Click bind in a nested template doesn't work properly

Hi All,
I have the next to two pieces of code:

<div id="application">

</div>

<script type="text/x-kendo-template" id="application-layout">

<div id="command-bar" data-bind="source:this" data-template="command-bar-template"> </div>

</script>

<script type="text/x-kendo-template" id="command-bar-template">

<button id="nextButton" class="k-button barButton" data-bind="click: next">Next</button>

<button id="backButton" class="k-button barButton" data-bind="click: back">Back</button>

</script>

and this:

var appViewModel = kendo.observable({

next: function()

{

console.log("next pushed");

},

back: function()

{

console.log("back pushed");

}

});

var appLayout = new kendo.Layout("application-layout", {model: appViewModel});

appLayout.render("#application");

The thing is that only works (in this case ) the next button (It prints "next pushed" in the console). So , I say in this case , because when I put the "<button id="backButton"..." first in the "command-bar-template", then only works the back button. What am I doing wrong?. Here is the jsbin: http://jsbin.com/edamuj/631

Templates

answered on 01 Apr 2013

1 answer

98 views

ListView Won't Read Template

What am I doing wrong here? The ListView named #month_list won't render. I'm trying to piece together a solution from a couple of solutions I found in the blogs and example code.

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<script src="cordova.js"></script>

<link href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.common.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.default.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.1.226/js/kendo.all.min.js"></script>

<link href="styles/attendance.css" rel="stylesheet" />

</head>

<body>

<script type="text/javascript">

navigator = {

months        : ["January","February","March","April","May","June","July","August","September","October","November","December"],

setDate : function(newDate) {

this.selected = {

date : newDate,

year : newDate.getFullYear(),

month : newDate.getMonth(),

day : newDate.getDate()

}

return this;

},

initMonthView : function(e) {

e.view.header.find('[data-role=view-title]').text(navigator.months[navigator.selected.month]);

e.view.header.find('#previous').on("click", navigator.prevMonth);

e.view.header.find('#next').on("click", navigator.nextMonth);

// e.view.datasource.filter();

},

initDayView : function(e) {

e.view.header.find('[data-role=view-title]').text(navigator.months[navigator.selected.month]+' '+navigator.selected.day);

e.view.header.find('#previous').on("click", navigator.prevDay);

e.view.header.find('#next').on("click", navigator.nextDay);

// e.view.datasource.filter();

},

initAttendance: function(e) {

e.view.header.find('[data-role=view-title]').text(navigator.months[navigator.selected.month]+' '+navigator.selected.day);

},

prevMonth : function(e) {

navigator.setDate(navigator.selected.date.setMonth( navigator.selected.date.getMonth()-1 ));

},

nextMonth : function(e) {

navigator.setDate(navigator.selected.date.setMonth( navigator.selected.date.getMonth()+1 ));

},

prevDay : function(e) {

navigator.setDate(navigator.selected.date.setDate( navigator.selected.date.getDate()-1 ));

},

nextDay : function(e) {

navigator.setDate(navigator.selected.date.setDate( navigator.selected.date.getDate()+1 ));

},

};

navigator.setDate(new Date());

</script>

<script type="text/javascript">

classes = kendo.observable({

dataSource : new kendo.data.DataSource(

[

{ "user_id" : 1, "report_id" : 1, "report_submitted" : 0, "report_date" : "March 28 2013", "period_code" : "A", "class_title" : "Basic I" }

]

)

});

</script>

<script id="class_list" type="text/x-kendo-template">

<li class="class">

<span class="period" data-bind="text:period_code"></span>

<span class="title" data-bind="text:class_title"></span>

<a data-role="detailbutton" data-style="detaildisclose"></a>

</li>

</script>

<div id="month" data-role="view" data-title="Month" data-model="classes" data-show="navigator.initMonthView">

<div id="calendar" data-role="calendar"></div>

<ul id="month_list" data-role="listview" data-template="class_list" data-source="classes.dataSource" data-use-native-scroller="true"></ul>

</div>

<div data-role="layout" data-id="main-layout" data-platform="android">

<div data-role="footer">

<button id="current_period" style="float:right">

#=current_period#

</button>

<button id="current_view" style="float:left">

<span data-role="view-title"></span>

<span class="icon-bottom-right-corner"></span>

</button>

<menu id="view_menu">

<menuitem id="view_menu_month"><a href="#month">Month #=current_month#</a></menuitem>

<menuitem id="view_menu_day"><a href="#day">Day #=current_day#</a></menuitem>

<menuitem id="view_menu_attendance"><a href="#attendance">Period #=current_period#</a></menuitem>

</menu>

</div>

<div data-role="layout" data-id="main-layout" data-platform="ios">

<div data-role="header">

<div data-role="navbar">

<a id="previous" href="#"><img class="icon-left-arrow" src="images/left-arrow.png" width="16" height="22" /></a>

<a id="next" href="#"><img class="icon-right-arrow" src="images/right-arrow.png" width="16" height="22" /></a>

<span data-role="view-title"></span>

</div>

<div data-role="footer">

<ul data-role="buttongroup">

<a href="#month"><li>Month</li></a>

<a href="#day"><li>Day</li></a>

<a href="#attendance"><li>Class</li></a>

</ul>

</div>

<script type="text/javascript">

$(document).ready(function(){

});

var app = new kendo.mobile.Application(document.body, {

// initial: "login",

icon: "images/FAWeb_favicon_32-16.png",

layout: "main-layout"

});

</script>

</body>

</html>

Thanks,
Pete

ListView (Mobile)

answered on 01 Apr 2013

1 answer

107 views

treeview conversion from telerik MVC to Kendo UI

Hi,

We are converting each control on our telerik MVC project to Kendo UI.
The first one we have taken is Treeview to convert and then later will take the next one. We included the Kendo js and css files in the project, made changes in the view of the treeview to use the appropriate events and methods. BUt we have an issue with the treeview after conversion.
1. The expand/collapse button and the check box gets overlapped. Found the cause of it that the html for checkbox comes in first before the the expand span due to which it gets overlapped.
Q: What are we missing ? By default it should be so that the Span of the expand/collapse should come first

2. If we remove the checkbox from the treeview and then try to expand a node, but it does not do so. Nothing happens when we click on it.
Q: What r we missing ?

Thanks..

TreeView

answered on 01 Apr 2013

3 answers

200 views

Dropdownlist Validation showing up as alert box versus other fields

Hello all,

I have an editor template popup and on it I have two dropdownlist controls on it. On another popup I have the validations show up as yellow messages on the popup form. On this one these show a "Message from web page" alert box and "Errors:" showing the error messages. How do I make this show similar to the other textboxes for example where it shows it hovering over the control the yellow validation messages?

<div class="editor-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
@(Html.Kendo().DropDownList()
.Name("UserName")
.DataValueField("UserName")
.DataTextField("UserName")
.OptionLabel("--Select Value--")
.BindTo((System.Collections.IEnumerable)ViewData["ADUserList"])
)

@Html.ValidationMessageFor(model => model.UserName)
</div>

DropDownList

answered on 01 Apr 2013

6 answers

195 views

Scrolling through a list of inputs checks the input

I know this is an issue on an app for android, (I am not sure about iOS). I have a view with a large number of checkboxes for the user to select multiple items. However if you attempt to scroll the view down and you touch a checkbox and scroll, that checkbox value will toggle, is there a way to prevent this?

To reproduce this you can make an view with the following ...

<ul data-role="listview" data-type="group">

<li>

Heading 1

<ul>

<li><label><input type="checkbox" checked="checked" />Lettuce</label></li>

<li><label><input type="checkbox" checked="checked" />Carrots</label></li>

<li><label><input type="checkbox" checked="checked" />Peas</label></li>

<li><label><input type="checkbox" checked="checked" />Bread</label></li

>

    <!-- repeat until you have enough to fill the whole screen -->

</ul>

</li>

</ul>

If you try to scroll anywhere except for header you will inadvertently select a checkbox, is there a way to work around this?

ListView (Mobile)

answered on 01 Apr 2013

3 answers

211 views

How to make tabstrip remember current view?

I have a tabstrip with two buttons -- call them A and B. The content of tab A lets the user click on a button and go to another view, and a back button appears.

If the user then clicks on tab B, and then on tab A, the content of tab A should still show the second view with the back button (this is how native tabstrips work). But that isn't happening -- the view gets changed to the initial view of tab A, forcing the user to re-navigate to where they were before.

How do i make it work so that the view in each tab is preserved when a user clicks a different tab button and then back again?

TabStrip (Mobile)

answered on 01 Apr 2013

2 answers

133 views

Responsive Components

Hello,

I've been reading the documentation of KendoUI mobile but there are things I couldn't find anywhere.

In this particular case I'm trying to find out how we're supposed to make a UI flexible for different screens. Take the ScrollView demo for example (http://demos.kendoui.com/mobile/scrollview/index.html#/), the height of the photos is fixed, and if you change that and use "100%" instead, it collapse and no photo is shown (at least using icenium's simulators).

What am I missing? How do you tune the UI so it works for different devices with different screens? I'm particular interested in tablets (both orientations) but I also wants to support phones (yeah, I think I can target them using custom styles for each device but I suppose it's not the idea)..

Thanks,
Matt

ScrollView (Mobile)

answered on 01 Apr 2013

3 answers

740 views

tooltip content loaded dynamically

To a listview with pictures, I attach a tooltip to every picutre and want to ajax load the tool tip content.

ToolTip:

var tooltip = $("#lvPictures").kendoTooltip({

filter: "img.imgInfo",

width: 120,

position: "top",

autoHide: false,

content: function (e) {

var target = e.target;

var fileId = target.data('identity');

return helpers.GetPictureToopTip(fileId);

}

}).data("kendoTooltip");

The helper function:

var helpers =

{

GetPictureToopTip: function (fileId) {

helpers.GetFile(fileId).done(function (json) {

var jsonObj = JSON.parse(json.d);

var html = '';

html += '<div>Picture info</div>'

html += '<div>' + jsonObj.FileName + '</div>'

return html;

});

}

Ajax call is fired just fine and returns data, however, the tool tip is show without content.

What am I doing wrong?

ToolTip

answered on 01 Apr 2013

3 answers

193 views

Combobox template on custom grid editor

I have some issue related to the template for combobox.

My combobox has template defined:
<script id="Items_template" type="text/x-kendo-template">
${data.NameLang}(${data.Code})
</script>

This is the definition of combobox:
@(Html.Kendo().ComboBox()
.Name("Item_Description")
.DataTextField("NameLang")
.DataValueField("NameLang")
.Filter(FilterType.Contains)
.DataSource(action => action.Read(read => read.Action("GetItemsForPAByName", "StockCount")))
.Value(Model.Item_Description)
.HtmlAttributes(new {style="width:240px"})
.TemplateId("Items_template")
)
As a result on the list I get undefined(undefined).
Same definition and template not located on the custom grid editor is working fine.

Is this some issue with combobox styling ?
Is there any workaround ?

Grid

answered on 01 Apr 2013

1 answer

161 views

Hyperlink mailto/tel upgrade

I would like to suggest a simple upgrade to "Insert hyperlink". It would be great if you would split out the prefix from the address and have a selector that allows the user to choose website, email, or phone.

Selector: Website/Email/Phone
Address:sales@kendoui.com
Text: Kendo UI
Tooltip: Click Here
Open Link in new window: Yes

Results:
<a href="http://www.kendoui.com">Kendo UI</a>
<a href="mailto:sales@kendoui.com">Kendo UI</a>
<a href="tel:8883652779">Kendo UI</a>

Editor

answered on 01 Apr 2013