Questions on Kendo UI for jQuery Forum

2 answers

131 views

Before my implementation I reproduced your video example about datasource but my example I use local data (http://www.youtube.com/watch?feature=player_embedded&v=FhHMOjN0Bjc)

I need show the id of "DataSource" when select the kendoGrid although the kendoGrid dont show the id in column

var mydata = [{id:"1",age:"23",name:"hernan"}];

var myschema = kendo.data.Model.define({

id : "id",

name: "name",

age: "age"

});

var ds = new kendo.data.DataSource({

data: mydata,

schema : {

model : myschema

}

});

//and in the grid I configured it:

var

personId;

$("#grid-distributors").kendoGrid({

dataSource: ds,

selectable: true,

height: 360,

scrollable: true,

sortable: true,

pageable: true,

change : function() {

var id = this.select().data("id");

personId = this.dataSource.get(id);

alert(personId); //DONT SHOW ME THE ID!! :(

},

columns: [

{

field: "name",

title: "Nombre"

},

{

field: "age",

title: "Edad"

}

]

});

Data Source

answered on 15 May 2012

11 answers

417 views

Grid API method trigger help

We have a grid on the browser page that works great BUT we want it to save every time they delete a record, and then to notify them the record was saved of course. (displaying the same page of data).

Issue:
We cannot seem to get the grid to refresh. We see the API function but our interpretation of the docs is not working for us.

Grid

answered on 15 May 2012

1 answer

146 views

Destroy Response

I'm using django 1.2 and a variation of https://github.com/tnajdek/django-kendoui-backend that i modified to work with 1.2.

What do I return back from the server for a destroy request? All the CRUD services appear to be working properly except the destroy. I believe it is because I'm not returning the proper response from the server. It deletes the item properly, but the next time I update or do anything dealing with the CRUD services, it tries to delete the item again so I think the DataSource is not realizing that it was deleted properly so it tries again on the next call.

Grid

answered on 15 May 2012

1 answer

229 views

Changing Color of Back Button

Is it possible to simply change the color of the back button? By overriding the kendo classes I was able to change the main body of the background, but not the arrow tip. (Please see attachment.) Any assistance would be appreciated.

NavBar

answered on 15 May 2012

0 answers

76 views

Local datastore strange behavior

Hi All.

I trying to create a local data store like this (this is an official example from docs)

var movies = [ {

title: "Star Wars: A New Hope",

year: 1977

}, {

title: "Star Wars: The Empire Strikes Back",

year: 1980

}, {

title: "Star Wars: Return of the Jedi",

year: 1983

}

];

var localDataSource = new kendo.data.DataSource({data: movies});

But i cannot get a data from the datasource:



localDataSource.data(); // returns "[]"

DataSource data size:

localDataSource.total(); // returns "0"

Where I am wrong?

Data Source

asked on 15 May 2012

3 answers

143 views

View Transitions >> Adjusting Easing

Hey Kendo,

I'm looking to adjust the easing between various views as the built-in defaults are a bit too linear. Looking at kendo.fx.js, I see that you've extended easeOutExpo for internal use, but when attempting to pass in Transition.easeOutExpo into

extend(kendo.fx, {

transition: function(element, properties, options) {

options = extend({

duration: 200,

ease: Transition.easeOutExpo, // 'ease-out'

...

it appears to break the slide all together. Seeing that you're using CSS3 for your transitions, is it possible to pass in your own via tools like Ceasar and extend Transition further via the syntax that you've provided above?

Any help would be appreciated.

General Discussions

answered on 15 May 2012

13 answers

217 views

Kendo Mobile + MVC3

Hello,

I'm trying to use kendo mobile with my MVC application but i can't succeed to have a mobile view like an iphone view. There is littles changes on the list but that not appear like on a mobile.

I copy/paste the mobile demos on a view of my mvc application but it doesn't work.

Someone can explain me if i do a miostake?

Thanks.

this is my code on the default view "about" of my mvc application.

@{

ViewBag.Title = "About Us";

}

<div data-role="view" id="flat" data-init="mobileListViewDataBindInitFlat" data-title="ListView" data-layout="databinding">

<ul id="flat-listview"></ul>

</div>

<div data-role="view" id="grouped" data-init="mobileListViewDataBindInitGrouped" data-transition="" data-title="ListView" data-layout="databinding">

<ul id="grouped-listview"></ul>

</div>

<div data-role="layout" data-id="databinding">

<header data-role="header">

<div data-role="navbar">

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

<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#flat" data-icon="stop">Flat</a>

<a href="#grouped" data-icon="organize">Grouped</a>

</div>

<script>

var groupedData = [

{ name: "Sashimi salad", letter: "S" },

{ name: "Chirashi sushi", letter: "C" },

{ name: "Seaweed salad", letter: "S" },

{ name: "Edamame", letter: "E" },

{ name: "Miso soup", letter: "M" },

{ name: "Maguro", letter: "M" },

{ name: "Shake", letter: "S" },

{ name: "Shiromi", letter: "S" },

{ name: "Tekka maki", letter: "T" },

{ name: "Hosomaki Mix", letter: "H" },

{ name: "California rolls", letter: "C" },

{ name: "Seattle rolls", letter: "S" },

{ name: "Spicy Tuna rolls", letter: "S" },

{ name: "Ebi rolls", letter: "E" },

{ name: "Chicken Teriyaki", letter: "C" },

{ name: "Salmon Teriyaki", letter: "S" },

{ name: "Gohan", letter: "G" },

{ name: "Tori Katsu", letter: "T" },

{ name: "Yaki Udon", letter: "Y" }

];

var flatData = ["Sashimi salad", "Chirashi sushi", "Seaweed salad", "Edamame", "Miso soup", "Maguro", "Shake", "Shiromi", "Tekka maki", "Hosomaki Mix", "California rolls", "Seattle rolls", "Spicy Tuna rolls", "Ebi rolls", "Chicken Teriyaki", "Salmon Teriyaki", "Gohan", "Tori Katsu", "Yaki Udon"];

function mobileListViewDataBindInitFlat() {

$("#flat-listview").kendoMobileListView({ dataSource: flatData });

}

function mobileListViewDataBindInitGrouped() {

$("#grouped-listview").kendoMobileListView({

dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),

template: "${name}"

});

}

</script>

<script>

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

</script>

General Discussions

answered on 15 May 2012

0 answers

183 views

Datasource add() is not creating row on client side using sync() method

I am creating a new item / row on a datasource which works server side but not client side. Basically I have a mobile app where I list messages in one view and then have a create message form in another view which should in theory update on the server and update the message list using the sync method on the datasource. It updates the server but does not update the list until I refresh the page.

Can anyone see what I am missing?

Many thanks in advance.

Code in INDEX page

//global vars

var support_selected;

var support_id;

var support_read;

var ticket_subject;

var ticket_message;

var ThreadID;

var Closed;

var DateCreated;

var Subject;

var ticketDataSource = new kendo.data.DataSource({

transport: {

read: "/support/data",

dataType: "json",

create: {

url: function() {

var url = "/support/newticketpost/";

return url;

},

type: "POST",

dataType: "json"

},

update: {

url: function() {

var url = "/support/markasread/" + support_id + "/" + support_read;

return url;

},

type: "POST",

dataType: "json"

},

schema: {

model: {

id: "ThreadID",

fields: {

DateCreated: { type: "string" },

Subject: { type: "string" },

Closed: { type: "string" }

}

});

code in LIST MESSAGES page

<div data-role="view" data-title="Control Panel - Mobile" id="listtickets" data-init="listTicketsInit">

<h2>Tickets</h2>

<p><?php echo $unread_responses . ' - unread support responses'; ?></p>

<p><a data-align="left" data-role="button" href="/support/newticket/">New ticket</a></p>

<ul id="support_list"></ul>

</div>

<script id="support_list_template" type="text/x-kendo-template"><a href="/support/view/#= ThreadID #"><div style="float:left; width:150px;" class="closed_#= Closed #">#= DateCreated # </div><div id="ticket_#= id #" class="closed_#= Closed #">#= Subject #</div></a></script>

<script>

function listTicketsInit() {

$("#support_list").kendoMobileListView({

dataSource: ticketDataSource,

style: "inset",

template: $("#support_list_template").text()

});

}

</script>

<style>

#listtickets div.closed_0 {font-weight:bold}

#listtickets div.closed_1 {font-weight:normal}

</style>

code in NEW MESSAGE page

<div data-title="Control Panel - Mobile" id="newticket" data-role="view" data-init="newTicketInit">

<h2>New Ticket</h2>

<div id="error"><p style="color:red">Please enter both subject and message</p></div>

<ul data-role="listview" data-style="inset">

<li>Subject<input type="text" name="subject" id="subject" /></li>

<li>Message<textarea name="message" id="message" style="float:right"></textarea></li>

<li><a data-role="button" id="sendBtn">Send</a></li>

</ul>

</div>

<script>

function newTicketInit() {

var redirect = "/support/listall";

//hide reply box & error boxes

$("#error").hide();

//send reply

$("#sendBtn").click(function() {

ticket_subject = $("input#subject").val()

ticket_message = $("textarea#message").val();

if (ticket_subject == "") {

$("div#error").show();

$("#subject").focus();

return false;

} else if(ticket_message == ""){

$("div#error").show();

$("#message").focus();

return false;

} else {

ticketDataSource.add({ subject: ticket_subject, message: ticket_message });

ThreadID = ticketDataSource.data();

ticketDataSource.sync();

app.navigate(redirect);

}

});

}

</script>

Data Source

asked on 15 May 2012

3 answers

221 views

Application is blocked while reading from DataSource

Hello, I could not find anything on this (hope it's not been answered somewhere already).

I'm refresh my grid's content every minute by calling :

      GridControl.DataSource.read();

The server sometimes takes a long time to process the request, and this block the execution of the clien side application. The user cannot click on the grid or on any other controls. Once the information is received from the server, Kendo display it instantly.

Is there a way to make the ".read()" async ?

Thanks !

Data Source

answered on 15 May 2012

2 answers

146 views

[Solved] Unbind Form Validation

Hi,

Is there a way to unbind the validation?

What I'm trying to do is to have a cancel button that hides the form, and resets it, but when the form is re-displayed, if the validation was previously activated, the validation warnings are already shown, besides the reset action.

Is this possible?

Are there any workaround to do this?

Thanks,
Ricardo

Validation

answered on 15 May 2012