Questions on Kendo UI for jQuery Forum

1 answer

103 views

ImageBrowser: Make transport.thumbnailUrl and transport.imageUrl consistant.

I want to use the ImageBrowser with services that perform the requested operations.. I've got my transport.read, transport.create, transport.destroy services created just fine and everything works.

However, the imageUrl and thumbnailUrl properties leave me baffled.

So transport.thumbnailUrl hard-codes a ?path={url} to whatever url you give it ... this seems like a major hack. I WANT to have a REST service and I need to supply additional query string parameters, but this implementation precludes doing so.

At least imageUrl lets me pass in a function or a parameterized string, but imageUrl ALWAYS tacks on the current relative path. I have the images stored in a DB, so doing so just adds needless weight.

Regardless, both these properties should have the same abilities as the create,read, and destroy -- let me control what is passed in explicitly.

General Discussions

answered on 07 Feb 2013

1 answer

190 views

Grid popup edit template bind does not work properly

Hello all! thank for this great product.
I use a grid with popup editor for insert and edit grid rows.
in template I use radio button group

<script type="text/x-kendo-template" id="popup_editor">
<input id="4" type="radio" name="Condition" checked=true data-bind="NRDisabled : ChequeNotPassedChange" />
<input id="5" type="radio" name="Condition" data-bind="NRDisabled : ChequeReturnedChange" />
<input id="8" type="radio" name="Condition" data-bind="NRDisabled : ChequeNaghdiChange" />
</script>
and the properties defined in viewmodel
var viewModel = kendo.observable({
ChequeNaghdiChange:false,
ChequeReturnedChange:false
........

the NRDisabled is used for disable and enable control and its work perfectly out of popup by simple set true or false property
viewModel.set("ChequeNaghdiChange",false);
kendo.data.binders.NRDisabled = kendo.data.Binder.extend({

refresh: function () {
if (this.bindings.NRDisabled.get()) {
this.element.setAttribute("disabled", "disabled");
} else {
this.element.removeAttribute("disabled");
}
}
});

It's seems property binding have some problem in kendo.
Best Regards
Amir

Grid

answered on 07 Feb 2013

1 answer

111 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

318 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

95 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

142 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

304 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

120 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

259 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

102 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