Questions on Kendo UI for jQuery Forum

2 answers

401 views

[Solved] Initial values for cascading dropdowns

Hi,

I'm trying to set initial values for a group of dropdowns that are linked (cascade).

Example: http://jsfiddle.net/klystofer/pY3rc/5/

What is the best way to do this?

Regards,
Klystofer

DropDownList

answered on 17 Dec 2012

1 answer

759 views

Error when attempting to change datasource on treeview

I have quite the odd script going to try and get something working that is fairly hacked together. I have 2 DropDownLists, one is a standard DropDownListFor and the other is a KendoDropDownList that I have used some javascript I found on these forums to insert a KendoTreeView into it's contents. What I'm trying to achieve is to change the datasource of the treeview based on the selection of the first DropDownList. I have accomplished this but I am now getting an error when trying to update the datasource on the treeview. The error occurs in kendo.web.min.js and is in the following block:

_attachUids: function(b, d) {

var e = this, f, g = c.attr("uid");

b = b || e.root, d = d || e.dataSource, f = d.view(), b.children("li").each(function(b, c) {

c = a(c).attr(g, f[b].uid), e._attachUids(c.children("ul"), f[b].children)

})

With this error text:

Uncaught TypeError: Cannot read property 'uid' of undefined kendo.web.min.js:8376
1. (anonymous function)kendo.web.min.js:8376
2. jQuery.extend.eachjquery-1.7.1.js:661
3. jQuery.fn.jQuery.eachjquery-1.7.1.js:271
4. i.extend._attachUidskendo.web.min.js:8375
5. i.extend.initkendo.web.min.js:8372
6. (anonymous function)kendo.web.min.js:708
7. jQuery.extend.eachjquery-1.7.1.js:661
8. jQuery.fn.jQuery.eachjquery-1.7.1.js:271
9. a.fn.(anonymous function)kendo.web.min.js:707
10. (anonymous function)Create:249
11. jQuery.event.dispatchjquery-1.7.1.js:3261
12. elemData.handle.eventHandle

Here is the offending code that this is called from:

@Html.LabelFor(model => model.Incident.RequestType)

@Html.DropDownListFor(model => model.Incident.RequestType, new SelectList(Model.RequestTypes, null, "Name"))

@Html.ValidationMessageFor(model => model.Incident.RequestType)

<script>

$(function() {

$('#Incident_RequestType').change(function () {

var elems = document.getElementsByTagName('*'), i;

for (i in elems) {

if ((' ' + elems[i].className + ' ').indexOf(' k-input ')

> -1) {

elems[i].innerHTML = '';

}

// Get new datasource

var subjectDataSource = new kendo.data.HierarchicalDataSource({

transport: {

read: {

dataType: "json",

type: "POST",

url: "/Incident/GetSubjectsByRequestType/",

data: { //additional parameters sent to the remote service

requestType: function () {

return $("#Incident_RequestType").val();

}

},

schema: {

model: {

id: "RequestType",

hasChildren: "HasChildren",

children: "Children"

}

});

// Update datasource on treeview

subjectDataSource.read();

$("#treeview").kendoTreeView({

dataSource: subjectDataSource,

dataTextField: ["Title", "Title"],

loadOnDemand: false

}).data("kendoTreeView");

});

</script>

I cannot figure out what to do to get this working without throwing the error. The datasource does get updated and it all seems to work okay in Chrome but the error is getting thrown and IE complains about it when debugging. Any help would be appreciated.

Thanks,

Brian

TreeView

answered on 17 Dec 2012

6 answers

1.0K+ views

Custom command firing Change() event

I've been using Telerik products for a while now and have recently moved my team to using KendoUI. One big difference I noticed about grids is the change in event handlers. In this instance, I have a custom command button that should perform some kind of task like toggling an active/inactive state. It does fire the custom command's event handler as expected, but it also appears to fire the change() event.

Is this the intended behavior of the framework, or is there a way to execute a custom command without having the change() event fire as well?

Sample code:

<script type="text/javascript">

function OnToggleClick(e) {

e.preventDefault();

alert("Command has been clicked");

}

function OnRowSelect(e) {

e.preventDefault();

alert(this.dataItem(this.select()).ID);

}

</script>

@{Html.Kendo().Grid<MyModel>()

.Name("MyGridName")

.DataSource(db =>

db.Ajax()

.Model(o => o.Id(x => x.ID))

.PageSize(20)

.Create("InsertNewRecord", "Setup")

.Read("GetRecords", "Setup")

)

.Events(ev => ev.Change("OnRowSelect"))

.Columns(col =>

{

col.Bound(o => o.ID).Title("ID");

col.Bound(o => o.Field1).Title("Field1");

col.Bound(o => o.Field2).Title("Field2");

col.Bound(o => o.IsActive).Title("ToggleMe");

col.Command(com =>

{

com.Custom("ToggleActive").Text("Toggle").Click("OnToggleClick");

}).Width(80);

})

.ColumnMenu().Pageable().Filterable().Sortable().Selectable()

.Scrollable(scroll => scroll.Height(340))

.Render();

}

Thank you,
-J

Grid

answered on 17 Dec 2012

4 answers

1.1K+ views

DatePicker value -> invalid date time format!!!!

Hello,

I'm building external search filter for kendo Grid.
In the filter i have two datepickers, When i'm trying to parse the value of the date pickers and pass to the action in the controller via external atribute grid->datasource->read-data()! i get the date time string in format "Sat Dec 08 2012 00:00:00 GMT+0100 (Central European Standard Time)" and then i cant parse that datatime string to actual datetime object! Can someone help with this!

Regards,
Philip Selvievski

DatePicker

answered on 17 Dec 2012

2 answers

367 views

Problem binding data-columns with detailInit event on declarative grid

Hi,

Considering this grid:
http://jsfiddle.net/raaaT/

It has these features:

Detail grid
selected simulated by checkbox
Hierarchical check (using html5 intermediate property)

This features was implemented using commom jquery code, kendo grid, etc...
The source is provided by a kendo.DataSource as well, but its just a simple array here to simplificate.

Now, I need to calculate the Item Price using the sum of selected Sub Items...
I start to move this code to MVVM approach:
http://jsfiddle.net/3hxLH/

Its all ok when I set detailInit event, kendo create a new column with the link to open detail grid:
http://jsfiddle.net/fparG/

But, when I start to set data-columns, I lost this functionality:
http://jsfiddle.net/gADtG/

If I set data-columns property on div, the event detailInit is ignored (or something). The same issue occurs if I use data-row-template option.

How to reproduce the first example using MVVM (including hierarchical check functionality)?

thanks, and sorry for my poor english...

MVVM

answered on 17 Dec 2012

1 answer

190 views

Swipe-to-Delete

Swipe Effect

http://andymatthews.net/code/swipebutton/

How do I incorporate this into my KendoUI project?

General Discussions

answered on 17 Dec 2012

1 answer

162 views

Application Loading Panel Doesn't work

the Demo page, when I've copied it to my own project and referenced the same files (Js and CSS) the page throws an error,

what's shown in the HTML view is not the same as what's running on the page.

The Error i get is. kendoMobileApplication is not defined I've tried several different ways to figure out what the issue is so I can start using the loading panels properly. but the solution iludes me.

but when I look at the code of the page itself I see that the kendoMobileApplication is referenced as a new kendo.mobile.application though when I try to reproduce what appears to be the proper way, it doesn't work. I get
Cannot call method 'showLoading' of undefined

when my app is calling "app.showLoading();"
and my app is defined as

app = new kendo.mobile.Application(document.body);

so things are a little confusing, I thought i should be able to take the code shown in the demos and just use them in my projects, change the references to script and css files and have them work. but I could be wrong.

Thanks for your help in advance,

Application

answered on 17 Dec 2012

1 answer

129 views

Generic I/O style switch

Hi, I'd really like to get the switch component work like the native one in international ios5 phone, where the labels are rendered in language independent I/O-style, see the attached graphic.

I tried the obvious, i.e. replacing the labels, ON => I and OFF => O, but the font used did not quite produce the desired look, especially the letter O seemed a little to small and not quite round.

Any advice how to improve the appearance in current KendoUI Mobile?

My development suggestion would be to include purely graphical verison as an alternative, what do you think is this possible, maybe in a future update?

Switch (Mobile)

answered on 17 Dec 2012

1 answer

115 views

View not updating

I have 2 views that are loaded via json calls to a remote server, in both cases the templates work fine.

<div data-role="view" data-title="Activities" data-layout="inner" id="actividades" data-init="activity">
<ul id="view_actividades" data-role="listview"></ul>
</div>
<div data-role="view" data-title="View Activities" data-layout="inner" id="article" data-init="article_load">
<div id="article_holder"></div>
</div>

<script type="text/x-kendo-tmpl" id="tmpl_view_activities">
<a href="\#article?id=${id}&cat=activities">
<div class="title">${title}</div>
</a>
</script>

<script type="text/x-kendo-tmpl" id="tmpl_view">
<div class="title">${title}</div>
<div class="date">${date}</div>
<div class="content">${content}</div>
</script>

I can select and item in the listview and the article view loads fine, once I go back to the list view and select a different item the view doesn't update the previous activity remains displayed...

My search-fu is failing me and I can't find any method to force the refresh. How can I force the refresh?

General Discussions

answered on 17 Dec 2012

3 answers

241 views

[Solved] Setting layout links from a view

To simplify a little, I have a basic layout with a titlebar and a footer defined as a navbar like this:

<section data-role="layout" data-id="default">

    <header data-role="header" id="rounded">
        <div data-role="navbar">
        <span data-role="view-title">Chapter 2</span>
        </div>
    </header>

    

    <footer data-role="footer">
        <div data-role="navbar">
            <a data-align="right" data-role="button" class="nav-button" href="<previous>"><i class="icon-arrow-left icon-large"></i></a>
            <a data-align="right" data-role="button" class="nav-button" href="<next>"><i class="icon-arrow-right icon-large"></i></a>
        </div>
    <footer>

</section>

The idea is that I have multiple view like pages in a book, and I want to have a Previous and Next buttons in the footer, different on each view. I need help on how to define these links in a view file programmatically, so I can keep the footer inside the layout. I understand I can put the footer on each view, but somehow I think it would be more elegant to just have one footer in layout and then just add the links with js from the view.

Any adivice will be appreciated, thanks!

Application

answered on 17 Dec 2012