Questions on Kendo UI for jQuery Forum

5 answers

398 views

My form has a simple Datepicker on it, which paints and apparently operates correctly, but when I post the results with the submit button, although the rest of the fields go through correctly, the one with the datepicker doesn't.

For example, I have a part of my form like this:

<tr><td class=view><font color=red>Third Phone Type</td><td class=view><input type=hidden name="oldfield13" value="Not Given"><select  id="i13"  class=view name="field13">
<option value=""></option>
<option selected value="Not Given">Not Given</option>
<option value="Home">Home</option>
<option value="Office">Office</option>
<option value="Mobile">Mobile</option>
<option value="Direct Dial">Direct Dial</option>
<option value="Primary">Primary</option>
</select>
</td></tr>
<tr><td class=view>Contact EMail Address</td><td class=view><input type=hidden name="oldfield14" value="xxxx23285@gmail.com"><input type=text class=view name=field14 value="arun23285@gmail.com"></td></tr>
<tr><td class=view>Payslip EMail Address</td><td class=view><input type=hidden name="oldfield15" value=""><input type=text class=view name=field15 value=""></td></tr>
<tr><td class=view><font color=red>Gender</td><td class=view><input type=hidden name="oldfield16" value="Female"><select  id="i16"  class=view name="field16">
<option value=""></option>
<option value="Not Given">Not Given</option>
<option value="Male">Male</option>
<option selected value="Female">Female</option>
</select>
</td></tr>
<tr><td class=view>Date of Birth</td><td class=view><input type=hidden name="oldfield17" value="1 July 1986 00:00:00"><input  id="i17"  type=text class=view name=field17 value=""></td></tr>

....

and then some time later, at the end, I have

<script>
$(document).ready(function() {
$("#i17").kendoDatePicker({format:"dd MMM yyyy"})
});
</script>

I pick a date, when I close the datepicker window, the 
value has filled in on the text box, 
and then when I post, I have a debug routine that reads all 
the posted data, and displays it in a table.
I get this (amongst other stuff)

then some time later, at the end, I have 




    
        
            oldfield13
            Not Given
        
        
            field13
            Not Given
        
        
            oldfield14
            xxxx23285@gmail.com
        
        
            field14
            xxxx23285@gmail.com
        
        
            oldfield15
            
        
        
            field15
            
        
        
            oldfield16
            Female
        
        
            field16
            Female
        
        
            oldfield17
            1 Jan 1900 00:00:00
        
        
            oldfield18
            Indian
        
        
            field18
            Indian

Notice how there's no entry for the datepicker field, which is named field17 - not even an empty field posted. Also notice that I've definitely set the name attribute on the input field.

I'm using the latest version of Kendo UI (just redownloaded it today to check). The datepicker also behaves like this, even if I don't open up the date widget and type the date in (in dd/MMM/yyyy format). What do you think the problem is?

DatePicker

answered on 17 Dec 2012

2 answers

380 views

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

711 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

971 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

349 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

177 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

143 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

117 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

108 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

oldfield13	Not Given
field13	Not Given
oldfield14	xxxx23285@gmail.com
field14	xxxx23285@gmail.com
oldfield15
field15
oldfield16	Female
field16	Female
oldfield17	1 Jan 1900 00:00:00
oldfield18	Indian
field18	Indian