Working with KendoUI Mobile & Phonegap for a month or so, all good so far.   Just hoping for some advice on dynamically building tabs/views (if possible).
Basically, I would like to have different tabs/views based on the logged in user.  There could be many different combinations of tabs/views. 

Possible views/tabs: news, about, weather, video, articles, maps, (many more)

For example,
User 1 gets views/tabs: news, weather, maps
User 2 gets view/tabs: video, maps, about

Do you suggest I build the layout programmatically before the page is loaded?  Inject layout into the DOM?  Programmatically hide tabs not associated with current user?  Other ideas?

A simple example would be appreciated if what I'd like to do is feasible.

Thank you.  

I'm trying to help users choose their birthdates, so it would better for them to choose first the year then month and for last the day.
So when I open the datepicker, I would like to open a year range as first values so then when a choose a year it would appear month and then day.
Is it possible?

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.