Questions on Kendo UI for jQuery Forum

1 answer

128 views

Mobile Dashboard

Hi,

I am looking at building a Mobile Dashboard.

Not sure if kendo ui for mobile has any controls for it. How do i go about building a Dashboard which has the following.

I need to build a dashboard with the following.

1. A Geographical Map Report
2. A KPI Scorecard Report
3. A Trend Report

Are there any tutorials which can help with this

General Discussions

answered on 08 Mar 2013

1 answer

107 views

Grid from a LINQ dataset

Hello All,
I'm new at this. I'm trying to show a grid based on a linq dataset.
Basically, I have a table myTable, I want to display all rows of that table in a grid.
what's the simplest way to do it. I want my table to be editable (add, edit and remove rows).

Thank you,

Grid

answered on 08 Mar 2013

2 answers

627 views

Change to another view with Layout

I've trying to change to another view using navigate() function. The view is changed but the header and footer of the layout are not shown.

As I have a Tabstrip in the footer I try to change the tab at the same time.

I've create an example where youu can see this behavior.

<!DOCTYPE html>

<html>

<head>

<title>My App</title>

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script>

function ChangeToView(e) {

var data = e.button.data();

var view = data.id;

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

app.navigate('#view'+view);

var tabStrip = $("#tabStrip").data("kendoMobileTabStrip");

if (tabStrip)

tabStrip.switchTo("#view"+view);

}

</script>

</head>

<body>

<div id="home" data-role="view" data-layout="default">

Hello Mobile World!

<a class="button" data-role="button" data-click="ChangeToView" data-id="2">Change to view 2</a>

<a class="button" data-role="button" data-click="ChangeToView" data-id="3">Change to view 3</a>

</div>

<div id="view2" data-role="view" data-layout="default" >View 2</div>

<div id="view3" data-role="view" data-layout="default" >View 3</div>

<section data-role="layout" data-id="default">

<header data-role="header">

<div data-role="navbar">My App</div>

</header>

<footer data-role="footer">

<div data-role="tabstrip" id="tabStrip">

<a href="#home">Home</a>

<a href="#view2">View 2</a>

<a href="#view3">View 3</a>

</div>

</footer>

</section>

<script src="js/jquery.min.js"></script>

<script src="js/kendo.mobile.min.js"></script>

<script>

var app = new kendo.mobile.Application(document.body,

{

transition:'slide'

});

</script>

</body>

</html>

Does anybody know a way to make it work? Thanks in advance.

Application

answered on 08 Mar 2013

4 answers

1.4K+ views

validation messages position

Hello again,
1. Can i set the validation messages position ?
I want the messages to appear not near the control,instead below the control being validated.
2. Also how can i add more validation rules to one textbox for example ?


3. this attribute  validationMessage="Please enter {0}" the {0} is replaced by the name of the control?
if yes,can i specify a different value(e.g. the value of another control)?

Regards,
Daniel

Validation

answered on 08 Mar 2013

1 answer

499 views

Bootstrap modals and Kendo UI divs

Hi,

I have a Bootstrap modal setup as below, with DIVs that are supposed to be linked to the Kendo UI divs.

However, upon clicking the submit button, the form is not hidden (visible: hideMain) and the message is not presented (visible: confirmed). Despite the divs and JS being setup correctly.

What should happen is that when "send message" is clicked, the form div should hide and the message div should appear.

<a href="#emailModal" role="button" class="btn btn-primary" data-toggle="modal">Email Us</a>

<div id="emailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="emailModalLabel" aria-hidden="true">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h3 id="emailModalLabel">Email Us</h3>

</div>

<div class="modal-body">

<div data-bind="visible: hideMain">

<form>

<fieldset>

<p><label>Title</label><br />

<select data-bind="source: titles, value: title"></select><br />

<label>First Name</label><br />

<input type="text" data-bind="value: firstName" /><br />

<label>Last Name</label><br />

<input type="text" data-bind="value: lastName" /><br />

<label>Company Name </label><br />

<input type="text" data-bind="value: companyName" /><br />

<label>Email Address</label><br />

<input type="text" data-bind="value: emailAddress" /><br />

<label> Phone Number</label><br />

<input type="text" data-bind="value: phone" /><br />

<label>Subject Name</label><br />

<select data-bind="source: subjects, value: subject"></select><br />

<label>Message Body</label><br />

<textarea data-bind="value: message" cols="100" rows="10"></textarea></p>

</fieldset><br/>

<p><label class="checkbox"><br />

<input type="checkbox" data-bind="checked: agreed"> I agree to your terms & conditions and privacy policy<br />

</label></p>

<div class="form-actions">

<p><button data-bind="enabled: agreed, click: register" class="btn btn-primary">Send message</button></p>

</div>

</form>

</div>

<div data-bind="visible: confirmed">

<p><span data-bind="text: message"></span></p>

</div>

</div>

<div class="modal-footer">

<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

</div>

$(document).ready(function() {

//jQuery(document).ready(function($) {

var viewModel = kendo.observable({

title:"Mr",

titles:["Mr","Mrs","Ms","Dr","Sir","Prof"],

firstName: "",

lastName: "",

companyName: "",

emailAddress:"",

phone:"",

subject:"Sales Request",

subjects:["Sales Request","Literature Request","Recruitment Question","Comment","Other Request"],

message:"",

agreed: false,

confirmed: false,

hideMain:true,

messageID:"",

register: function(e) {

var that = this;

$.post("http://myurl/tools/email_form.php",{

"title":viewModel.get("title"),

"firstName":viewModel.get("firstName"),

"lastName":viewModel.get("lastName"),

"companyName":viewModel.get("companyName"),

"emailAddress":viewModel.get("emailAddress"),

"phone":viewModel.get("phone"),

"subject":viewModel.get("subject"),

"message":viewModel.get("message")

},

function(data) {

that.set("messageID", data.message);

console.log(data.message);

},"json");

e.preventDefault();

this.set("confirmed", true);

this.set("hideMain",false);

},

startOver: function() {

this.set("confirmed", false);

this.set("agreed", false);

this.set("hideMain", true);

this.set("firstName", "");

this.set("lastName", "");

this.set("companyName", "");

this.set("emailAddress", "");

this.set("phone", "");

this.set("subject", "Sales Request");

this.set("message", "");

this.set("messageID", "");

this.set("title","Mr");

}

});

kendo.bind($("form"), viewModel);

});

General Discussions

answered on 08 Mar 2013

1 answer

31 views

Return to line in category axis

Hi,

I made a LineChart with (in the javascript):
categoryAxis: {categories: ['Mars(2012)', 'Avril(2012)', 'Mai(2012)', 'Juin(2012)', 'Aout(2012)', 'Sept(2012)',]},

I would like to decrease the width of the Graph, and so display for each category:

month
(year)

Thanks

Charts

answered on 08 Mar 2013

1 answer

2.2K+ views

Get element ID from change event handler?

I have a page that will have a dynamically created number of Kendo NumericTextBox items (in a grid). Each of those has a unique ID, and I need to discover in the change event handler which box is being changed. It is impossible to pass a custom parameter to the event handler (otherwise, I would simply pass the relevant part of the ID as a parameter). The demos and documentation are completely unhelpful, as while they outline the change event handler, there is no code to show how to

Things I have tried:
this.id
this.name
this.attr("id")
$(this).id
$(this).name
$(this).attr("id")
e.target

The specific question is this: how can I discover the ID of the NumericTextBox that fired the change event?
The general question is this: where can I find documentation on the properties and methods of the event argument parameter?

Thanks.

NumericTextBox

answered on 08 Mar 2013

3 answers

342 views

Grid MultiSelection with pageable set to true

Hello Telerik,

We are using Kendo Grid Control to display a large amount of data, and the pageable is set to true. We add a template column of a checkbox within each row to make a multiselection scenario. But the checkbox status will not stay there after switching page.

So i was wondering how could archieve this, or is there another work around?

Grid

answered on 08 Mar 2013

3 answers

84 views

Missing Globbing Parameter

If an optional parameter is missing, it is undefined. However, if a globbing parameter is missing, then it is an empty string.

Wouldn't it be consistent, if a missing globbing parameter would also be undefined?

Michael G. Schneider

SPA

answered on 08 Mar 2013

3 answers

261 views

Kendo Grid bind with WCF Data

Hi,

I am doing a POC for one of the project where I am required to show data in KendoUI Grid coming from WCF service.

I've tried to create a sample but seems like no luck.

I looked around but couldn't figure out exact working sample. I've created a sample application. In Default.aspx page I am trying to get data from a WCF service i.e. HTML5Service.svc residing withing the same project.

A simple call to service is done as shown below

../HTML5Service.svc/list

When I make a call using simple HTMl5.html page it gets called. But when I am trying to make a call through kendoGrid's datasource it's not getting called.

<!DOCTYPE html>

<html>

<head>

<title> Hello Kendo UI</title>

<link href="Content/kendo/2012.3.1114/kendo.common.min.css" rel="stylesheet" />

<link href="Content/kendo/2012.3.1114/kendo.default.min.css" rel="stylesheet" />

</head>

<body>

<div id="employeesGrid"></div>

<script src="Scripts/jquery-1.8.3.min.js"></script>

<script src="Scripts/kendo/2012.3.1114/kendo.web.min.js"></script>

<script>