Questions on Kendo UI for jQuery Forum

3 answers

585 views

How can I set thumbnail image for FileBrowser. ImageBrowser has thumbnailUrl configuration.
I would like to show pdf icon if the file is pdf, word icon if the file is word, zip icon if the file is archive ...

Editor

answered on 20 Oct 2014

3 answers

103 views

When search is active (Image/FileBrowser), new folder is not visible

I was testing search and enter f. It works.
Then I wanted to create new directory, but it didn't work. I pressed button several times, nothing. The search was on.

I think new directory should appear always not just to match filter. At least until the name is confirmed. If this is expected behaviour (hope not, because it doesn't have any sense) how can I change it?
By clearing filter(search) or show directory always at least until the directory name is confirmed. Both ways would work for me.

Editor

answered on 20 Oct 2014

1 answer

9.1K+ views

Default Sort for Kendo Grid (MVC)

I want the following grid to start off sorted by Name. How do you do that using the HTML helper?

@(Html.Kendo().Grid(Model)

.Name("MyGrid")

.Columns(columns =>

{

columns.Bound(m => m.Name);

columns.Bound(m => m.Title);

columns.Bound(m => m.Email);

})

.Pageable()

.Sortable()

)

Thanks,

Ken

Grid

answered on 20 Oct 2014

1 answer

309 views

Can't get validation to work

Hello, I am having trouble getting validation to work on my site. I have DataAttributes set but the client-side validation never fires.

Model:

public class Address

{

public Guid? AddressId { get; set; }

[Required(ErrorMessage="City is required")]

[Display(Name = "City")]

[MaxLength(25)]

public string City { get; set; }

public bool IsDefault { get; set; }

[Required]

[Display(Name = "Address")]

[MaxLength(50)]

public string Line1 { get; set; }

[Display(Name = "")]

[MaxLength(50)]

public string Line2 { get; set; }

[Required]

[Display(Name = "Name")]

[MaxLength(25)]

public string Name { get; set; }

[Required]

[MaxLength(2)]

public StateDropdownViewModel State { get; set; }

[Display(Name = "Zip Code")]

[MaxLength(10)]

public string ZipCode { get; set; }

}

View:

@using(Ajax.BeginForm("PersistShippingAddress", "Order", new AjaxOptions() { HttpMethod = "post" }))

{

<tr>

<td>City:</td>

<td>

@Html.EditorFor(model => model.ShippingAddress.City)

@Html.ValidationMessageFor(model => model.ShippingAddress.City)

</td>

</tr>

}

_Layout.cshtml

<head>

<title>@ViewBag.Title - My Telerik MVC Application</title>

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2014.2.909/kendo.common.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2014.2.909/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2014.2.909/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2014.2.909/kendo.metro.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2014.2.909/kendo.dataviz.metro.min.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/kendo/2014.2.909/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2014.2.909/kendo.all.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2014.2.909/kendo.aspnetmvc.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

</head>

I notice there is no reference to the jquery.validate scripts, but when I add it to the header (like this):

<script src="@Url.Content("~/Scripts/jquery.validate.js")"></script>

I get errors when running the application:

Unhandled exception at line 1234, column 5 in
http://localhost:49715/Scripts/jquery.validate.js

0x800a138f - JavaScript runtime error: Unable to get property 'call' of undefined or null reference

Seems like validation should be pretty easy to get working, anyone have any suggestions?

Thanks!

Validation

answered on 19 Oct 2014

3 answers

592 views

[Solved] Look in different directory for popup editor templates.

Is there a way to change the directory for which a kendo grid looks for popup editor template in an mvc project? Right now my grids only see the ones in editor templates folder in under the shared directory. Which works but it doesn't do anything for keeping my project organized.

Grid

answered on 19 Oct 2014

3 answers

962 views

Combobox Paging

Does the combobox support paging of the data source? I have a combobox that is tied to a datasource that is using pageSize: 10 and serverPaging: true

It appears that the combobox doesn't care about this. Does the combobox have the functionality to show a paging control at the bottom of the item list or to use virtual scrolling?

Thanks!

ComboBox

answered on 18 Oct 2014

0 answers

60 views

App Very Small on Devices (Fixed)

Posting this here to help anyone else with the following problem:

When I run my Kendo mobile app in the simulator, the size looks good, but when I run it on the physical device (say Samsung Note II), the app is VERY small (zoomed way out)

It was this line in the index.html:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

I removed the bold face option above and now it works like a champ :)

Thanks,
-Mike Graham

General Discussions

asked on 18 Oct 2014

4 answers

274 views

Expander/Disclosure Widget

Has anyone made an expander/disclosure widget? I couldn't find any code out there so I threw one together.

(function ($) {

var defaultDuration = 200;

var expander = kendo.ui.Widget.extend({

init: function (element, options) {

kendo.ui.Widget.fn.init.call(this, element, options);

this._Render();

},

options: {

name: "Expander",

title: "",

isExpanded: true

},

IsExpanded: false,

Expand: function (duration) {

var $this = this;

if ($this.contents) {

if (duration == null) {

duration = defaultDuration;

}

$this.contents.show(duration, function () { $this.IsExpanded = true; });

}

if ($this.button) {

$this.button.find("span")

.removeClass("k-i-arrowhead-s")

.addClass("k-i-arrowhead-n");

}

},

Collapse: function (duration) {

var $this = this;

if ($this.contents) {

if (duration == null) {

duration = defaultDuration;

}

$this.contents.hide(duration, function () { $this.IsExpanded = false; });

}

if ($this.button) {

$this.button.find("span")

.removeClass("k-i-arrowhead-n")

.addClass("k-i-arrowhead-s");

}

},

Toggle: function () {

if (this.IsExpanded) {

this.Collapse();

}

else {

this.Expand();

}

},

_Render: function () {

this._MutateDom();

this._SetInitialExpandState();

},

_MutateDom: function () {

if (($(this.element).prop("tagName") || "").toString().toUpperCase() == "FIELDSET") {

this._MutateFromFieldSet();

}

else {

this.contents = $(this.element).attr("data-role", "expanderContents");

this.fieldSet = $("<fieldset>").attr("style", this.contents.attr("style"));

this.contents.removeAttr("style");

this.contents.wrap(this.fieldSet);

this.fieldSet = this.contents.parent();

this.legend = $("<legend>").text(this.options.title);

this.fieldSet.prepend(this.legend);

}

this._AddExpanderButton();

},

_MutateFromFieldSet: function () {

this.fieldSet = $(this.element);

var children = this.fieldSet.find(">:not(legend)");

this.contents = $("<div>").attr("data-role", "expanderContents");

this.fieldSet.append(this.contents);

this.contents.append(children);

this.legend = this.fieldSet.find(">legend");

if (this.legend.length == 0) {

this.legend = $("<legend>").text(this.options.title);

this.fieldSet.prepend(this.legend);

}

},

_AddExpanderButton: function () {

var expanderRadius = 12;

var icon = $("<span>")

.addClass("k-icon")

.css({

"position": "relative",

"top": "-5px",

"left": "-4px"

});

this.button = $("<button>")

.addClass("k-button")

.css({

width: (expanderRadius * 2) + "px",

height: (expanderRadius * 2) + "px",

"border-radius": expanderRadius + "px",

"margin-right": this.legend.text() ? "4px" : 0

})

.click($.proxy(this.Toggle, this));

this.button.append(icon);

this.legend.prepend(this.button);

},

_SetInitialExpandState: function () {

if (this.options.isExpanded) {

this.Expand(0);

}

else {

this.Collapse(0);

}

});

kendo.ui.plugin(expander);

})(jQuery);

General Discussions

answered on 17 Oct 2014

5 answers

190 views

2014.2.1008 Grid Issue

Hi there,

I have created a sample at: http://dojo.telerik.com/uveVo
Noticed that I have 3 data but the grid only shows 2.

I suspect that because the name is identical, somehow the grid ignores the second data with the same name.

I have found 2 ways to address this issue:

1) Revert back to 2014.2.903.
http://dojo.telerik.com/uveVo/2

2) Instead of declaring a dataSource, declare it within kendoGrid.dataSource.
http://dojo.telerik.com/uveVo/3

Is this an issue with the new version 2014.2.1008?
Because I would really love to declare my dataSource externally so that perhaps it can be shared later.

Regards,
Peteriman

Grid

answered on 17 Oct 2014

4 answers

329 views

Finding the current tab with jquery from contentUrl

I am creating tabs dynamically for a tabstrip, using a contentUrl. Within the HTML for the 'template' file, i have a ng-repeat that calls a method in my angular controller and I want to pass the tab (as a jquery element).

<li ng-repeat="game in tabSchedule(**need tab here**)">{{game.date}}</li>

I'm not a jquery expert and was wondering if there is an easy way to get the tab element. I added data properties to the tab when I created it and need access to them in the controller method.

I assume there is a simple selector that will work on my tabstrip (id=tabs), like so:

<li ng-repeat="game in tabSchedule($('#tabs li.k-item.k-*****')">{{game.date}}</li>

but I'm not sure how to ensure that the li is the one associated with the tab that is rendering.

TabStrip

answered on 17 Oct 2014