Questions on Kendo UI for jQuery Forum

1 answer

171 views

Several Problems/Questions with MVVM in Kendo

I've just been recently looking into KendUI as a solution for my company and in tests I have run into a few problems and have not found anything useful in your documentation.

The questions:

Can you create a model outside of the view model and reference it from the view model?
In other frameworks such as KnockoutJS you can create your view model and models independently of each other. I don't believe I saw a way to do this in your documentation

How do you set the option a select defaults to?
I noticed that there is an option in the drop down list widget for and option named "optionLabel" that creates a default option in your drop down list. I tried using what I assumed was your method of specifying it in the MVVM framework using "data-option-label" but that only added an option to the select list and didn't display it by default. Does this have to be done using the value binding in order to work correctly?

How do you specify calculated fields in select boxes?
I saw in your documentation that you used

<div data-bind="text: person.lowerCaseName"></div>

to call a function that returns a lowercase string but if I do that on a select I just get the string representation of the function I declared. If I added parenthesis to the end then the correct value was displayed in the select box but that broke the code if I used an optionLabel, which leads into my next question.

How do you use calculated values in situations where you also use the "optionLabel?"
I tried using both on a select but exceptions were thrown because it was trying to find the calculation function on the option label which is only a string object.

MVVM

answered on 29 Nov 2012

1 answer

96 views

kendoui mobile with ember js

Hi,
I wish to know how i can combine kendoui mobile version with ember js, this is pretty straight forward with kendoui web, where you can wrap up the widget in views using didinsert method. but kendoui mobile requires an instantiation of app and has its own architecture different from kendoui web. how then do i go about using emberjs to power the application flow while only using kendoui mobile for views rendering

General Discussions

answered on 29 Nov 2012

1 answer

121 views

Selecting a value from DropDownList does not change cell value

I have a grid bound to an XML data source. Some elements in the XML may be missing; in this case, the value of the corresponding field should be null. This is working fine when I use a string or number-type editor, but when using a DropDownList, if the element is missing from the XML, the grid cell remains blank after I select a value from the list. You can see this in this fiddle (try selecting a value in the bottom right cell).

Grid

answered on 29 Nov 2012

18 answers

1.2K+ views

DropDownList and modal Window

Hi,

I downloaded the new release today (upgrade from beta 2)...a new bug appears to have been introduced.

I've created a modal Window and one of the controls in that window happens to be a DropDownList. When I click to open the list, the Popup displays behind the window (see attached screen shot). This occurs in all major browsers (ie/ff/chrome/safari)

After a bit of inspecting, it looks like the z-index of the Popup (from the DropDownList) is less than the z-index of the Window, this explains it's positioning. I can see that the popup code tries to set it's index to be greater than any of it's parents in the DOM, but since the modal Window is not one of the direct parents of the Popup, then it doesn't work.

I've tried explicitly setting the z-index but that appears to get overridden by internal code in the Popup.

Any ideas/suggestions/fixes would be greatly appreciated.

John

DropDownList

answered on 29 Nov 2012

4 answers

228 views

kendo.history question

Hello!

I have been trying to deal with some SEO/link issues for my client and I wanted to see how hard it would be to implement the new html5 pushState/replaceState and the popstate event stuff with kendo. It's not going well though -- I'm able to change the address bar, but the back button is giving me grief.

I thought it would be good to check out what the kendo.history code does, so I downloaded the source but could not find the history code.

So, my questions are -- 1. where is the code for kendo.history? 2. Will you be supporting the new html5 pushState/replaceState and the popstate event stuff with kendo?

Thanks!

General Discussions

answered on 29 Nov 2012

2 answers

298 views

TabStrip and progress loader

I am trying to disable the contents of a TabStrip when it is loading. I am using kendo.ui.progress() to do so, but it covers the whole page, not just the content of the tab.

Here is a jsFiddle showing what I am doing.

What am I doing wrong?

Thanks.

TabStrip

answered on 29 Nov 2012

1 answer

311 views

data binding to model

Hi,

Is there a way to data bind selected value to model. I have try to use this, data, and self but it does not work. What does work is creating a nested object and binding it to a user selection.

Below is what I am trying to do but it does not work:

<div id="data-view" data-bind="source: this" data-template="data-view-template">

</div>

<script type="text/html" id="data-view-template">

<div>

<input id="search" data-role="autocomplete" data-bind="source: ds, value: this" data-text-field="Name" />

<div data-bind="text: Value"></div>

</div>

</script>

$(function () {

var values = [{ Name: "Foo + Bar", Value: 1 }, { Name: "Foo - Bar", Value: 2 }, { Name: "Foo * Bar", Value: 3 }];

var model = kendo.observable({

Name: "???",

Value: "???",

ds: values

});

kendo.bind($("#data-view"), model);

});

Below is what I can do but feels funny:

<script type="text/html" id="data-view-template">

<div>

<input id="search" data-role="autocomplete" data-bind="source: ds, value: Person" data-text-field="Name" />

<div data-bind="text: Person.Value"></div>

</div>

</script>

var model = kendo.observable({

Person: {

Name: "???",

Value: "???",

},

ds: values

});

Thanks,
Max

Templates

answered on 29 Nov 2012

1 answer

389 views

candlestick chart for non financial purpose

Hi,
I was trying to use the candle stick chart for non financial data. Basically, I was trying to use the chart in place of a box n whiskers chart.
So I tried using kendochart instead of kendoStockChart and set the chart type to "candlestick" and it worked! However, since I was using kendoChart, I was not able to zoom on the chart using mouse scroll.
I referred to the link http://www.kendoui.com/forums/dataviz/general-discussions/zoom-example.aspx for implementing my own zoom but I was not able to get the axis correctly.
I have two questions:
1. In case I use kendoChart for candlestick chart, how can I get the x Axis correctly?
2. Is there a way to use the kendoStockChart for non financial applications? Basically, my X axis wont be dates and could be patients.

Code snippet which I wrote is as under:
var title = $("#paramDropDown").data("kendoDropDownList").dataItem();
$("#boxplot").kendoChart({
theme: $(document).data("kendoSkin") || "default",
dataSource: {
data: obj
},
title: {
text: title
},
series: [{
type: "candlestick",
openField: "q1Val",
highField: "maxVal",
lowField: "minVal",
closeField: "q3Val"
}],

transitions: false,
drag: onDrag,
zoom: onDrag

});

General Discussions

answered on 29 Nov 2012

6 answers

228 views

sort field in jquery

i have filed the name material that in database ,table this field 3 value 1 or 2 or 3
i when data from webservice send to datasource grid . two filed for material send. 1.materailId ,2.materialName
now want materailName display and materalid for sort . ??
i want when onclick materailName sort field materialid ??

Grid

answered on 29 Nov 2012

2 answers

373 views

KendoUI T4 Template for VS2010

I have spent the last week or so using kendo with a MVC3 project. While learning Kendo I have also been playing around with T4 templating.

I have written a template that uses the default List template but I have modified it to use the KendoUI grid.

I thought I would share it with others as hopefully it will some someone else time. It could do with a few tweaks so I might add it to github soon.

<#@ template language="C#" HostSpecific="True" #>

<#@ output extension=".cshtml" #>

<#@ assembly name="System.ComponentModel.DataAnnotations" #>

<#@ assembly name="System.Core" #>

<#@ assembly name="System.Data.Entity" #>

<#@ assembly name="System.Data.Linq" #>

<#@ import namespace="System" #>

<#@ import namespace="System.Collections.Generic" #>

<#@ import namespace="System.ComponentModel.DataAnnotations" #>

<#@ import namespace="System.Data.Linq.Mapping" #>

<#@ import namespace="System.Data.Objects.DataClasses" #>

<#@ import namespace="System.Linq" #>

<#@ import namespace="System.Reflection" #>

<#@ import namespace="Microsoft.VisualStudio.Web.Mvc.Scaffolding.BuiltIn" #>

<#

MvcTextTemplateHost mvcHost = MvcTemplateHost;

#>

@model IEnumerable<#= "<" + mvcHost.ViewDataTypeName + ">" #>

<#

// The following chained if-statement outputs the file header code and markup for a partial view, a content page, or a regular view.

if(mvcHost.IsPartialView) {

#>

<#

} else if(mvcHost.IsContentPage) {

#>

@{

ViewBag.Title = "<#= mvcHost.ViewName#>";

<#

if (!String.IsNullOrEmpty(mvcHost.MasterPageFile)) {

#>

Layout = "<#= mvcHost.MasterPageFile#>";

<#

}

#>

}

<h2><#= mvcHost.ViewName#></h2>

<#

} else {

#>

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title><#= mvcHost.ViewName #></title>

</head>

<body>

<#

PushIndent(" ");

}

#>

<p>

@Html.ActionLink("Create New", "Create")

</p>

<table id="MYGRID">

<thead>

<tr>

<#

List<ModelProperty> properties = GetModelProperties(mvcHost.ViewDataType);

foreach (ModelProperty property in properties) {

if (!property.IsPrimaryKey && property.Scaffold) {

#>

<th data-field="<#= property.AssociationName #>">

<#= property.AssociationName #>

</th>

<#

}

#>

<th></th>

</tr>

</thead>

<tbody>

@foreach (var item in Model) {

<tr>

<#

foreach (ModelProperty property in properties) {

if (!property.IsPrimaryKey && property.Scaffold) {

#>

<td>

@Html.DisplayFor(modelItem => <#= property.ItemValueExpression #>)

</td>

<#

}

string pkName = GetPrimaryKeyName(mvcHost.ViewDataType);

if (pkName != null) {

#>

<td>

@Html.ActionLink("Edit", "Edit", new { id=item.<#= pkName #> }) |

@Html.ActionLink("Details", "Details", new { id=item.<#= pkName #> }) |

@Html.ActionLink("Delete", "Delete", new { id=item.<#= pkName #> })

</td>

<#

} else {

#>

<td>

@Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |

@Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |

@Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })

</td>

<#

}

#>

</tr>

}

</tbody>

</table>

<script>

$(document).ready(function () {

setTimeout(function () {

$("#MYGRID").kendoGrid({

dataSource: {

type: "json",

transport: {

read: "/GetJsonData"

},

schema: {

model: {

fields: {

item1:{type:"string"},

item2:{type:"string"},

item3:{type:"string"}

}

},

pageSize: 10

},

columns: [{

field:"Id",

filterable: false

},

"Column2",

"Column3"

]

});

</script>

<#

// The following code closes the asp:Content tag used in the case of a master page and the body and html tags in the case of a regular view page

#>

<#

if(mvcHost.IsContentPage) {

#>

<#

} else if(!mvcHost.IsPartialView && !mvcHost.IsContentPage) {

ClearIndent();

#>

</body>

</html>

<#

}

#>

<#+

// Describes the information about a property on the model

class ModelProperty {

public string Name { get; set; }

public string AssociationName { get; set; }

public string ValueExpression { get; set; }

public string ModelValueExpression { get; set; }

public string ItemValueExpression { get; set; }

public Type UnderlyingType { get; set; }

public bool IsPrimaryKey { get; set; }

public bool IsForeignKey { get; set; }

public bool IsReadOnly { get; set; }

public bool Scaffold { get; set; }

}

// Change this list to include any non-primitive types you think should be eligible for display/edit

static Type[] bindableNonPrimitiveTypes = new[] {

typeof(string),

typeof(decimal),

typeof(Guid),

typeof(DateTime),

typeof(DateTimeOffset),

typeof(TimeSpan),

};

// Call this to get the list of properties in the model. Change this to modify or add your

// own default formatting for display values.

List<ModelProperty> GetModelProperties(Type type) {

List<ModelProperty> results = GetEligibleProperties(type);

foreach (ModelProperty prop in results) {

if (prop.UnderlyingType == typeof(double) || prop.UnderlyingType == typeof(decimal)) {

prop.ModelValueExpression = "String.Format(\"{0:F}\", " + prop.ModelValueExpression + ")";

}

else if (prop.UnderlyingType == typeof(DateTime)) {

prop.ModelValueExpression = "String.Format(\"{0:g}\", " + prop.ModelValueExpression + ")";

}

return results;

}

// Call this to determine if property has scaffolding enabled

bool Scaffold(PropertyInfo property) {

foreach (object attribute in property.GetCustomAttributes(true)) {

var scaffoldColumn = attribute as ScaffoldColumnAttribute;

if (scaffoldColumn != null && !scaffoldColumn.Scaffold) {

return false;

}

return true;

}

// Call this to determine if the property represents a primary key. Change the

// code to change the definition of primary key.

bool IsPrimaryKey(PropertyInfo property) {

if (string.Equals(property.Name, "id", StringComparison.OrdinalIgnoreCase)) { // EF Code First convention

return true;

}

if (string.Equals(property.Name, property.DeclaringType.Name + "id", StringComparison.OrdinalIgnoreCase)) { // EF Code First convention

return true;

}

foreach (object attribute in property.GetCustomAttributes(true)) {

if (attribute is KeyAttribute) { // WCF RIA Services and EF Code First explicit

return true;

}

var edmScalar = attribute as EdmScalarPropertyAttribute;

if (edmScalar != null && edmScalar.EntityKeyProperty) { // EF traditional

return true;

}

var column = attribute as ColumnAttribute;

if (column != null && column.IsPrimaryKey) { // LINQ to SQL

return true;

}

return false;

}

// This will return the primary key property name, if and only if there is exactly

// one primary key. Returns null if there is no PK, or the PK is composite.

string GetPrimaryKeyName(Type type) {

IEnumerable<string> pkNames = GetPrimaryKeyNames(type);

return pkNames.Count() == 1 ? pkNames.First() : null;

}

// This will return all the primary key names. Will return an empty list if there are none.

IEnumerable<string> GetPrimaryKeyNames(Type type) {

return GetEligibleProperties(type).Where(mp => mp.IsPrimaryKey).Select(mp => mp.Name);

}

// Call this to determine if the property represents a foreign key.

bool IsForeignKey(PropertyInfo property) {

return MvcTemplateHost.RelatedProperties.ContainsKey(property.Name);

}

// A foreign key, e.g. CategoryID, will have a value expression of Category.CategoryID

string GetValueExpressionSuffix(PropertyInfo property) {

RelatedModel propertyModel;

MvcTemplateHost.RelatedProperties.TryGetValue(property.Name, out propertyModel);

return propertyModel != null ? propertyModel.PropertyName + "." + propertyModel.DisplayPropertyName : property.Name;

}

// A foreign key, e.g. CategoryID, will have an association name of Category

string GetAssociationName(PropertyInfo property) {

RelatedModel propertyModel;

MvcTemplateHost.RelatedProperties.TryGetValue(property.Name, out propertyModel);

return propertyModel != null ? propertyModel.PropertyName : property.Name;

}

// Helper

List<ModelProperty> GetEligibleProperties(Type type) {

List<ModelProperty> results = new List<ModelProperty>();

foreach (PropertyInfo prop in type.GetProperties(BindingFlags.Public | BindingFlags.Instance)) {

Type underlyingType = Nullable.GetUnderlyingType(prop.PropertyType) ?? prop.PropertyType;

if (prop.GetGetMethod() != null && prop.GetIndexParameters().Length == 0 && IsBindableType(underlyingType)) {

string valueExpression = GetValueExpressionSuffix(prop);

results.Add(new ModelProperty {

Name = prop.Name,

AssociationName = GetAssociationName(prop),

ValueExpression = valueExpression,

ModelValueExpression = "Model." + valueExpression,

ItemValueExpression = "item." + valueExpression,

UnderlyingType = underlyingType,

IsPrimaryKey = IsPrimaryKey(prop),

IsForeignKey = IsForeignKey(prop),

IsReadOnly = prop.GetSetMethod() == null,

Scaffold = Scaffold(prop)

});

}

return results;

}

// Helper

bool IsBindableType(Type type) {

return type.IsPrimitive || bindableNonPrimitiveTypes.Contains(type);

}

MvcTextTemplateHost MvcTemplateHost {

get {

return (MvcTextTemplateHost)Host;

}

#>

Templates

answered on 29 Nov 2012