Questions on Kendo UI for jQuery Forum

1 answer

184 views

At the moment, I get error 500 from

http://docs.kendoui.com/Errors/Error.aspx?aspxerrorpath=/documentation/getting-started/using-kendo-with/aspnet-mvc/introduction

and the Getting Started link on the home page of the Kendo UI docs site also gives the following error

http://docs.kendoui.com/Errors/Error.aspx?aspxerrorpath=/documentation/getting-started/changes-and-backward-compatibility

General Discussions

answered on 17 Jul 2012

2 answers

215 views

Grid sort removes canvas elements created by jQuery Sparklines plug in

I have created a grid and after it is created I'm trying to loop over elements and generate a sparkline using the jQuery Sparklines open source plug-in. This works just fine but as soon as I sort the grid the sparklines disappear. The sparklines are canvas elements and they vanish from the DOM as soon as the grid is sorted. Here is my code...

function getLimitedKPIListCallback(result) {
$("#grid").kendoGrid({
dataSource: {
data: result.d,
schema: {
model: {
fields: {
ClientID: { type: "string" },
ClientName: { type: "string" },
RegionDisplay: { type: "string" },
ClientIndexRating: { type: "number" },
ChrgKPI: { type: "number" },
PymtKPI: { type: "number" },
RevKPI: { type: "number" }
}
}
}
},
navigatable: true,
scrollable: true,
sortable: {
mode: "multiple"
},
groupable: true,
resizable: true,
filterable: true,
reorderable: true,
selectable: "row",
columns: [
{
field: "ClientID",
title: "Client ID",
width: 100
},
{
field: "ClientName",
title: "Client Name",
width: 300
},
{
field: "RegionDisplay",
title: "Region",
width: 90
},
{
field: "ClientIndexRating",
title: "Rating",
width: 100
},
{
field: "ChrgKPI",
title: "Charges vs. KPI",
width: 100,
format: "{0:n2}"
},
{
title: "Charge History<br/>Last 30 Days",
sortable: false,
filterable: false,
groupable: false,
template: "<div id='chargeSum-${DataSourceID}-${ClientID}'></div>"
},
{
field: "PymtKPI",
title: "Payment vs. KPI",
width: 100,
format: "{0:n2}"
},
{
field: "RevKPI",
title: "Revenue vs. KPI",
width: 100,
format: "{0:n2}"
}
]
});

var kpiList = result.d;
$.each(kpiList, function (ii) {
getChargeTotalsByCreationDate(kpiList[ii].DataSourceID, kpiList[ii].ClientID);
});

}

function getChargeTotalsByCreationDate(dataSourceID, clientID) {
$.ajax({
type: "POST",
contentType: "application/json",
url: "Services/ChargeActive.asmx/GetChargeTotalsByCreationDate",
dataType: "json",
data: "{ 'dataSourceID' : '" + dataSourceID + "', 'clientID' : '" + clientID + "', 'lastXDays' : " + 30 + " }",
success: function (msg) {
getChargeTotalsByCreationDateCallback(msg, dataSourceID, clientID);
},
error: errorHandler
});
}

function getChargeTotalsByCreationDateCallback(result, dataSourceID, clientID) {
var ca = result.d;
if (ca.length > 0) {
var sparkVals = [];
$.each(ca, function(ii){
sparkVals.push(ca[ii].BaseFee);
});
$("#chargeSum-" + dataSourceID + "-" + clientID).sparkline(sparkVals);
}
}

Grid

answered on 17 Jul 2012

3 answers

81 views

Where Did My Topic Go?

Hi,

I got an email from Kendo because there was a new reply posted to my topic - http://www.kendoui.com/forums/dataviz/beta/documentation-for-q2-beta.aspx, but I can't find it anymore. It was in the 'Beta' forum, but it seems to be moved completely. Can you put it back?

Best regards,
Jacob Ras.

General Discussions

answered on 17 Jul 2012

3 answers

125 views

Menu Direction parameter not working

Hello,

I am using the menu control in version v2011.3.1129. When using this I cannot seem to get the direction parameter of the menu to work at all. No matter what I set it to it does not seem to obey that parameter. I have attached a file demonstrating this behavior.

Menu

answered on 17 Jul 2012

0 answers

92 views

Grid use checkbox for 0/1 value

I am trying to give my grid a column to display status like on/off. This is stored in my DB as 0/1.
A simple check mark for 1 or empty box for zero is perfect.
I feel sure this is simple and my google-fu is failing me.

Any help is appreciated.

PS: I am loving kendo, I have been tring to find a decent UI framework for a long time and have found that kendo is great.

Grid

asked on 17 Jul 2012

1 answer

87 views

What is equilvent of this

how to write this in kendo UI web ?

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

Data Source

answered on 17 Jul 2012

0 answers

325 views

A better MVVM example

I revised the MVVM example index.html that ships with Kendo UI Web. The form element is host to the kendo controls instead of the browser's controls. This example also includes sample validation logic. Hope this helps someone:

<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.web.min.js"></script>
<script src="../../content/shared/js/console.js"></script>
<link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
<link href="../../../styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<a href="../index.html">Back</a>
<div id="example" class="k-content">
<div class="current-state">
<h4>Current view model state:</h4>
<pre>
{
firstName: <span data-bind="text: ds.firstName"></span>,
lastName: <span data-bind="text: ds.lastName"></span>,
gender: <span data-bind="text: ds.gender.value"></span>,
agreed: <span data-bind="text: ds.agreed"></span>
}
</pre>
</div>
<div class="registration">
<form>
<ul>
<li><label for="fname">First Name:</label><input id="fname" name="fname" data-bind="value: ds.firstName" /></li>

<li><label for="lname">Last Name:</label><input type="text" id="lname" name="lname" required="required" pattern="^[S|s][A-Za-z].*$" validationmessage="Last name must begin with 'S'." data-bind="value: ds.lastName" /><span class="k-invalid-msg" data-for="lname"></span></li>
<li>
<label for="gender">Gender:</label>
<input id="gender" name="gender" type="text" required="required" data-bind="source: genders, value: ds.gender" validationmessage="Gender is required."></select><span class="k-invalid-msg" data-for="gender"></span>
</li>
</ul>

<div style="padding-top: 11px; margin: 0 auto;">
<input type="checkbox" id="agree" data-bind="checked: ds.agreed" /> <label for="agree">I have read the license agreement.</label><br />
<div style="padding-top: 4px; float: left;" >
<button id="btnRegister" data-bind="click: register, enabled: enableBasedOnAgree" class="k-button">Register</button>
</div>
</div>
</form>
</div>
<div class="confirmation" data-bind="visible: ds.confirmed">
Thank you for your registration, <span data-bind="text: ds.firstName"></span> <span data-bind="text: ds.lastName"></span>
<br />
<button data-bind="click: startOver">Start Over</button>
</div>
<script>
$(document).ready(function () {
var genderCollection = [{ description: "Guy", value: "Male" }, { description: "Girl", value: "Female"}];
var genderElement = ('input[id*="gender"]');

$(genderElement).width(($("#fname").width() + 2));
$(genderElement).css("margin-left", "-2px");
$(genderElement).kendoComboBox({ dataValueField: "value", dataTextField: "description" });

var viewModel = kendo.observable({
genders: genderCollection,
enableBasedOnAgree: function (e) {
if (this.get("ds.agreed") == true) {
$("#btnRegister").attr('class', 'k-button');
return true;
} else {
$("#btnRegister").attr('class', 'k-button k-state-disabled');
return false;
}
},
register: function (e) {
e.preventDefault();
this.set("ds.confirmed", true);
},
startOver: function () {
this.set("ds.confirmed", false);
this.set("ds.agreed", false);
this.set("ds.gender", { description: "Girl", value: "Female" });
this.set("ds.firstName", "Cyndi");
this.set("ds.lastName", "Watson");
},
ds: new kendo.data.DataSource({
schema: {
model: {
fields: {
firstName: {
type: "String",
defaultValue: "John"
},
lastName: {
defaultValue: "Doe",
type: "String"
},
gender: {
type: "String",
defaultValue: "Male"
},
agreed: {
defaultValue: false,
type: "Boolean"
},
confirmed: {
type: "Boolean",
defaultValue: false
}
}
}
}
})
});

kendo.bind($("#example"), viewModel);
viewModel.startOver();

// working example of how to get a viewModel value
//
// alert(viewModel.get("ds.firstName"));
var formValidator = $("#example").kendoValidator().data("kendoValidator");

// working custom validation rule inside of kendoValidator //
/*
var formValidator = $("#example").kendoValidator({
rules: {
lastName: function (input) {
var isValidated = true;
var lNameValue = input.val();

if ($(input).attr('name') == 'lname') {
if ((lNameValue != undefined) && (lNameValue.length > 0)) {
if (lNameValue.toLowerCase().indexOf("s") != 0) {
isValidated = false;
}
}
}

return isValidated;
}
}
}).data("kendoValidator");
*/

// working code required for validating kendoComboBox object input //
//
$("span.k-dropdown-wrap").focusout(function () {
console.log('Going to validate now upon focusout event ...');
formValidator.validate();
});

});
</script>

<div class="source code-sample">
<h4 class="code-title">View (old) source code:</h4>
<pre class="prettyprint">
<form>
<label>First Name: <input data-bind="value: firstName" /></label>
<label>Last Name: <input data-bind="value: lastName" /></label>
<label>Gender:
<select data-bind="source: genders, value: gender"></select>
</label>
<label><input type="checkbox" data-bind="checked: agreed" /> I have read the licence agreement</label>
<button data-bind="enabled: agreed, click: register">Register</button>
<div data-bind="visible: confirmed">
<h4>Confirmation</h4>
<div>
Thank you for your registration, <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
<br /><br />
<button data-bind="click: startOver">Start Over</button>
</div>
</div>
</form>
</pre>
</div>
<div class="source code-sample">
<h4 class="code-title">View model source code:</h4>
<pre class="prettyprint">
var viewModel = kendo.observable({
firstName: "John",
lastName: "Doe",
genders: ["Male", "Female"],
gender: "Male",
agreed: false,
confirmed: false,
register: function(e) {
e.preventDefault();

this.set("confirmed", true);
},
startOver: function() {
this.set("confirmed", false);
this.set("agreed", false);
this.set("gender", "Male");
this.set("firstName", "John");
this.set("lastName", "Doe");
}
});

kendo.bind($("form"), viewModel);
</pre>
</div>

<style scoped>
.current-state {
float: right;
width: 200px;
margin: 60px 85px 0 0
}

.current-state pre {
font-size: 12px;
}

.registration h3 {
font-size: 2.5em;
color: #787878;
border-bottom: 1px solid #ccc;
}

.registration {
float: left;
clear: left;
width: 500px;
height: 131px;
margin: 30px 0 30px 30px;
padding: 60px 0 30px 30px;
background: url('../../content/web/mvvm/regForm.png') transparent no-repeat 0 0;
}

.registration ul {
list-style: none;
margin: 0;
padding: 0;
}

.registration li {
height: 28px;
vertical-align: middle;
color: #000;
}

.registration ul label {
display: inline-block;
width: 100px;
text-align: right;
padding-right: 5px;
color: #000;
}

.registration label {
color: #000;
}

.registration ul input {
border: 1px solid #ddd;
}

.registration button {
float: right;
margin-right: 85px;
}

.confirmation {
float: left;
clear: left;
width: 274px;
height: 65px;
margin: 30px 0 30px 30px;
padding: 20px 30px;
background: url('../../content/web/mvvm/confirm.png') transparent no-repeat 0 0;
text-align: center;
}

.code-details > ul {
list-style: none;
margin: 0;
padding: 0;
}

.code-details li
{
height: 26px;
line-height: 22px;
vertical-align: middle;
}

.code-details {
padding: 1em;
}

.source {
clear: both;
}
</style>
</div>
</body>
</html>

Dan

MVVM

asked on 16 Jul 2012

1 answer

117 views

Q2 Upgrade Issues

We recently upgraded to the latest version of Kendo, and the app that we are working on seems to have some rendering issues when changing tabs. To rule out my code being the issue I took the tab demo and it is having the same issue, see attached image. Demo app also freezes on me when I click through the tabs. Thoughts?

Image displays what is first seen, and after page refresh.

General Discussions

answered on 16 Jul 2012

1 answer

616 views

Refresh a chart with new DataSource?

I am needing to reset my datasource to grab parameters from my page to reload the chart. Is there a way to make this happen?

Here is my code for the chart currently. I need change the querystring that goes back on the url for the remote datasource based on page values.

$("#chart").kendoChart({

dataSource:

{

transport:{

read:{

url: "@Url.Action("BusinessUnitCompareChart")" + "?date=" + $("#DateFilter").val() + "&StructureId=" + "@ViewData["StructureId"].ToString()" + "&buids=" + "@ViewData["buids"].ToString()",

dataType:"json"

}

},

group:{ field:"Name"},

sort:{

field:"Name",

dir:"asc"

}

},

series:[{type:"column", field:"Count"}],

seriesColors:["#C81717","#8E908F","#0098DB"],

categoryAxis:{ field:"CategoryName"},

theme: "Metro",

title: {

text: "Open/ Aging/ Closed"

},

tooltip: {

visible: true

},

seriesClick: onSeriesClick

});

Charts

answered on 16 Jul 2012

0 answers

217 views

Loading Data into Dropdownlist...

Can someone please help me figure out how to load data into my dropdown and also trigger an event and pass the text value into the method so I can update my grid. I'm using KendoUI along with MVC3.

here is what I came up with but obviously I need some tweaking.

dropdownlist.
@(Html.Kendo().DropDownList()
          .Name("CodeManager")
          .DataTextField("ClassificationText")
          .DataValueField("ClassificationText")
.Events(e => e.Change("change"))
          .BindTo(ViewData["ClassificationItems"] as SelectList) //Not sure where the binding to my controller goes to or how it gets called
        )

Controller:
public ActionResult Change(string someValue = "")
        {
            ViewData["Category"] = "Types";
            ViewData["Classifications"] = new SelectList(Classifications.List, "ClassificationText", "ClassificationText", someValue );
            var codModels = new List<CodeModel>();
            ViewBag.SelectedCatgory = someValue ?? "Type";

            if (Request.HttpMethod == "POST")
            {
                var model = _codeRepository.Search(someValue ).ToModel();
                return View(model);
            }
            return View(codModels);
        }

Thanks
Dennis

DropDownList

asked on 16 Jul 2012