Questions on Kendo UI for jQuery Forum

1 answer

105 views

What am I doing wrong with drag and drop

I have been able to get it working, but only part of the time - as in some drags will register, but others will slide back to the original spot and not work. This is as stripped down as I can make it not work:

<div>

<div id="drop" style="border: solid 1px green; ">

bla<br />bla<br />bla<br />bla<br />bla<br />

</div>

<ul>

<li id="t5" style="border:solid 1px red;">T5</li>

</ul>

</div>

<script type="text/javascript">

$(function () {

$('#t5').kendoDraggable({

hint: function (e) {

return e.clone();

}

});

$('div#drop').kendoDropTarget({

drop: function (e) { console.log(e); }

});

</script>

With that, the drops will not register (nothing gets logged), but if I simply change 'div#drop' to 'body' (so it catches everything), the drop will log. What am I not understanding? I have nothing else on this test page other than a jquery 1.8.2 reference and kendo. Thank you.

Drag and Drop

answered on 07 Feb 2013

1 answer

309 views

Grid with column template

Hello, first time posting here so Hi to everyone on the forums.
I'm currently evaluating Kendo for use in a asp.net mvc4 web application using razor based views. As usual I started with trying to figure out the "hard part" first, how well Kendo handles ManyToMany relationships in models. And instantly i was positively greeted with a list of all the foreign key id's in the column. So far so good.
After some fiddling and some reading i figured that the use of a .Template would be the way to go to display the actual information and not just the Id's. Maybe I just havent understood the syntax of the templates yet, I'v only been looking at this for a few hours still.
What I'v tried is something like this:

columns.Bound(m => m.Departments).Template(m =>

{

foreach (var department in m.Departments)

{

@<text> @department.Name @</text>;

}

});

The data in the Model is all there and in order.
Obviously this isn't working, and I'v tried a few combinations of output that i'v found on these forums but none seem to work for me.
Can anyone offer some assistance towards the proper way of achieving this?

Br.

Grid

answered on 07 Feb 2013

3 answers

88 views

IE8 script running slowly

Hello,

I'm using version 2012.2.710 and for some of my grids im running into this problem on IE8:

http://support.microsoft.com/kb/175500

I'm not entirely sure if it's the grid, the underlying datasource, or what, but something in kendoui is hitting the limit in IE8. The microsoft "fixit" and registry tweaks are not a viable solution for us. We target business users and it's just not feasible to expect them to apply this patch.

We were actually considering buying a license, but this is most definitely a show stopper for me, so much so that I'm considering replacing all the work I've done with kendoui and replacing it with something else.

I understand it's a problem with IE8 (I mean seriously, why are they keeping track of lines of code executed rather than execution time.) But, its so bad that for some of my grids this popup appears almost instantly.

Any suggestions would be greatly appreciated. Really frustrated...

Thanks

Grid

answered on 07 Feb 2013

5 answers

128 views

Tooltip on Chrome/Safari

Hello, I have following issue with tooltips on Safari and Chrome (they are working properly on Firefox/IE). When I'm hovering bar from up to down the tooltip is displayed wrongly. When hovered from down to up, it is displayed correctly. See attahced screenshots:

Charts

answered on 06 Feb 2013

1 answer

299 views

Problem with Popover demo

Greetings - I'm just getting started with Kendo Mobile and am looking at using the Popover. I've tried reproducing your demo located here: http://demos.kendoui.com/mobile/popover/index.html. I've copied and pasted the HTML from your demo into a local MVC view (I made a couple of trivial changes to load jQuery and Kendo from their respective CDNs). The complete markup from my view is as follows:

<!DOCTYPE html>

<html>

<head>

<title></title>

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

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

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

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

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

</head>

<body>

<div data-role="view" data-title="Tag people" id="popover">

<div data-role="header">

<div data-role="navbar">

<a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>

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

<a data-align="right" data-rel="popover" href="#popover-people" data-role="button">Select people</a>

</div>

<div data-role="content">

<img src="http://demos.kendoui.com/content/mobile/shared/faces.jpg" />

</div>

<div data-role="popover" id="popover-people" data-popup='{"height": 230, "width": 350}'>

<div data-role="view" data-title="People">

<div data-role="header">

<div data-role="navbar">

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

<a data-role="button" data-align="right" data-click="closeParentPopover">Close</a>

</div>

<ul data-role="listview">

<li><label>Isabella Anderson<input type="checkbox"></label></li>

<li><label>Josh Anderson<input type="checkbox"></label></li>

<li><label>Linda Anderson<input type="checkbox"></label></li>

<li><label>Oliver Anderson<input type="checkbox"></label></li>

<li><label>James Williams<input type="checkbox"></label></li>

<li><label>Barbara Williams<input type="checkbox"></label></li>

</ul>

</div>

<div data-role="popover" id="popover-location" data-popup='{"height": 140, "width": 350}'>

<div data-role="view">

<ul data-role="listview" data-click="closeParentPopover">

<li><label>Sydney, Australia <input name="location" type="radio"></label></li>

<li><label>New York, USA <input name="location" type="radio"></label></li>

<li><label>Miami, USA <input name="location" type="radio"></label></li>

</ul>

</div>

<div data-role="footer">

<div data-role="navbar">

<a data-align="right" href="#popover-location" data-rel="popover" data-role="button">Select location</a>

</div>

<style scoped>

.km-ios #popover .km-view-title,

.km-ios #popover-people .km-view-title

{

color: #fff;

text-shadow: 0 -1px rgba(0,0,0,.5);

}

.km-ios #popover .km-navbar,

.km-root > * > #popover > .km-content

{

background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.35)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))) #000;

}

.km-ios #popover .km-navbar .km-button

{

background-color: #000;

}

</style>

<script>

function closeParentPopover(e) {

var popover = e.sender.element.closest('[data-role=popover]').data('kendoMobilePopOver');

popover.close();

}

</script>

<script>

var app = new kendo.mobile.Application(document.body);

</script>

</body>

</html>

A screenshot of what I see when I view the page is attached to this post.

Basically when the page loads, it appears as if the people popover is fully expanded and covers the entire page. Any insight as to what I'm missing would be much appreciated.

PopOver (Mobile)

answered on 06 Feb 2013

1 answer

111 views

auto update html grid

Hi,
first, im sorry for my bad english.

I have a grid and a model. I bind dataSource of grid to model.items.
but when i update model grid dont update

code:
$(document).ready(function(){
   var model=new MyModel();
   ko.applyBindings(model);
   $("#grid").kendoGrid({
      dataSource:{
         data:model.items(),
         pageSize:10
      },
      ...
   });
});

if i use bellow code all thing is ok. and when i update my model
grid update
<div data-bind="kendoGrid:{data:items}"></div>

Grid

answered on 06 Feb 2013

2 answers

251 views

Is there a way to set the keyboard focus to the DropDownList?

I just want to set the focus at the DropDown list of items, so if the user presses the up or down arrow in the keyboard, the selected item changes.

The only way I can do this is by clicking in the DropDownList arrow. How can I do the same with code?

Thanks...

DropDownList

answered on 06 Feb 2013

1 answer

95 views

Validation Confusion

I'm using Icenium to create a new mobile app with Kendo UI. I'm trying to learn to use form validation and I'm not having much success. I tried to copy the relevant code here:

http://jsbin.com/uzegiv/1/edit

Here are my issues/questions:

1. The Name field shows an error even if I type a name.
2. The checkbox required validation seems wonky in general.
3. Please look through and see if I am doing anything generally dumb.

Thanks.

Validation

answered on 06 Feb 2013

5 answers

146 views

Filters not working in Server mode with Jquery 1.8.2

I have a grid where all the processing is fully server side. This all works fine when I use jquery 1.7, however when I use 1.8.2 the columns filters don't seem to be working.

The icon updates on a column to show it's filterable just when I click it nothing happens. I'm using the latest version of your controls. Has anything happened that may affect behaviour.

Since all my processing is server side it's difficult to provide an example.

Grid

answered on 06 Feb 2013

2 answers

90 views

ModalView doesn't open unless I have data-role="button"

<a href="#moreModalView" data-rel="modalview" id="moreButton" data-role="button">More...</a>

<div data-role="modalview" id="hoursModalView">

<div data-role="header" class>

<div data-role="navbar">

<span>More Info</span>

</div>

<p style="text-align:center; margin-top:10px;">Hours</p>

<a data-click="closeModalView" data-role="button" data-align="right">Close</a>

</div>

I have a ModalView as seen above. However, if I remove the data-role="button" from the link, clicking the link does not do anything. It actually prevents any scrolling and the back button in my header from working.
The ModalView div is inside the View div that the link is in.
This is all part of a Phonegap App.

Any ideas as to why this might happen?

ModalView

answered on 06 Feb 2013