Questions on Kendo UI for jQuery Forum

1 answer

340 views

Hi,
We would like to have vertical tabs aligned at left. Is it possible to use KendoUI tabstrip and acheive that effect? Is it possible to modify the CSS to make this work? Also can we have images in the the tab header? Please explain with some examples

regards

TabStrip

answered on 08 Mar 2012

2 answers

160 views

openOnClick bug?

element.kendoMenu({

openOnClick: true

});

1. Refresh page..
2. Select item.
3. Re trying to select.

The menu is triggered by the event onmouseover.

So it should be?

Menu

answered on 08 Mar 2012

3 answers

373 views

Event firing on button click and back button click

I am finding that an event I have defined for a button is not only firing when the button is clicked, but also when the back button is clicked. I have the following code:

<div class="back-button-show" data-role="view" data-layout="app" data-show="getVendorDetails" data-title="" id="vendor-details">

<div id="vendor-detail-div">

<div id="vendor-detail-name" data-bind="text: name"></div>

<div id="vendor-detail-tagline" data-bind="text: tag_line"></div>

<div id="vendor-detail-url" data-bind="text: url"></div>

<div id="vendor-detail-about" data-bind="text: about"></div>

<a class="button-left" data-role="button" data-click="addToFavoritesClick">Add to Favorites</a>

<a class="button-right" data-role="button" data-click="addToContacts">Add to Contacts</a>

</div>

<div data-role="layout" data-id="app" data-show="layoutShowInit">

<header data-role="header">

<div data-role="navbar">

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

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

</div>

</header>

<footer data-role="footer">

<div data-role="tabstrip">

<a href="#main-page" data-icon="info">Info</a>

<a href="#vendors" data-icon="organize">Vendors</a>

<a href="#favorite-vendors" data-icon="favorites">Saved Vendors</a>

</div>

</footer>

</div>

<script>

var addToFavoritesClick = function(e) {

alert("This is a test");

};

</script>

What I have found, is if I click on the Add to Favorites button I get the alert like I expect. Then if I click the back button, I get the alert again a second time. However if I view the page and do no click the Add to Favorites button and click the back button I do not get the alert. Any help would be greatly appreciated.

Button (Mobile)

answered on 08 Mar 2012

1 answer

178 views

Lightswitch Odata as Datasource

Hi,

because Lightswitch has in the visual studio beta 11 now an odata service I tried to use it as a datasource for the kendoui grid.

But the grid is only loading and loading and it happens nothing. I can query the LS Odata with LinqPad and the grid is working with odata from netflix.

Are there differences between the Lightswitch Odata Service and Netflix?

Thanks.

Markus

Data Source

answered on 08 Mar 2012

3 answers

233 views

Can we Use kendo UI elements in some of our projects ?

downloaded the beta version and really like the grid and menu so i want to use this in some of my projects which include some of the websites of our own and some website that we make for some clients .

So i read the agreement , but its quite confusing ... as in this case i will be using the code for menu and grid and i will also be modifying it somewhat so that it will suits my website in terms of css and adding some more features to it .

So in one way i am using some code and inserting it in a website and i am talking some money in return of the website and in case in which i am using it in my websites then i will be generating some revenue from advertisement .

So i want a clarification that whether i can use these elements in my projects as mentioned above and what are the conditions ?

General Discussions

answered on 08 Mar 2012

1 answer

129 views

Date Picker within <from> on IE 7 not collapsing.

I'm trying to user html date picker within a html form it works fine in IE 8 & 9 compatibility mode but in IE 7 mode the calendar opens up but it does not close. Here is my source

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

<link href="../Styles/kendo.metro.min.css" type="text/css" rel="stylesheet"/>

<link href="../Styles/kendo.common.min.css" type="text/css" rel="stylesheet"/>

<script src="../Scripts/kendo.all.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {

$("#kendoDatePicker").kendoDatePicker();

});

</script>

</head>

<body>

<form id="someform" action="">

<input id="kendoDatePicker" type="text" />

</form>

</body>

</html>

Any idea as to what could be wrong?

DatePicker

answered on 08 Mar 2012

3 answers

728 views

Html text decoded value issue

Hi there,

i'm having an unexpected behavior using the property "encoded" of kendoEditor control. The problem is that string returned into my controller is an html encoded string doesn't matter if the value is set to true or false.

In order to save the correct value into the database, i need to use an helper to decode the value.

WebUtility.HtmlDecode(returnModel.TextValue);

Is there any way to have the html decoded string on my posted model?

Thanks in advance,
Enrico

Editor

answered on 08 Mar 2012

0 answers

289 views

CRUD with CakePHP

Good evening, i'm trying KendoUI and i have to say it is really amazing! So, first, i'd like to thank you for your excellent work.

As the title says, i'm developing a server-side cakephp application, and i'm using kendoGrid for client-side "presentation layer".

My issue comes when i try to make CRUD operations. By the way, reading is ok, i can read the json data and show it up without problems. My problems start when trying to update (haven't tried to create/delete yet, so it doesn't matter right now).

The JSON response y get from my controller have this structure:

[{"Microcampamento":{"id":"-1","mc_nombre":ninguno)",

"mc_calle_nombre":"","mc_calle_numero":"0","mc_comuna":"0","mc_anoest":"0000","mc_int_inicio":"0000-00-00","mc_int_fin":"0000-00-00","idfase":"0","mc_email_equipo":"nl","mc_comollegar":"null","mc_rasofac":"null","mc_bbdd":"null"}},{"Microcampamento":{"id":"1","mc_nombre":"4 Canchas","mc_calle_nombre":"Calle diecinueve","mc_calle_numero":"1118","mc_comuna":"118","mc_anoest":"2003","mc_int_inicio":"2010-01-01","mc_int_fin":"0000-00-00","idfase":"4","mc_email_equipo":"cnovoa@segen.cl","mc_comollegar":"null","mc_rasofac":"null","mc_bbdd":"null"}},

{"Microcampamento":{"id" ....and the other fields......}}]

ds=new kendo.data.DataSource({

transport:{

read:{

url:"/FTC/microcampamentos/crud",

dataType: "json",

complete: function(jqXHR, textStatus) {

console.log(textStatus, "read") }

}

},

update:{

url: "/FTC/microcampamentos/crud",

type: "POST",

complete: function(jqXHR, textStatus) {

console.log(textStatus, "update")

}

},

parameterMap: function(options, operation) {

},

change: function(){

console.log("Something happened!")

},

error: function() {

alert("Ha ocurrido un error al intentar conectar con la base de datos.");

},

schema: {

model:{

id:"Microcampamento.id",

fields:{

'Microcampamento.id': {editable:false},

'Microcampamento.mc_nombre': {editable:true},

'Microcampamento.mc_calle_nombre': {editable:true},

'Microcampamento.mc_calle_numero': {editable:true},

'Microcampamento.mc_comuna': {editable:true},

'Microcampamento.mc_anoest': {editable:true},

'Microcampamento.mc_int_inicio': {editable:true},

'Microcampamento.mc_int_fin': {editable:true},

'Microcampamento.idfase': {editable:true},

'Microcampamento.mc_email_equipo': {editable:true},

'Microcampamento.mc_comollegar': {editable:true},

'Microcampamento.mc_rasofac': {editable:true},

'Microcampamento.mc_bbdd': {editable:true}

}

},

pageSize:10

});

And my kendoGrid is initiallized like this:

$(document).ready(function(){

//KendoGrid para Microcampamentos

$("#mc_grid").kendoGrid({

dataSource:ds,

height: 370,

scrollable:false,

sortable: true,

pageable: true,

editable: true,

navigatable: true,

toolbar: ["create", "save", "cancel","destroy"],

columns: [

{field: "Microcampamento.id", title: "ID"},

{field: "Microcampamento.mc_nombre", title: "Nombre"},

{field: "Microcampamento.mc_calle_nombre", title: "Calle"},

{field: "Microcampamento.mc_calle_numero", title: "Número"},

{field: "Microcampamento.mc_comuna", title: "Comuna"},

{field: "Microcampamento.mc_anoest", title: "Año Est."},

{field: "Microcampamento.mc_int_inicio", title: "Inicio Interv."},

{field: "Microcampamento.mc_int_fin", title: "Fin Interv."},

{field: "Microcampamento.idfase", title: "Fase", width: '100px'},

{field: "Microcampamento.mc_email_equipo", title: "Email Equipo"},

{field: "Microcampamento.mc_comollegar", title: "Cómo Llegar", template:'<a href="" >IR</a>'},

{field: "Microcampamento.mc_rasofac", title: "Rasofac"},

{field: "Microcampamento.mc_bbdd", title: "BBDD"}

]

})

});

With the code just like i just show you, i get no data posted to server-side. I see that with firebug and debuging my php code.
Here's an screenshot-> Update Error 1

If i don't set parametermap, i get an error message from kendo.all.js -> Update Error 2
In this same situation, if i click on "Add new record" i got this error -> Create Error 1

So, i understand the problem is setting the parametermap property, so i have to define it, but i don't know how to do it, to make it work with CakePHP.

I really appreciate your help.

Thank you very much in advance!

Data Source

asked on 08 Mar 2012

1 answer

313 views

jQuery object not found and no method for kendoEditor?

I've got the basic setup for the kendo editor (yes, with Q1 beta) and getting the following errors...
I'm loading the latest Jquery from Google CDN, in script.js I'm calling the most basic kendoEditor setup.
Any ideas?

kendo.editor.js:843Uncaught ReferenceError: jQuery is not defined

    

script.js:145Uncaught TypeError: Object [object Object] has no method 'kendoEditor'

Editor

answered on 08 Mar 2012

0 answers

137 views

Editor List display issue after removal of carriage returns

Take the basic usage example http://demos.kendoui.com/beta/web/editor/index.html if you hit enter twice on one of the <li> in the middle of the list, then you remove the carriage returns, after that there seems to be a gap between the <li> and its neighbors? See the attached pic and notice the gap between 2nd and 3rd bullets.

Editor

asked on 07 Mar 2012