Questions on Kendo UI for jQuery Forum

1 answer

306 views

Problems linking Listview to Detail view

I have been at this for hours! Using the Sushi example as a reference im trying to link the from my list view to the details view by passing the "alert_ID" from my datasource. Please help, im sure it's something simple.

here is my code:

<!DOCTYPE html>
<html>
<head>
<title>IRIS Mobile</title>

<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.flat.min.css" rel="stylesheet" />
<link href="styles/IRISmobile.css" rel="stylesheet" type="text/css">

<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>

<div id="alerts_list" data-role="view" data-title="IRIS Alerts" style="background-color: #FFF">
<header data-role="header" >
<div data-role="navbar">
<span data-role="button" data-align="left" data-icon="home" href="#main-menu" data-rel="drawer"></span>
<span data-role="view-title"></span>
<a data-role="button" data-rel="drawer" href="#alert-menu" data-icon="info" data-align="right"></a>
</div>
</header>



<div class="head"> </div>
<ul id="list" data-role="listview" data-source="IRISalerts" data-click="listViewClick" data-template="tmp"></ul>

</div></div>


<div data-role="view" id="details" data-transition="slide" data-layout="default" data-show="showDetailsView" style="background-color: #FFF">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">Back</a>
<span data-role="view-title">Alert Details</span>
</div>
</header>

<div data-role="content">
</div>
</div>


<script id="tmp" type="text/x-kendo-template">
<a class="details-link" data-role="listview-link" href="\#details">
<img class="alertimage" src="http://s215821072.onlinehome.us/irismobile/images/#: degree #.png" />
<div class="listviewdiv">
<h3 class="item-info">#: title #</h3>
<p class="item-title">#: sentDT # <span class="AlertTitle"> :: #: sender # </span></p>

</div>
<a data-role="button" href="\#details" class="listviewbutton" data-icon="mostrecent"></a>
</a>
</script>


<script id="detailTemplate" type="text/x-kendo-template">
<aside>
<img src="http://s215821072.onlinehome.us/irismobile/images/#: degree #.png" />
</aside>
<h2>#: title #</h2>
<p>#: message #</p>

</script>


<script>

//var app = new kendo.mobile.Application();
var IRISalerts = new kendo.data.DataSource({
transport: {
read: {
url: "http://test.irisdispatch.com/public/mobilefunctions.cfc?method=getAlerts&returnformat=plain&user_id=3798559",
dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
}
},
schema: {
data: "results",
model: {
id: "alert_ID",
fields: {
//field description
}
}
}
});

//Get Details

ds.fetch();

var itemDetailsTemplate = kendo.template($("#detailTemplate").text());

function showDetailsView(e) {
var view = e.view;

ds.fetch(function() {
item = ds.get(view.params.alert_ID);
view.scrollerContent.html(itemDetailsTemplate(item));
kendo.mobile.init(view.content);
});
}
</script>




<div data-role="drawer" id="main-menu">
<div><img src="images/greylogo.png"></div>
<ul data-role="listview">
<li><a href="views/settings.html" data-transition="none">Settings</a></li>
<li><a href="index.html" data-transition="none">Log Out</a></li>
</ul>
</div>



<div data-role="drawer" id="alert-menu" data-position="right" style="width: 80px" data-title="Codes">
<div>
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<img src="images/alertlegend.png" width="100%"/>
</div>


<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>

ListView (Mobile)

answered on 28 Aug 2013

1 answer

84 views

# javascript code # in template from kendo.bind or kendo.view

Hi

Is it possible to write JavaScript code in a template - and instantiate the template implicitly by using kendo.Bind OR kendo.View?

<script type="text/x-kendo-template" id="mytemplate">

# for (int i ... ) #

</script>

kendo.bind(jQuery('#mytemplate'), cardsViewModel);

Likewise, as part of a view template:

var cards = new kendo.View('mytemplate', {

wrap: false,

model: cardsViewModel

});

jQuery('#targetelement').html(cards.render());

Because whenever I try and use #, #= or #:, it just renders as text :(
Leads me to believe it only works if you explicitly instantiate as a template:

var inlineTemplate = kendo.template($("#javascriptTemplate").html());

I've only been able to use this notation to successfully render items:

<div data-template="my-template" data-bind="source: myItems">

</div>

<script type="text/x-kendo-template" id="my-template">

<span data-bind="text: this"></span>

</script>

General Discussions

answered on 28 Aug 2013

4 answers

600 views

Changing the labels of x-axis in a scatter line chart

Hello,

I am using scatter line graph and i want to edit the labels of x-axis to name of months (Jan, Feb, March, Apr .... Dec) instead of numbers which are currently rendered. Below is the code and screenshot is attached.

function rceTime() {

$("#chart9").kendoChart({

theme: $(document).data("kendoSkin") || "default",

title: {

text: "Visa Expiry and Contract Expiry in Coming months"

},

dataSource: {

transport: {

read: {

url: "scripts/contractExpiry.json",

dataType: "json"

}

},

legend: {

visible: true,

position: "right"

},

seriesDefaults: {

type: "scatterLine",

},

series: [{

name: "Contract Expiry",

xField: "month",

yField: "day"

},{

name: "Visa Expiry",

xField: "month1",

yField: "day1"

}],

xAxis: {

title: {

text: "Month"

},

max: 12,

},

yAxis: {

title: {

text: "Date of Month"

},

min: 0,

max: 31,

labels: {

format: "{0}"

}

},

tooltip: {

visible: true,

template: "#= dataItem.name #"

}

});

}

Charts

answered on 28 Aug 2013

2 answers

333 views

[Solved] Autocomplete using Suggest

I would appreciate advice on how to use autocomplete with "suggest" to meet the following user requirements:

key in enough data to cause the desired selection to be suggested in the autocomplete text box and hit enter to navigate to the selection
key in enough data to cause the desired selection to be suggested in the autocomplete text box and click a search buton to navigate to the selection
key in some data and pick one of the autocomplete selections from the list to navigate to the selection
key in data that does not autocomplete and hit enter causing a "not found" dialog to be displayed
key in data causing the drop down to display but then click somewhere else on the screen without any navigation happening

I have been working on this a while and am probably missing something simple. I feel my implementation is too complicated and there should be a simpler way to achieve the requirements above. My example below meets all of the requirements except the last one. I can't find a way to solve the last one and still meet the other requirements. In the example below, I pop an alert instead of navigating for demo purposes. Because of this in a few of the cases it appears to navigate twice but in reality it would only navigate once.

My example is in a jsbin at:
http://jsbin.com/oToy/1/edit?html,output

AutoComplete

answered on 27 Aug 2013

1 answer

151 views

Line chart with multiple points

I have a class

public class Event

{

public DateTime eventDate {get; set;}

public string name {get; set;}

public double eventvalue {get; set;}

}

And a controller that returns a list of events. I'm returning several events, but only one eventvalue and one date is showing up on the chart.

<div class="chart-wrapper">

@(Html.Kendo().Chart(Model)

.Name("chart")

.Title("events")

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.Series(series => {

series.Line(model => model.eventvalue )

.Name(item.name );

//.Labels(labels => labels.Format("{0:N0}").Visible(true));

})

.CategoryAxis(axis => axis

.Categories(model => model.eventDate )

)

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels.Format("{0:N0}"))

)

</div>

I've even tried this:

<div class="chart-wrapper">

@(Html.Kendo().Chart(Model)

.Name("chart")

.Title("Product Samplings")

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.Series(series => {

foreach (var item in Model)

{

series.Line(model => model.eventvalue )

.Name(item.name );

//.Labels(labels => labels.Format("{0:N0}").Visible(true));

}

})

.CategoryAxis(axis => axis

.Categories(model => model.eventDate )

)

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels.Format("{0:N0}"))

)

</div>

Charts

answered on 27 Aug 2013

1 answer

87 views

Logoff problem unable to logoff from app completely in both android and iphone.

Hi,

log off not working for my application if i redirect div app.navigate("#login"); then its navigating to login but if i log in with another login credential then last login uer data getting i am not getting new user data in my listview.
navigator.app.exitApp();
this.finish();
exit(0);
Process.killProcess( Process.myPid() )
i used all these above options code its working in android but not working in iphone can anyone help me in this issue.

with regards
sumalatha

General Discussions

answered on 27 Aug 2013

1 answer

171 views

Kendoui Datasource & Json Issue

I am trying to use kendoui datasource to pull list of post into a listview with Hierarchical data binding from a Wordpress site using json. Please point me to the right direction in doing this, i have tried using kendoui datasource but no luck on this.

Below is the code i am working with so far.

01.var dataSource = new kendo.data.DataSource({

02. transport: {

03. read: {

04. url: "http://www.wordpresssite.com/category/mj/mask-videos/nigerian-mj/?json=1",

05. contentType: "application/json; charset=utf-8",

06. dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests

07. }

08. },

09. schema: {

10. data: function(response) {

11. return response.posts; // twitter's response is { "results": [ /* results */ ] }

12. }}

13.});

14.dataSource.fetch(function(){

15. var data = this.data();

16. console.log(data.length);

17. console.log(data[0].title);

18. dataSource.sync();

19.});

General Discussions

answered on 27 Aug 2013

2 answers

417 views

CSS Class on Events

Is it possible to add a customer css class to the events? We have a circumstance where we're building out some custom filtering on the scheduler and we need to be able to dynamically it in the colors of the events with a legend for the filters. Also, in the future we may need to dynamically extend those filters; so, being able to apply a custom CSS class to the events based on a type would be extremely helpful.

Is there any way to pull this off currently?

Scheduler

answered on 27 Aug 2013

6 answers

1.5K+ views

Refresh Calendar

Hi,

Is there a way to fresh the calendar? I fill the dates from a datasource and I don't want to get all the events from a whole year.

Thanks,
Martin

Calendar

answered on 27 Aug 2013

1 answer

221 views

Upload didn't work in IE9 (access denied error)

Hello.
I try to use following code:
<html lang="en" class="no-js k-webkit k-webkit28">
<head>
<meta charset="utf-8">
<title>TEST page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="kendo.common.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="kendo.metro.min.css" media="screen" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/JavaScript" src="kendo.web.js"></script>
<script>
$( document ).ready(function() {
var emailBody = new kendo.ui.Editor(
document.getElementById('emailBodyNew'),
{
tools: [
"bold",
"italic",
"underline",
"strikethrough",
"fontName",
"fontSize",
"foreColor"],
}
);

var fileUpload = new kendo.ui.Upload($("#attachmentUpload"), {
async: {
saveUrl: "Email/UploadAttachment",
autoUpload: true
},
multiple: true,
showFileList: false,
success: function (model)
{
finshAttachmentLoading(model.response);
},
error: function (error)
{
console.log(error);
},
upload: function(e)
{
console.log(e);
},
localization:
{
dropFilesHere: "Put files here"
}
});

$("#testbutton").on("click", function () {
$("attachmentUpload").click();});
});
</script>
</head>
<body>
<div class="email-body">
<textarea id="emailBodyNew"></textarea>
<div class="upload-attachments-wrapper">
<input type="file" id="attachmentUpload" name="fileUpload" />
<button id="testbutton">Click me</button>
</div>
</div>
</body>
</html>

But IE9 showed me always Access Denied error on line with following code: form[0].submit(); (method performUpload).
What should I need to change to fix this problem?

Upload

answered on 27 Aug 2013