Questions on Kendo UI for jQuery Forum

6 answers

1.0K+ views

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

387 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

206 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

169 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

133 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

124 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

276 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

1 answer

135 views

google maps doesn't scroll correctly (ONLY ON ANDROID NEXUS BROWSER)

Hi,
you can see here:
www.iperbooking.net/mobilekendo/iperbooking
clicking on "mappa" in the menu, the view of google maps appears.
In ipod, iphone 4s, and chrome you can move, zoom in and zoom out inside map correctly.
In samung galaxy nexus you can't move, zoom in and zoom out inside map correctly.
Someone else has noticed this same issue?

Thank you

Application

answered on 17 Dec 2012

1 answer

137 views

Android Tablet Identification Issues

I'm using Icenium, but having some KendoUI issues. I'm trying to use kendo.support.mobileOS.tablet to show a different layout for tablets than phones. In Icenium, it is identifying both the android simulator and the android tablet simulator as tablets, but this seems to be an issue with the simulator (you can see the ticket here). My Galaxy Note 2 is identified as a phone (which could really go either way, but is arguably correct). My HP Touchpad with Android 4.0 installed on it correctly reports being a tablet. However, my Nexus 10 is not being identified as a tablet because kendo.support.devicePixelRatio = 2. With the really high resolution displays coming out, I think that the logic for if an Android device is a tablet or not needs to be revisited. Maybe look only at the resolution, or the resolution divided by the devicePixelRatio? Thanks for looking into this.

-Keith

General Discussions

answered on 17 Dec 2012