See the following HTML: 

here's the viewModel: 


The resulting date picker shows the date as Dec 2013 in Firefox. IE and Chrome (didn't test Safari). 

If you set the month to 12, it ignores the year value and jumps to Jan 2014. 

Regards,
Jacques

I have a views in my Index.htm + layout containing a tabStrip. In one of my views I have a form. When I put <textarea/> in the form my layout with tabStrip disappears  (no errors reported in debug console). If I only changed <textarea/> to< input type=”text”/>, layout appears again. I need textareas in my form – how to manage it ?

This works:
< div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">

        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <input id="twrNazwa" type="text" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
< !--
the common layout for all views -->
< div data-role="layout" data-id="main"
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>

 

This crushes:

  
< div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">
        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <textarea id="twrNazwa" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
< !--
the common layout for all views -->
< div data-role="layout" data-id="main">
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>

I have a views in my Index.htm + layout containing a tabStrip. In one of my views I have a form. When I put <textarea/> in the form my layout with tabStrip disappears  (no errors reported in debug console). If I only changed <textarea/> to< input type=”text”/>, layout appears again. I need textareas in my form – how to manage it ?

This works:
<div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">

        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <input id="twrNazwa" type="text" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
<!--
the common layout for all views -->
<div data-role="layout" data-id="main"
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>

 

This crushes:

  
<div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">
        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <textarea id="twrNazwa" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
<!--
the common layout for all views -->
<div data-role="layout" data-id="main">
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>

Has anyone tried to use the Kendo Slider to choose between date ranges?  

Currently I am using month long millisecond steps and the tool tip template to display the date ranges.  However, I am having trouble updating the tick values using the format option.  

Does anyone know how to format a number to date string using only a kendo format string? 

Or does anyone know how to using templates or JS in the slider format string?

I have an application where I want a window pinned, so it loads in the center of the viewport whenever it is opened.  But I also want the window to be draggable, so the user can slide it out of the way to look at the data underneath it.  This works great when the browser is scrolled all the way to the top, but there is differing behavior in different browsers when scrolled down:

In IE10, the window opens in the middle of the screens and stays pinned when I scroll, but if I try to drag the window, it immediately moves down the same number of pixels as the browser is scrolled (if I'm scrolled down 50 pixels, the window jumps down 50 pixels lower than my mouse pointer), almost as if the math to calculate the window position when dragging isn't being done right.

In Chrome, the window drags correctly, but when it opens up it's not centered on the screen (if scrolled down when opening).  It is positioned down, roughly the same number of pixels the browser is scrolled down.

Has anybody else run into this issue?  Is this a configuration issue on my end or is it a bug in the Kendo Window widget?

Kendo Version: Q3 2012  (Just downloaded today)
Browser Version: IE10 and Chrome 31 on Windows 7
jQuery Version: 1.8.2

I notice that when a value is long and unwrappable and the column is narrow the value is display with ellipsis ... to indicate there is more to see if the column is widened.

Is there a way to have the grid always use ellipsis and not wrap cell content?

INFO LOOKS LIKE
THIS BY DEFAULT

want

INFO LOOKS LIKE ...

Thanks,
Richard

I have a grid that has a memo field (+ 5 other fields).    I want to allow the inline editing of that field using the kendo editor - is this possible?  Do you have any samples?

Or, I would like to create a popup window with the text of the cell populated into it for editing?  Any samples of that approach?  

Hi, I'm very new to hybrid app development using Kendo Mobile. Here's what I'm trying to do...

1. pass username/password encrypted token to API server and get api_key
2. Store api_key on mobile device somewhere and use that key to authenticate every http request to the API server.

Now, where should I store the api_key?

I'm thinking of storing that api_key in LocalStorage (https://github.com/kendo-labs/kendo-plugins/blob/master/Framework/kendo.data.localstoragedatasource.js). But how does this work when converted as Android or IOS app?
Will it still use localStorage? or convert to some other datastore that I'm not sure of in native world?

Any recommendation? or best practices?
*ps: api_key should be persistent even when closing the native app, so that user don't need to login again everytime they open the app.

Hi,

So am having trouble with making the listview work.
after I create the listview with the following options turned on and populate some data there is a lag with scrolling down and when i reach the bottom i cannot check the last 4 items and sometimes the loading image is still there.

I tracked the issue down and though its from my code but turned out that you have the same problem going on as well and this shows only on IPad and not on the browser.

Notice that in your cuteness.io app the gap from the bottom as well as the gap from the top and this happens if you scroll to the bottom then scroll up then down then up and suddenly you get this.

Hi,

since ios7, all grid styles seem to be incorrect in mobile applications

kendoui.complete.2013.2.918.commercial
same with version 926

    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.black.min.css" rel="stylesheet" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>

kind regards