Questions on Kendo UI for jQuery Forum

3 answers

179 views

Chart Visibility / VS2012 MVC 4 Mobile Application Project Template

I created a MVC 4 Mobile Application using the VS2012 Project Template. My page has a Kendo Chart on it. After clicking an ActionLink the chart is not displaying. But, if I simply click "Refresh" the chart is right there. Maybe some of the project template javascript is hiding the chart? I was wondering if someone might have some insight on how keep the chart visible the first time the page loads? My code is below.

HomeController.cs:

using MobileActionLink.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace MobileActionLink.Controllers

{

public class HomeController : Controller

{

public ActionResult Index(int appID = 1)

{

ViewBag.Message = "App ID = " + appID;

var listHistory = LoginHistoryRepository.ListHistory();

//APPLY THE FREQUENCY RULE

foreach (var item in listHistory)

{

var date = item.LoginDateTime.Date;

var hours = item.LoginDateTime.Hour;

//hourly

var locDT_Hourly = date.ToShortDateString() + " " + hours + ":00:00.000";

//daily

var locDT_Daily = date.ToShortDateString() + " 00:00:00.000";

//round the login datetime to hour or day as specified by the Frequency DD selection

item.LoginDateTime = Convert.ToDateTime(locDT_Hourly);

}

//FILTER THE HISTORY LIST

IEnumerable<ChartHist> myRow = from row in listHistory

where row.LoginApplicationID == appID

select row;

//apply frequency filter

myRow = myRow.Where(f => f.ScriptFrequency == 1).ToList();

//need duration averages now, since datetime of login will not be unique

//also, split up pass/fail statuses

myRow = from row in myRow

group row by row.LoginDateTime into grp

select new ChartHist

{

LoginDateTime = grp.Key,

LoginDuration_Pass = grp.Average(d => d.LoginDuration_Pass),

LoginDuration_Fail = grp.Average(d => d.LoginDuration_Fail)

};

//apply date filters

myRow = myRow.Where(f => f.LoginDateTime >= DateTime.Today.AddDays(-7) && f.LoginDateTime <= DateTime.Today).ToList();

////get the app name and assign it to a view bag property

var appName = "";

var listApps = LoginApplicationRepository.ListApplications();

var appNames = from a in listApps

where a.LoginApplicationID == appID

select a.LoginAppName;

foreach (var item in appNames)

appName = item;

ViewBag.AppName = "APP NAME";

var chartApp = new ChartApp();

chartApp.LoginApplicationID = appID;

chartApp.LoginAppName = appName;

var chartViewModel = new ChartsMobileViewModel();

chartViewModel.ChartHistories = myRow.ToList();

chartViewModel.LoginApplications = listApps.ToList();

chartViewModel.ChartApp = chartApp;

return View(chartViewModel);

}

_Layout.cshtml:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>@ViewBag.Title</title>

<meta name="viewport" content="width=device-width" />

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

@Styles.Render("~/Content/mobileCss", "~/Content/css")

@Scripts.Render("~/bundles/modernizr")

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")

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

<link rel="stylesheet" href="~/Content/kendo.blueopal.min.css">

<link rel="stylesheet" href="~/Content/kendo.dataviz.min.css" type="text/css" />

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

<script src="~/Scripts/kendo.all.min.js"></script>

<script src="~/Scripts/kendo.aspnetmvc.min.js"></script>

</head>

<body>

<div data-role="page" data-theme="b">

<div data-role="header">

<h1>@ViewBag.Title</h1>

</div>

<div data-role="content">

@RenderBody()

</div>

@RenderSection("scripts", required: false)

</body>

</html>

Index.cshtml:

@model MobileActionLink.Models.ChartsMobileViewModel

@{

ViewBag.Title = "Kendo Charts";

string appName = Model.ChartApp.LoginAppName;

}

<h2>Mobile Action Link Test</h2>

<p>

My Chart Goes Here @ViewBag.Message

</p>

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

.Name("chart")

.Title(appName)

.SeriesDefaults(seriesDefaults => seriesDefaults.Column().Stack(false)

)

.Series(series =>

{

series.Column(model => model.LoginDuration_Pass).Name("Pass").Color("Lime");

series.Column(model => model.LoginDuration_Fail).Name("Fail").Color("Red");

})

.CategoryAxis(axis => axis

.Categories(model => model.LoginDateTime)

.Title("Time of Attempt")

.Labels(labels => labels

.Rotation(-65)

.Format("{0:d}")

)

.ValueAxis(axis => axis

.Numeric().Labels(labels => labels

.Format("{0:0.0}")

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0} Seconds")

)

.Legend(legend => legend

.Offset(-15,-140)

.Border(1, "#000", ChartDashType.Solid)

.Background("White")

)

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

<li data-role="list-divider">Navigation</li>

<li>@Html.ActionLink("My Link 1", "Index", new { appID = 1 })</li>

<li>@Html.ActionLink("Another One", "Index", new { appID = 2 })</li>

<li>@Html.ActionLink("Hello World", "Index", new { appID = 3 })</li>

</ul>

Charts

answered on 13 Feb 2013

2 answers

314 views

Kendo dropdown list cascade event can't be bound to a function

//*******************WORKS*************************

$("#dropdownlist").kendoDropDownList({

cascade: alert("works")

});

//*******************DOES NOT WORK**************

$("#dropdownlist").kendoDropDownList({

cascade: function(){

alert("Does not work");

},

});

The cascade event of the kendo dropdown works when there is a single line of code in it, but when I try to bind a function to the cascade event doesn't trigger, is there a problem in my syntax.

I also made a working demostration of the problem in JSFiddle
http://jsfiddle.net/2Spwh/2/

DropDownList

answered on 13 Feb 2013

1 answer

795 views

[Solved] ToDataSourceResult doesn't preserve the default order when 'sort' http variable is not set

Hi,
I'm using EF and I want to add a default order for items in a grid. To do that I've added a call to OrderBy and after that I convert the result to DataSourceResult:

var data = context.Subjects.OrderBy(x => x.ScreeningNumber).ToDataSourceResult(request);

The problem is that if there is no order set (this.HttpContext.Request.Form["sort"] is "") I expect it to use my default ordering, but for some reason ToDataSourceResult completely removes ordering. How can I keep my default order in such cases?

Thanks in advance.

Grid

answered on 13 Feb 2013

4 answers

358 views

[Solved] Choosing a font other than inherited before inserting text

I want to be able to chose a font from the dropdown then start typing in the editor and have it honor this selection. Currently I have to type the text first, then highlight it and then change it to the font I want.

Is there a way to set the font to a font type other than inherited before I type the text?

If so I would also like to be able to set this in Javascript.

Editor

answered on 12 Feb 2013

3 answers

138 views

Javascript Template Example In Overview doesn't work

Can someone point me to a functional jsFiddle or equivalent that has something like the example shown here: http://docs.kendoui.com/getting-started/framework/templates/overview under External Templates and Expressions

Note the improper <ul> in the example, which to me is indicative of this not being code that was pasted from a successful running example.

Anyway, posting code snippets is not enough - post a link to a working example please : )

Thank You

DJM

Templates

answered on 12 Feb 2013

1 answer

182 views

Kendo Grid footerTemplate disappears after filtering

I have this problem and the best way to describe is through these steps:
Kendo Grid is setup with fixed width columns and filters are enabled.
A column on the far left side of the grid is defined with a footerTemplate
The user scrolls the the right of the grid to see the column with the footerTemplate
The user filters on a column
The footerTemplate disappears however; the horizontal scrollbar appears to not change position.
"Wiggling" the horizontal scrollbar resolves the missing footerTemplate.

I have attached a zip containing the problem that I captured with the Windows Problem Steps Recorder.

Grid

answered on 12 Feb 2013

1 answer

137 views

ScrollView is not working in Firefox

Hi All,

Scroll view is working in chrome and it is not working in Firefox. (UI also changed in Firefox). Please help me on this.
This Problem is there in kendo mobile.

Grid

answered on 12 Feb 2013

1 answer

155 views

[Solved] Calendar on mobile

Hi,

The calendar does not function correctly on mobile devices:
- It skips 2 months instead of 1 when navigating.
- The month selector is not working, it shows years.

Is use the latest internal build.

Thanks,
Koen

Calendar

answered on 12 Feb 2013

1 answer

510 views

data("kendoAutoComplete") returns undefined

Hello,

I'm programmably initializing the auto complete plugin. Because I'm dynamically building the UI on the client, I'm using the client API, not the MVC server wrappers. I have this function that does the initialization:

function _initKendo(el) {
$(el).attr("disabled", false).kendoAutoComplete({
dataSource: _members,
dataTextField: "Name",
template: '<span data-id="${ data.UserKey }">${ data.Name }</span>',
minLength: 2
});
}

This approach works great. If in this routine, I were to do:

$(el).data("kendoAutoComplete");

This works great here too. _members has data as the selection of a member works. The problem I am having is later on, when I want to extract information about the selected element, data("kendoAutoComplete") returns undefined. So when the user submits a form, I block submission normally and send a JQuery AJAX request. I need to grab the user key from the selected item, To do this, I did:

var auto = $(f).find(".k-autocomplete").data("kendoAutoComplete"); //f is the form that posted back, it has an autocomplete
var item = auto.ul.find(".k-state-selected > span");

This fails because it can't find the plugin, otherwise I believe it would work. Why can't my code find the plugin using this approach? I confirmed $(f).find("k-autocomplete") finds the correct element (the input)...

AutoComplete

answered on 12 Feb 2013

1 answer

403 views

Tabstrip and Validation

I'm using the out-of-the box data annotations and letting MVC handle the client-side validations for me. I'm also using a tabstrip to segregate different sections of input. However, all of the input is in the same form.

What I've found is that if I go to a different tab other than the first one and trigger the form submit, the validation doesn't fire and the form gets submitted.

Is there any way to avoid this? How should I be going about it?

Thanks.

-Joe Benckert

TabStrip

answered on 12 Feb 2013