Questions on Kendo UI for jQuery Forum

2 answers

618 views

I have an application that contains kendoGrids. In the grids I have click events on column templates. So when a click happens I need to show a different view. I have a tabStrip as my navigational control, but during the click event I can not get the kendoMobileTabStrip object. It always comes back as undefined. So unfortunately I can't get to switchTo function. I'm using...

var tabStrip = $('#navigation').data('kendoMobileTabStrip');

Can someone advise please?

General Discussions

answered on 08 Mar 2012

0 answers

88 views

Updating Templated Values on Demand

Hello,

I have a database with my records. The records in my database stores all date/time values in UTC format. I am displaying these records in a Kendo Grid. I have a checkbox that allows the user to view the records in local time instead of UTC time. My question is, how do I update the time values in my Grid without doing another trip back to my service? I've attached my current code below. Thank you.

<div id="myList"></div>

<input id="toggleTime" value="Toggle Time Format" onclick='toggleTimeFormat();" />

<script type="text/javascript">

var myDataSource = new kendo.data.DataSource({

type: "json",

pageSize: 50,

transport: { read: "/myData/" }

});

var theGrid = $("#myList").kendoGrid({

scrollable: { virtual: true },

dataSource: myDataSource,

sortable: true,

height: 250,

columns: [

{ title: "Person", field: "CustomerName", sortable: true },

{ title: "Order Date", field: "OrderDate", sortable: true, template: '#= kendo.toString(convertToDate(OrderDate), "MM/dd/yyyy hh:mm tt") #' },

{ title: "Ship Date", field: "ShipDate", sortable: true, template: '#= kendo.toString(convertToDate(ShipDate), "MM/dd/yyyy hh:mm tt") #' }

]

});

function convertToDate(s) {

var dateRegExp = /^\/Date$(.*?)$\/$/;

var date = dateRegExp.exec(s);

return new Date(parseInt(date[1]));

}

function toggleTimeFormat() {

// Update date values in the grid here

}

</script>

Grid

asked on 08 Mar 2012

1 answer

300 views

Can we change TabStrip's orientation?

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

128 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

340 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

145 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

210 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

104 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?

Date/Time Pickers

answered on 08 Mar 2012

3 answers

678 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

268 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