Questions on Kendo UI for jQuery Forum

1 answer

295 views

How can i do dropdownlist like native for android in angular?

How can i do dropdownlist like native for android in angular? I looks like dropdown for desktop

This is a code:

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/drawer/angular">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div kendo-mobile-application ng-app="kendoDemo" ng-controller="MyCtrl">
<kendo-mobile-view id="two-drawer-home" k-title="'Friends'">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-mobile-back-button id="back-button" class="nav-button" k-align="'left'">Back</kendo-mobile-back-button>
<kendo-view-title></kendo-view-title>
<kendo-mobile-button k-rel="'drawer'" href="#right-drawer" k-icon="'share'" k-align="'right'" ></a>
</kendo-mobile-nav-bar>
</kendo-mobile-header>

<kendo-mobile-list-view k-type="'group'">
<li>
A
<ul>
<li><h2>Ann Devon</h2><img src="../content/mobile/overview/ann.jpg" /></li>
<li><h2>Annette Roulet</h2><img src="../content/mobile/overview/annette.jpg" /></li>
<li><h2>Antonio Moreno</h2><img src="../content/mobile/overview/antonio.jpg" /></li>
</ul>
</li>
<li>
C
<ul>
<li><h2>Carine Schmitt</h2><img src="../content/mobile/overview/carine.jpg" /></li>
<li><h2>Catherine Dewey</h2><img src="../content/mobile/overview/catherine.jpg" /></li>
</ul>
</li>
<li>
D
<ul>
<li><h2>Daniel Tonini</h2><img src="../content/mobile/overview/daniel.jpg" /></li>
<li><h2>Diego Roel</h2><img src="../content/mobile/overview/diego.jpg" /></li>
</ul>
</li>
<li>
E
<ul>
<li><h2>Eduardo Saavedra</h2><img src="../content/mobile/overview/eduardo.jpg" /></li>
<li><h2>Elizabeth Brown</h2><img src="../content/mobile/overview/elizabeth.jpg" /></li>
</ul>
</li>
<li>
F
<ul>
<li><h2>Felipe Izquierdo</h2><img src="../content/mobile/overview/felipe.jpg" /></li>
<li><h2>Fran Wilson</h2><img src="../content/mobile/overview/fran.jpg" /></li>
<li><h2>Francisco Chang</h2><img src="../content/mobile/overview/francisco.jpg" /></li>
</ul>
</li>
</kendo-mobile-list-view>
</kendo-mobile-view>

<kendo-mobile-drawer id="right-drawer" style="width: 280px" k-title="'Share'" k-position="'left'" k-views="['two-drawer-home']">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-view-title></kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>

<div class="box-col">
<h4>Remote data</h4>
<select kendo-drop-down-list
k-data-text-field="'ContactName'"
k-data-value-field="'CustomerID'"
k-data-source="customersDataSource"
style="width: 200px"></select>
</div>
</kendo-mobile-drawer>

<script>
angular.module("kendoDemo", ["kendo.directives"])
.controller("MyCtrl", function ($scope) {
$scope.customersDataSource = {
transport: {
read: {
dataType: "jsonp",
url: "http://demos.telerik.com/kendo-ui/service/Customers"
}
}
};
});
</script>

<style>
.km-root .left-btn
{
position: absolute;
z-index: 9999;
top: 7em;
left: -1em;
padding-right: 0;
padding-left: 0;
width: 5em;
line-height: 4em;
border-radius: 10em;
-webkit-border-radius: 10em;
border: 1px solid rgba(255,255,255,.8);
background: rgba(0,0,0,.8);
color: #fff;
box-shadow: 0 0 .5em #000;
-webkit-box-shadow: 0 0 .6em #222;
}

.mobileExample .km-wp-light .km-button.left-btn
{
background: rgba(0,0,0,.8);
text-align: center;
}

.km-root .left-btn .km-icon.km-notext
{
display: block;
margin: 1em auto;
}

.km-ios #left-drawer .km-content, .km-ios7 #left-drawer .km-content, .km-android #left-drawer .km-content, .km-blackberry #left-drawer .km-content,
.km-ios #left-drawer .km-list > li, .km-ios7 #left-drawer .km-list > li, .km-android #left-drawer .km-list > li, .km-blackberry #left-drawer .km-list > li,
.km-ios #left-drawer .km-listview-link > .km-icon, .km-ios7 #left-drawer .km-listview-link > .km-icon, .km-android #left-drawer .km-listview-link > .km-icon, .km-blackberry #left-drawer .km-listview-link > .km-icon,
.km-ios #left-drawer .km-list li > .km-icon, .km-ios7 #left-drawer .km-list li > .km-icon, .km-android #left-drawer .km-list li > .km-icon, .km-blackberry #left-drawer .km-list li > .km-icon,
#right-drawer .km-content
{
background-color: #4e4e4e;
color: #fff;
}

.km-ios #left-drawer .km-group-title,
.km-ios7 #left-drawer .km-group-title,
.km-blackberry #left-drawer .km-group-title
{
background-color: #6e6e6e;
color: #fff;
}

#left-drawer .km-navbar, #right-drawer .km-navbar,
.km-tablet .km-ios #left-drawer .km-view-title,
.km-tablet .km-ios #right-drawer .km-view-title,
.km-ios7 #left-drawer .km-view-title,
.km-ios7 #right-drawer .km-view-title,
.km-tablet .km-ios7 #left-drawer .km-view-title,
.km-tablet .km-ios7 #right-drawer .km-view-title
{
background-color: #2e2e2e;
color: #fff;
text-shadow: 0 -1px rgba(0,0,0,.5);
}

.km-drawer-button:before, .km-drawer-button:after { content: "\E077"; }
.km-contacts:before, .km-contacts:after { content: "\E0E4"; }
.km-camera:before, .km-camera:after { content: "\E0D0"; }
.km-printer:before, .km-printer:after { content: "\E07E"; }
.km-comments:before, .km-comments:after { content: "\E093"; }
.km-graph:before, .km-graph:after { content: "\E04B"; }

#two-drawer-home h2
{
display: inline-block;
font-size: 1em;
line-height: 3em;
margin: 0 0 0 1em;
}

#two-drawer-home img
{
float: left;
width: 3em;
height: 3em;
margin: 0;
border: 1px solid rgba(0,0,0,.2);
-webkit-border-radius: 4em;
border-radius: 4em;
}

.km-ios #two-drawer-home .km-listview
{
background-color: #eaf1f5;
}
</style>

</body>
</html>

DropDownList

answered on 18 Feb 2015

2 answers

185 views

Events in row template inputs not bubbling to allow row selection

I'm not sure what update changed this, but some time between the 2013 Q3 release and the 2014 Q3 release, the way events bubble seems to have changed.

<div id="testGrid"></div>

<script>

$(function () {

$("#testGrid").kendoGrid({

dataSource: [

{ name: "Joe", email: "email1 at example.org" },

{ name: "George", email: "email2 at example.org" },

{ name: "Ken", email: "email3 at example.org" },

],

rowTemplate: kendo.template($("#testRowTemp").html()),

selectable: true,

columns: [

{ field: "name", title: "Name" },

{ field: "email", title: "E-mail" }

],

});

</script>

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

<tr data-uid="#= uid #">

<td>

<input type="text" value="#: name #" />

</td>

<td>

<input type="text" value="#: email #" />

</td>

</tr>

</script>

In this simple sample code, you'll notice that if you click inside one of the textboxes, the row containing the textbox does not get selected in the 2014 Q3 release version. In the 2013 Q3 release version, clicking in the textbox does select the row.

I don't know whether this was an intentional change or not, but I do need to have the functionality of the 2013 Q3 release where the event bubbles up to the row and selects it. Is there a setting on the grid that can be applied to get this functionality back or a workaround to be able to select the row when an input in the row is clicked?

Grid

answered on 18 Feb 2015

3 answers

120 views

categoryAxis padding / first+last note hidden

I have a line chart (http://jsfiddle.net/mortenma71/dzw2sqsk/9/) with notes where the first and last note is partially hidden.
Can I setup the chart so that both first and last note is visible?

Charts

answered on 18 Feb 2015

3 answers

472 views

How to set select with datasource inside drawer?

I'm using drawer but i don't want to set there static hardcoded data. I want to set there selects (dropdown lists) and load the data from data source (json for example). I use angularjs as javascript.

Maybe you have example?

My purpose is to make search block for a list in drawer and to filter the list by it.

Thanks for help!

Sophie

Drawer (Mobile)

answered on 18 Feb 2015

1 answer

69 views

Does the new version 2914.1.318 support server group?

I would like to use the server grouping feature for my project. I found an example in JSFiddle: http://jsfiddle.net/keithnolan/yrk9G/1/.

It works properly with the original Kendo version, http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js, but it doesn't work if I change the JSFiddle External Resource pointing to the latest Kendo, http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js.

If I use the old kendo version, the kendo muliselect and some other features won't work.

Could anybody give me a hint if I missed anything?

Thanks,
Jerry

Grid

answered on 18 Feb 2015

1 answer

108 views

Checkoboxes and Radiobuttons styles

There is one important feature still missing here:
Support for intermediate style.

I'm using this quite often, so without this supported I cannot apply new styles.

Kind Regards
Marcin

General Discussions

answered on 18 Feb 2015

15 answers

571 views

DataSource cancelChanges not reflected in UI

I have a DataSource with one model/record in it and I have binded that to some input controls:
kendo.bind($(....), _myDataSource.view()[0]);

When I want to cancel the changes (when e.g. the user chooses "Cancel") I call _myDataSource.cancelChanges().
I then see that the model in de datasource is reverted.
But the bindings are not updated, so still the modified values are visible.

Any idea?

Regards, Jaap

MVVM

answered on 18 Feb 2015

1 answer

121 views

Accessing list of a model in Templates

Hi,

I have issue with looping through the list of a models in template. I am binding the below template to listview

Model :
ModelClass()
{
ClassId
ClassName
ClassSize
List<ModelStudents>()
}

ModelStudents()
{
StudName
StudAge
StudGender
List<ModelMarks>
}

ModelMarks()
{
Marks1
Marks2
Marks3
}

A model is passed to the view and I can get the parent element like this. But how to get the collections from the parent element.

<script type="text/x-kendo-template" id="mytesttemplate">
#=ClassId#</br/>
#=ClassName#</br/>
#=ClassSize#</br/>
</script>

Templates

answered on 18 Feb 2015

2 answers

834 views

Prevent resizing & moving events

Hi,

I've seen the restrictions demo where you can catch the resize, resizeStart, resizeEnd, move, moveStart and moveEnd events:
http://demos.telerik.com/kendo-ui/scheduler/restriction

However I'm looking for a solution which would entirely remove the resize and move features.
Could anyone point me in the right direction?

Thanks in advance.

Kind regards,
Kenny.

Scheduler

answered on 18 Feb 2015

2 answers

133 views

Sortable columns in the grid, is working very strange

Dear Telerik,

We faced a problem using grid inside of a sortable div.

The resize of the columns used to work fine, but when we put a grid inside of a sortable div, it stopped to work.

How can we make it work? Here is a demonstration of the problem, I have attached a screendump, so you can see, what we think is not working.

http://dojo.telerik.com/ODOge

We are using the lastest version of Google Chrome, but it doesn't work properly at the others browsers neither.

Looking forward to hear from you.

Best regards

Peter Beyer
CRM-ByggeFakta

Grid

answered on 18 Feb 2015