Questions on Kendo UI for jQuery Forum

3 answers

386 views

Hi Guys,

I'm hoping for some collective genius as i've hit a stumbling block trying to implement a feature request on a Scheduling application I've written.

The desired effect i'm after is that on a moveEnd event, the user should be prompted with the option to either, Move or Copy the event, with an option to cancel the drag operation also.

So far i have the following (sections of code for illustration purpose only)

var eventHolder;

$("#scheduler").kendoScheduler({

moveEnd: function (e) {

e.preventDefault();

eventHolder = e;

var dialog = $("#schedulerWindow").data("kendoWindow");

dialog.center();

dialog.open();

}

});

So i'm preventing the default operation, populating a global placeholder variable with the event data so it's accessible from the following buttons.

$("#moveEventButton").kendoButton({

click:function(e){

var dialog = $("#schedulerWindow").data("kendoWindow");

eventHolder = null;

dialog.close();

}

});

$("#copyEventButton").kendoButton({

click:function(e){

var dialog = $("#schedulerWindow").data("kendoWindow");

eventHolder = null;

dialog.close();

}

});

$("#cancelDragButton").kendoButton({

click:function(e){

var dialog = $("#schedulerWindow").data("kendoWindow");

eventHolder = null;

dialog.close();

}

});

My scheduler data source is quite complex, but in essence contains, create:, update:, read: and destroy: elements, a parameterMap: function to parse the data before the ajax post and a parse: function to format the response.

But i'm at a bit of a loss on where to go next, ideally it would be as easy as calling a method to either create or edit the event but i get the feeling it's not going to be that simple.

Thanks in advance for any suggestions!

Scheduler

answered on 29 Jul 2014

3 answers

231 views

Enabled/Disabled right Button in NavBar

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

104 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

467 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

129 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

190 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

505 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

148 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

62 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

368 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