Questions on Kendo UI for jQuery Forum

2 answers

103 views

[Solved] Grid and sortable integration not working ok

You can see it in http://dojo.telerik.com/aTaM, which is one of the demos. You can reproduce the bug this way:
1.-Make that grid editable
2.-Edit column unit price, and modify the value
3.-Click on the same row, on column ProductName
4.-As you can see, the unit price column doesn´t keep the value you just entered.

If that grid wasn´t integrated with sortable, the behaviour would be as expected.
Thanks.

Grid

answered on 20 Oct 2014

7 answers

159 views

[Solved] kando-grid, angularjs, odata: requestEnd does not fire properly when filterable row

Hi,

when using dataSource odata with filterable: { mode: "row" } option, the requestEnd event does fire only the first time. If I set filterable: true the event is fired properly.

I'm using: AngularJS v1.2.21 and Kendo UI v2014.2.1008

Any ideas?

Thanks,
Enrico

Grid

answered on 20 Oct 2014

3 answers

590 views

FileBrowser thumbnail image (file type)

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

108 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

328 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

600 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

970 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

61 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

285 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