Questions on Kendo UI for jQuery Forum

3 answers

148 views

How to Build a Dataviz theme with themebuilder? JSON?

After I build a theme for DataViz in the themebuilder what do I do with the JSON that I am able to generate? When I click on the button in theme builder that says "What do I do with this?" it just tells me about how to replace the css for the web themes...

So if I want to globally change my dataviz themes how do I do this using the theme builder?

Thanks,
Jason

General Discussions

answered on 03 Mar 2014

1 answer

180 views

Can i group items in a listview without a datasource?

Hi,

I need your help with some special requirement.
I'm building a theme for a popular ecommerce engine using TPL files and vqmod. I have not access to modify the query, need to by clean.

And i need to fill the list view some like this:

<?php if ($customers) { ?>

<?php foreach ($customers as $customer) { ?>

<li>

<h3 class="time"><?php echo $customer['date_added']; ?></h3>

<h3><?php echo $customer['name']; ?></h3>

<a data-role="button" data-rel="external" style="float: right;" href="mailto:<?php echo $customer['email']; ?>" data-icon="compose">Email</a>

<p><small><?php echo $column_email; ?>: <?php echo $customer['email']; ?></small></p>

<p><span><b><?php echo $customer['status']; ?></b></span></p>

</li>

<?php } ?>

<?php } else { ?>

<li>

<h2><?php echo $text_no_results; ?></h2>

</li>

<?php } ?>

So, my problem is: Can i group items in a listview without a datasource?

My example is here, please advise...

http://jsbin.com/toxuyate/4/edit

ListView (Mobile)

answered on 03 Mar 2014

20 answers

283 views

bad android loading screen

I updated to the newest kendo release yesterday and I've noticed that the loading graphics (i.e. app.application.showLoading();) have changed on android, but not on iOS. I like the graphics on iOS, where the motion icon is centered over the app. Android displays a dark translucent sheet over the entire app. It looks bad. How can I get rid of it?

General Discussions

answered on 03 Mar 2014

3 answers

208 views

[Solved] iOS browser crash on ScrollView rotation

I am having an intermittent problem with iOS browser, both Safari and Chrome crashing when rotation occurs when using ScrollView. I have created a simple example of this at http://scrollview.azurewebsites.net/. This example has a links to pages with varying amounts of ScrollView pages. On my iPad Air (16gb Wi-Fi) I can usually get the browser to crash ("poof" go away) when using the link to the page with 12 pages and rotating the screen. On my iPhone (5s 32gb) I can get it to happen less often. I can't reproduce it on an Android Nexus 7.

I have recorded what I see on my iPad: http://youtu.be/9tDtEfMiMGI

In the example pages I am using above, the only custom JavaScript is what is necessary to get Kendo UI Mobile configured:
(function (global) {
var mobileSkin = "",
app = global.app = global.app || {};

document.addEventListener('deviceready', function () {
navigator.splashscreen.hide();
$(document.body).height(window.innerHeight);
}, false);

app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout"});

})(window);

I am probably doing something totally wrong. I would appreciate any guidance anyone can provide.
Thanks!

ScrollView (Mobile)

answered on 03 Mar 2014

2 answers

153 views

[Solved] Unable to track dropdown events in scheduler popup

I'm getting an error every time I'm trying to track a popup event type.

All I'm trying to do is to get the console to log the event type whenever a user changes the the dropdown options to start. This keeps throwing an error and I'm wondering if anyone can give me some clue as to what this problem is or maybe a better (or right?) way to write this?

Thanks.

<script>
$(document).ready(function() {
var viewModel = new kendo.observable({
selectedEventType:"Appointment",
appointmentTypes : ["Appointment","Other Event"],
onDataBound: function(e) {
e.sender.select(0);
this.set("selectedEventType", e.sender.dataItem());
},
changeEventType: function() {
console.log("event :: change (" + this.get("selectedEventType") + ")");
},
schedulerData: [{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
}]
});
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
editable: {
template: $("#editor").html()
},
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
dataSource: viewModel.schedulerData
});
});
</script>


<script id="editor" type="text/x-kendo-template">
<form class="form-horizontal">
<label>Type:</label>
<select data-role="dropdownlist" data-bind="value:selectedEventType,source:appointmentTypes,events:{change:changeEventType}"></select>

<label>Client*:</label>
<input type="text" name="title" />

<label>Add New Client:</label>
<a data-role="button" data-click="newClient" id="eventType"><span class="k-icon k-i-plus"></span>New</a>
</form>
</script>

<script>
function newClient(e) {
console.log("new client click");
};
</script>

<div id="scheduler"></div>

Scheduler

answered on 02 Mar 2014

3 answers

257 views

Handling server side validation errors

I'm trying to write an event handler for server model validation errors. Its firing and poping a message but I have a grid that im editing in batch mode. I'd like to have the red dog ears in the upper right of the cells stay after the method presents the window to the users, but I can't get the dog ears to stay. Heres what I'm trying:

<script type="text/javascript">

function showAlertWindow(message) {

var alertWindow = $('#alertWindow').data('kendoWindow');

alertWindow.content(message);

alertWindow.refresh();

alertWindow.center();

alertWindow.open();

}

function server_error_handler(event) {

if (event.errors) {

event.sender.one("dataBinding",function(e){

e.preventDefault();

});

//event.preventDefault();

//event.sender.cancelChanges();

var message = "Errors:\n";

$.each(event.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += "</br><strong>" + key + "</strong>: " + this + " \n";

});

}

});

message += " </br> </br> <strong>No updates were saved!</strong>";

showAlertWindow(message);

}

</script>

if i uncomment and try

//event.preventDefault();

the dog ears go away, and it looks to users as if the records were saved.....

if i uncomment and try

//event.sender.cancelChanges();

The updates are gone, the grid removes the new rows that the users tried to add which isn't what i want either, i want the grids state to be in effect unchanged, that is the content that they tried to add is still in the cells and the dog ears are still there.

How do i accomplish this?

Thanks,
Chris

Grid

answered on 28 Feb 2014

1 answer

169 views

Lost intellisense after updating MVC via nuget

I am using Visual Studio 2012, and Kendo 2013.3.1324. I created a new Kendo UI MVC 4 (Razor) project. Then I updated all nuget packages, including MVC/Razor/Webpages.

After doing this, I lost intellisense on HTML helpers in general. I then applied the Web Tools 2013.1 for VS 2012 as found http://blogs.msdn.com/b/webdev/archive/2013/11/18/announcing-release-of-asp-net-and-web-tools-2013-1-for-visual-studio-2012.aspx. This fixed the intellisense on HTML helpers with the exception of the Kendo helpers.

The Kendo code works, but I cannot get intellisense for anything related to Kendo. I verified that the namespace tag was in both web.config files, and I updated the referrenced Kendo dll to use the MVC 5 based dll.

Is there any other way to get the intellisense working again?

General Discussions

answered on 28 Feb 2014

2 answers

452 views

Immediately Show and Not Hide ToolTip

when a user changes the value in a text box, it is validated and if it fails validation, I want to border the text box with red and show a tooltip that does not go away until the user changes the value

Here's the change event code:

$(document).on("change", "input.Percentage", function () {

var grid = $("#grid-pct").data("kendoGrid");

var row = $(this).closest('tr');

var dataItem = grid.dataItem(row);

var rawVal = $(this).val();

if (rawVal >= 0 && rawVal <= 100) {

var data = {

Id: dataItem.id,

Percentage: rawVal,

Username: dataItem.Username,

UpdateDate: dataItem.UpdateDate

};

} else {

$(this).kendoTooltip({ autoHide: false, content: 'value can only be between 0 and 100' });

$(this).css('border-color', '#f00');

}

});

Thanks,
--Ed

ToolTip

answered on 28 Feb 2014

1 answer

214 views

Line break in notes

Is there a way to insert a line break in the notes?

Here is my series

series.Line(model => model.ThisYear, model => model.ThisYearNote)
.Name("This Year")
.Axis("demand").Color("orange")
.Notes(note => note
.Position(ChartNotePosition.Top)
.Label(label => label
.Position(ChartNoteLabelPosition.Outside).Padding(7)
.Background("rgba(255,255,255,.7)")
.Border(border => border.Color("orange").Width(2).DashType(ChartDashType.Solid))))
.Tooltip(tooltip => tooltip.Visible(true).Color("white"));

The note may have more than one element, and I would like to have a line break for each element, I can't seem to get it working.

Charts

answered on 28 Feb 2014

4 answers

163 views

PullParameters function along with Pull To Refresh

Hello,



I'm trying to have my ListView working with Pull To Refresh. Nevertheless, I can't have the listview refresehd.



basically, when a user trigger pull to refresh, it should replace the whole content of the list view.



Here is how I have handled my list view and the pull to refresh:





$.when( Event.getEventsNearby( position.coords.latitude, position.coords.longitude, radius, limit, offset, key ) ).done(

function( response )

{

var dataToBeCached = new Array();

//In order not to cache the same results twice

var previousContent;

if( response.containsResults )

{

var results = response.results;

//On chope le nombre de resultats. Si !=limit, il y a de grandes chances qu'il n'y ai plus de resultats par la suite.

// resultLength = data.length;

// //On progresse dans les resultats

// //Et on adapte offset et limit

// offset += resultLength;

// limit = offset + 20 ;

//Merge the previous content with the new one

// previousContent = JSON.parse( getItem("contentEvent") );

// if ( previousContent != null )

// {

// var dataToBeCached = dataToBeCached.concat(previousContent);

// };

//Remove previous markers

Map.clearMarkers();

// Add Markers on the map

Map.setMarkerPosition( position.coords.latitude, position.coords.longitude, "grey" );

for ( var i=0; i<results.length; i++ )

{

Map.setMarkerPosition( results[i].lat, results[i].lng, "green");

results[i]["index"] = i;

}

setItem("events", JSON.stringify( results ), 1);

var template = Handlebars.compile( $( '#eventListTemplate' ).html() );

$("#list-container").kendoMobileListView({

template : template,

dataSource: kendo.data.DataSource.create(results),

fixedHeaders: false,

pullToRefresh: true,

pullParameters: function(item) {

console.log("pull");

//Here, another AJAX call to get the new results

$.when( Event.getEventsNearby( position.coords.latitude, position.coords.longitude, radius, limit, offset, key ) ).done(

function( response )

{

console.log("when");

//I can see I'm getting my results properly here.

console.log(response.results);

//Doesn't work ...

return response.results;

});

}

});

//We remove those fucking classes added by default with Kendo UI

// $("#list-container").removeClass("km-widget km-listview km-list");

// $(".post-actions [data-role='button']").removeClass("km-widget km-button");

$( document ).trigger( "wallReady" );

//Retrieve the different user conversations:

updateListOfChats();

}

});

What should I put into the pullParameters function to make it work ? Thanks.

ListView (Mobile)

answered on 28 Feb 2014