Questions on Kendo UI for jQuery Forum

3 answers

228 views

Hi,
I wrote a simple appl with a navbar and a title.
Then I add the back button as a lot of examples show and it works perfect.
I create a kind of log-in view where basically a user logs in and I'd like to show at the top right corner in the Nav Bar a button called Log out.
Initially I add directly the button like this:

    <header data-role="header">
        <div data-role="navbar">
            <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a id="logout" class="nav-button " data-align="right" data-role="button" onclick="Test.common.logOut()">Logout</a>
        </div>

    </header>

It works of course, but what I should do is to hide it and show it only when the user is logged.
With some jQury stuff I can hide it but not show it again. I missing something.
Can someone please help me?

thanks a lot

NavBar

answered on 29 Jul 2014

2 answers

100 views

Reload Mobile Listview when app starts

I have a listview and save the user selections to localstorage. When the app closes and is reloaded I pull the selected items from localstorage.

How can I reselect the items when the listview is displayed? I tried to trigger the click event but I don't know what item actually triggers the click.

ListView (Mobile)

answered on 29 Jul 2014

2 answers

454 views

DataSource read called twice

Hello,

The datasource read method is called twice when the contents are displayed on UI. Please refer to the attached file for code details.

Thanks for your time and help.

Data Source

answered on 29 Jul 2014

3 answers

124 views

Column that is read-only in edit mode, but can change the value programatically

Hi, I have a grid checkbox column that i want to stay read-only in edit mode; but i want to programatically change the value (mode.set) - and have it reflect on the grid.
How can i achieve this?

Grid

answered on 29 Jul 2014

1 answer

186 views

Access data of frozen columns

I have some columns that are frozen by default, if I try something like $("#grid").data("kendoGrid") I only get the data of all the columns that are not frozen as it seems. How do I get access to the frozen columns?

Grid

answered on 29 Jul 2014

1 answer

500 views

ListView/Scroller setting height by % not px

Is it possible to set height for the scroller to be a percentage instead of hard coded pixels or ems? There are so many screen sizes that using a percentage for height makes it easy to adapt for different sizes without having to manually get the window height, and then do a conversion on the height I want and apply it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="styles/Custom/GeneralStyles.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>

        <title>KonnexMe</title>
    </head>
    <body>

<div data-role="view" data-layout="layout" id="viewHome">

<div class="flex">
<div>
<div data-role="scroller"
style="height: 320px; width: 98%; margin-left: .3em; box-shadow: 5px 5px 10px #888888; overflow-x:hidden !important;">
<ul id="notesHome"
data-role="listview"
data-type="group"
data-fixed-headers="true">
<li>
Notes
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</li>
</ul>
</div>
</div>
<div>
<div data-role="scroller"
style="height: 320px; width: 98%; box-shadow: 5px 5px 10px #888888;">
<div>
<ul id="tasksHome"
data-role="listview"
data-type="group"
data-fixed-headers="true">
<li>
Tasks
<ul>
<li>Tasks</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="flex">
<div id="activitesHome">
<div data-role="scroller"
style="height: 320px; width: 98%; margin-left: .3em; margin-top: .5em; box-shadow: 5px 5px 10px #888888; overflow-x:hidden !important;">
<div data-role="scheduler"></div>
</div>
</div>
<div>
<div data-role="scroller"
style="height: 320px; width: 98%; margin-top: .5em; box-shadow: 5px 5px 10px #888888;">
<ul id="alertsHome"
data-role="listview"
data-type="group"
data-fixed-headers="true">
<li>
Alerts
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</li>
</ul>
</div>
</div>
</div>

</div>





<div id="drawerHome"
data-role="drawer"
data-views="['viewHome']">
<ul data-role="listview" data-style="inset">
<li><a>Accounts</a></li>
<li><a>Calendar</a></li>
<li><a>Company</a></li>
<li><a>Correspondence</a></li>
<li><a>Documents</a></li>
<li><a>People</a></li>
<li><a>Reports</a></li>

<li><img src="" style="height: 10em; margin-left: 1.6em;"></li>

<li><a>Change UI Theme</a></li>
<li><a data-transition="none">About</a></li>
<li><a href="/views/Logout.html" data-transition="none" data-target="paneMain">Logout</a></li>
</ul>
</div>





<div data-role="layout" data-id="layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#drawerHome" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title">Sample</span>
</div>
</header>

<footer data-role="footer">
<div data-role="tabstrip">
<a data-icon="contacts">Profile</a>
<a data-icon="settings">Settings</a>
</div>
</footer>
</div>


<style>
.flex {
display: flex;
flex-direction: row;
}

.flex > div {
flex: 1 1;
}
</style>

<script>
var app = new kendo.mobile.Application(document.body);
</script>
    </body>
</html>

ListView (Mobile)

answered on 29 Jul 2014

1 answer

140 views

[Solved] Horizontal Scrolling Does not work when grouped

We are having an issue with our grid that when a column is dragged into the group section it is no longer horizontal scrollable.

If the grouping is deleted then we can horizontal scroll again.

Has anybody ran into this issue before?

Grid

answered on 29 Jul 2014

1 answer

59 views

Editor - Chrome back button bug

Hi, I noticed a bug in Chrome for editor. If you click browser back button on a page with editor then click browser forward button, the editor shows the HTML. I was able to reproduce at demo site as well.

http://demos.telerik.com/kendo-ui/editor/index

Editor

answered on 29 Jul 2014

3 answers

362 views

Masked text inside a combobox

Hi ,

I would like to have masked text inside combobox. For example value from my database will be A22345. This will appear as user starts typing. But I would like it to be displayed as A2-2345 in the combobox. How can I achieve this?

ComboBox

answered on 29 Jul 2014

4 answers

458 views

Deactivating dates in datepicker

I can see this has been asked before, but perhaps there is something new?

It would be more than nice to be able to deselect given dates from the datepicker. For example the possibility to deselect all Saturdays, Sundays and public holidays, so the user can only select office days. Of course one can (and should) check the date server-side, but it looks unprofessional that the user can select a date in the datepicker, which then gives an error server-side.

jQueryUI offers this functionality. One just needs to write a Javascript function which returns true/false for selectable/non-selectable, and then pass this to the datepicker
through beforeShowDate. So I could use jQueryUI and restyle to resemble Kendo, but . . .

Thank you in advance for any help you can give.
Patrick

DatePicker

answered on 29 Jul 2014