Questions on Kendo UI for jQuery Forum

2 answers

188 views

Upload successful, but treated as failure because response is not empty

We are using Kendoui on a project to rewrite an existing Adobe Flash UI in HTML 5. Initial results are very promising. However, the Upload component treats HTTP 200 OK as an error if the response is not empty, but the file has actually uploaded successfully. Since we have other client code that uses the same server to upload files, we are not able to change the server to send an empty response. Is there a way to configure a response handler to validate the response or simply treat HTTP 200 OK as success regardless of the response?

Upload

answered on 10 Mar 2013

5 answers

195 views

Custom tabstrip icon from font

Hi - I've been following your excellent guide for using a custom icon (http://docs.kendoui.com/getting-started/mobile/icons) but haven't been able to get this to work. I've downloaded a font from Fontello as suggested and have added the following style rules:

@@font-face {

font-family: "fontello";

src: url(@Url.Content("~/Content/font.ttf") format("truetype"),

url(@Url.Content("~/Content/font.woff") format("woff");

}

.km-androidicon:after

.km-androidicon:before {

content: '\26';

}

.km-appstoreicon:after

.km-appstoreicon:before {

content: '\41';

}

I have the following markup which should be displaying the custom icons:

<div data-role="layout" data-id="mobile-tabstrip">

<div data-role="footer">

<div data-role="tabstrip">

<a href="#tabstrip-iOS" data-icon="androidicon">iOS</a>

<a href="#tabstrip-Android" data-icon="appstoreicon">Android</a>

</div>

When I try to view my page, I see the tabstrip but not the custom icons, just two square buttons. Any suggestions as to what I'm missing would be appreciated.

Thanks!

TabStrip (Mobile)

answered on 08 Mar 2013

1 answer

537 views

How to call read.beforeSend() in Grid with Razor

Hi,
I have to send some additional parameters in the header of my request for authentication purposes for which I need to call the before send function. As there is no direct way to override this method in Razor so I have added a script after the @Html.Kendo().Grid() but the issue is that the first time the request is sent before the script is executed. Below is my code snippet

@(Html.Kendo().Grid<TEST.ViewModel>()
.Name("Grid")
.TableHtmlAttributes(new {Class="kendoGrid"})
.Columns(columns =>
{
columns.Bound(a => a.ContactPerson)
.Title("Name");
columns.Bound(a => a.CellPhoneNumber)
.Title("Mobile Number");
columns.Command(c =>
{
c.Edit();
c.Destroy();
});
})
.Sortable()
.Pageable()
.Filterable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(a => a.Id);
})
.Read(read => read.Url("../api/User").Type(HttpVerbs.Get))
.Destroy(destroy => destroy.Url("../api/User").Type(HttpVerbs.Delete))
)
)

<script>
$(function () {
var grid = $("#Grid").data("kendoGrid");

grid.dataSource.transport.options.read.beforeSend = function (req) {
req.setRequestHeader('Authorization', 'Basic abc:123');
};

grid.dataSource.transport.options.destroy.beforeSend = function (req) {
req.setRequestHeader('Authorization', 'Basic abc:123');
};

// WebAPI needs the ID of the entity to be part of the URL e.g. DELETE /orionws/Agent/80
grid.dataSource.transport.options.destroy.url = function (data) {
return "../api/User/" + data.Id;
};
});
</script>

Grid

answered on 08 Mar 2013

1 answer

78 views

Kendo Charts IE Compatability

Hi
We are using Kendo (v2012.3.1315) with the jQuery 1.8.2 and jQuery UI 1.10.1
We also tried Kendo 2012.3.1114 (Q3 2012) - jQuery 1.8.2 and custom combined script file from Kendo Custom Download but it did not work.
We have an error when running our site in IE 9 or IE 10.
"SCRIPT5007: Unable to get value of the property 'clone': object is null or undefined" with dots in the web page.
The charts work fine in FireFox.
Included the following script files :

    <script type='text/javascript' src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.10.1.js")" ></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/MicrosoftAjax.js")" ></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" ></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/MicrosoftMvcValidation.js")" ></script>
    <script type='text/javascript' src="@Url.Content("~/Scripts/kendo.all.min.js")"></script>
    <script type='text/javascript' src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

Let me know how to work around this issue with Kendo Charts in IE

Thanks
KendoUser

General Discussions

answered on 08 Mar 2013

1 answer

134 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

116 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

632 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.5K+ 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

511 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

33 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