Questions on Kendo UI for jQuery Forum

18 answers

1.2K+ views

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

223 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

290 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

302 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

377 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

219 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

367 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

1 answer

3.9K+ views

Clear autocomplete value on select change event

I have the following jsFiddle and want to clear the autocomplete field when the user has selected an item. The following code does not do this:-



$("#input").data("kendoAutoComplete").value("");

Is this possible?

//create AutoComplete UI component

$("#input").kendoAutoComplete({

dataSource: data,

filter: "startswith",

placeholder: "Select country...",

select: function(e) {

var dataItem = this.dataItem(e.item.index());

$('#list').append("<li>" + dataItem + "</li>");

$("#input").data("kendoAutoComplete").value("");

}

});

AutoComplete

answered on 29 Nov 2012

1 answer

89 views

Bug with v2012.3.1114 splitter

Seems that if you use the mouse to click directly on the splitter without dragging the screen freezes with a modal overlay.

In the prior versions (last 2) there was no overlay used when sliding the splitter. In this new version when using the mouse to slide the splitter (which doens't appear in the demos), the screen goes gray and when the drag is complete it returns to normal. However a simple click will freeze the screen.

If someone has seen this issue or knows a work around, I'd really appreciate it.

If I use the keyboard to navigate and resize the splitter the modal overlay is not present. This only happens on a mouse click.

Splitter

answered on 29 Nov 2012

1 answer

122 views

Treeview dataImageUrlField Templating?

Is there a way to specify a template for the dataImageUrlField? For instance, the webservice that generates my DTO is not application specific, so it may generate an object with just "IMAGE_UID_SPECIFIER" in the dataImageUrlField. Once an app is deployed however, I may want to map this to http://tempuri.com/imagewebservice/IMAGE_UID_SPECIFIER. In this case I'd want my template to be something like

dataImageUrlField: http://mytemplateurl/imagewebservice/IMAGE_UID_SPECIFIER

{
  "name": "object1",
  "image": "IMAGE_UID_SPECIFIER"
}

$("#tree").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataImageUrlField: 'image',
dataTextField: "name",
});

Any suggestions?

Thanks,

Paul

TreeView

answered on 29 Nov 2012