I'm using a daypilot scheduler for a booking hotel's rooms.
I want to use events multiselection but when I enable this feature the scheduler is considering it as an event moving and not a selection
I did as following
AllowMultiSelect="true"
OnEventSelect="MonthScheduler_EventSelect"
EDIT:
<div id="colright" style="margin-left:20px;">
<div class="row">
<DayPilot:DayPilotScheduler ID="MonthScheduler"
OnEventMenuClick="Scheduler_EventMenuClick"
runat="server"
RowHeaderWidthAutoFit="true"
DataStartField="Start"
DataEndField="End"
DataTextField="Name"
DataValueField="Id"
DataResourceField="ressource"
HeaderFontSize="9pt"
EventHeight="25"
EventFontSize="11px"
RowHeaderWidth="200"
Width="1050"
Height="500"
HeightSpec="Fixed"
ShowToolTip="false"
CellDuration="1440"
CellGroupBy="Week"
TreeEnabled="true"
TreeIndent="15"
ClientObjectName="dps1"
UseEventBoxes="Always"
EnableViewState="true"
ScrollLabelsVisible="false"
BubbleID="DayPilotBubble1"
ResourceBubbleID="DayPilotBubble1"
DataTagFields="Description"
TimeRangeSelectedHandling="PostBack"
OnTimeRangeMenuClick="DayPilotScheduler1_TimeRangeMenuClick"
OnEventResize="MonthScheduler_EventResize"
OnTimeRangeDoubleClick="MonthScheduler_TimeRangeDoubleClick"
OnTimeRangeSelected="MonthScheduler_TimeRangeSelected"
DragOutAllowed="false"
EventResizeHandling="PostBack"
EventMoveHandling="PostBack"
OnEventMove="MonthScheduler_EventMove"
xCellBubbleID="DayPilotBubble1"
OnBeforeEventRender="MonthScheduler_BeforeEventRender"
OnBeforeResHeaderRender="MonthScheduler_BeforeResHeaderRender"
OnBeforeTimeHeaderRender="MonthScheduler_EventMove_BeforeTimeHeaderRender"
EventMovingStartEndEnabled="true"
EventResizingStartEndEnabled="true"
OnScroll="MonthScheduler_Scroll"
Theme="scheduler_traditional"
BorderColor="#666666"
OnResourceCollapse="MonthScheduler_ResourceCollapse"
TimeRangeSelectingStartEndFormat=""
AllowMultiSelect="true"
OnEventSelect="MonthScheduler_EventSelect"
EventClickHandling="Select"
ContextMenuSelectionID="DayPilotMenuSelection"
TreePreventParentUsage="true"
HourNameBackColor="#F0F0F0">
</DayPilot:DayPilotScheduler>
</div>
<DayPilot:DayPilotBubble ID="DayPilotBubble1" runat="server" ClientObjectName="bubble"
Width="0" OnRenderEventBubble="MonthScheduler_RenderEventBubble" OnRenderContent="MonthScheduler_RenderContent"
Corners="Rounded" Position="Mouse" Animated="false" >
</DayPilot:DayPilotBubble>
<DayPilot:DayPilotMenu ID="DayPilotMenu1" CssClassPrefix="menu_default"
runat="server" ClientObjectName="DayPilotMenu1" MenuTitle="Action" ShowMenuTitle="true">
<DayPilot:MenuItem Action="PostBack" Command="Modifier" Text="Edit" />
<DayPilot:MenuItem Action="PostBack" Command="Delete" Text="Delete" />
</DayPilot:DayPilotMenu>
<DayPilot:DayPilotMenu ID="DayPilotMenuSelection" runat="server" ZIndex="10003" MenuTitle="Action" CssClassPrefix="menu_default" >
<DayPilot:MenuItem Action="PostBack" Command="New" Text="Add new" />
<DayPilot:MenuItem Action="PostBack" Command="Old" Text="Add old" />
</DayPilot:DayPilotMenu>
</div>
and this my event select (which is not fired on selection)
protected void MonthScheduler_EventSelect(object sender, DayPilotEventArgs e)
{
//do }
You need to map one of the user actions to the "Select" behavior.
There are two basic options:
Click
EventClickHandling="Select"
Double click
EventDoubleClickHandling="Select"
See also event selecting topic in the docs. This will of course prevent you from using this action for another behavior (like opening the edit dialog). If you want to open the edit dialog you can also add a special "edit" icon (using active areas).
The upcoming version (8.0) will also support "rectangle event selecting" that will let you select multiple events using Shift + drag, just like in desktop file manager applications. See a preview here:
http://javascript.daypilot.org/sandbox/scheduler/eventmultiselecting.html
Related
I have 2 buttons on my Pop-up Edit form. I want to play with visibility of them - so that only 1 button is shown at a time.
I have done it many times on usual forms (not pop-up) and it worked.
it was just as easy as :
ID_NameOfMyButton.Visible = false;
However when i address the button on my pop-up form it doesnt find it:
"CS0103: The name 'ID_NameOfMyButton' does not exist in the current context"
Tried also this:
grid.EditForm.getElementById("ID_NameOfMyButton").style.display = "none";
-also get error:
"CS1061: 'DevExpress.Web.ASPxGridView' does not contain a definition for 'EditForm' and no extension method 'EditForm' accepting a first argument of type 'DevExpress.Web.ASPxGridView' could be found (are you missing a using directive or an assembly reference?)"
i am lost.... please anybody can advise me anything?
here is my code reflecting the location of the button on my Pop-up edit form:
<Templates>
<EditForm >
//// my 2 buttons in the header of the Popup Form /////
<dx:ASPxButton ID="ID_NameOfMyButton" runat="server" Text="Publish" Width="100px"
OnClick="MyButton_OnClick" Visible="True"> </dx:ASPxButton>
<dx:ASPxButton ID="ID_NameOfMyButton2" runat="server" Text="Withdraw" Width="100px"
OnClick="MyButton2_OnClick" Visible="True"> </dx:ASPxButton>
//// 2 Tabs of the Popup Form: /////
<dx:ASPxPageControl runat="server" ID="pageControl_1" Width="100%">
<TabPages>
<dx:TabPage Text="Part 1" Visible="true">
<ContentCollection>
<dx:ContentControl runat="server">
//// here are my controls on Tab 1 of the Popup Form /////
</dx:ContentControl>
</ContentCollection>
</dx:TabPage>
<dx:TabPage Text="Part 2" Visible="true">
<ContentCollection>
<dx:ContentControl runat="server">
//// here are my controls on Tab 2 of the Popup Form ////
</dx:ContentControl>
</ContentCollection>
</dx:TabPage>
</TabPages>
</dx:ASPxPageControl>
</EditForm>
</Templates>
I want to display different DataSource (SQL) queries in one 'DataGrid' based on Menu selections. Am I barking up the wrong tree by looking at UserControl's? How would this be implemented?
Edit:
I've finally found Changing user control on list selection which seems to answer my question pretty well, or at least modifies my question a little. So one Menu is to list all "Parts" available. The other Menu has MenuItems that correspond to locations and ultimately the inventory of said Parts at each location. Currently I am using a Click handler for each MenuItem and create a new instance of a specific UserControl for Parts and each location.
private void menuParts_Click(object sender, RoutedEventArgs e)
{
dgRoot.Children.Clear();
UserControl control = new ucParts();
this.dgRoot.Children.Add(control);
this.Title = "Inventory Manager - Parts";
}
and
private void menuSG1_Click(object sender, RoutedEventArgs e)
{
dgRoot.Children.Clear();
UserControl control = new ucSG1();
this.dgRoot.Children.Add(control);
this.Title = "Inventory Manager - SG1";
}
My question now is, can I create a reusable UserControl template that the Click handler can feed the location name to? The data is displayed, formatted, used, etc the same way, it's ultimately just the underlying DataSource query that is different.
You seemingly CAN do this. Just create the generic usercontrol Grid in my case.
MainWindow.xaml
<DockPanel>
<Menu DockPanel.Dock="Top" Name="menuMain" Height="27" HorizontalAlignment="Stretch" VerticalAlignment="Top" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<MenuItem Header="Parts">
<MenuItem Name="menuParts" Header="Parts" Click="menuParts_Click"/>
<Separator />
<MenuItem Name="addPart" Header="Add Part" Click="addPart_Click" />
</MenuItem>
<MenuItem Header="Inventory">
<MenuItem Name="menuBrady" Header="Brady" Click="menuBrady_Click"/>
<MenuItem Name="menuCO" Header="Community" Click="menuCO_Click"/>
<MenuItem Name="menuPoly" Header="Poly" Click="menuPoly_Click"/>
<MenuItem Name="menuSG1" Header="SG1" Click="menuSG1_Click"/>
<MenuItem Name="menuWS" Header="West Shore" Click="menuWS_Click"/>
</MenuItem>
</Menu>
<Grid Name="dgRoot" />
</DockPanel>
Then as shown in my Click handlers above, use them!
In my Ionic 1.3.1 app I am using the ion-slides component to display sections of a questionnaire:
<ion-slides options="vm.options" slider="data.slider">
<ion-slide-page ng-repeat="s in ::vm.sections">
<div class="bar bar-header bar-positive">
<button class="button button-small button-icon icon ion-chevron-left"
ng-click="vm.previous()"
ng-show="::$index !== 0"></button>
<h1 class="title">{{::s.text}}</h1>
<button class="button button-small button-icon icon ion-chevron-right"
ng-click="vm.next()"
ng-show="::($index + 1) < vm.sections.length"></button>
</div>
<ion-content class="has-header">
<div ng-if="s.include" ng-show="s.show">
<!--My content-->
</div>
</ion-content>
</ion-slide-page>
</ion-slides>
In my controller I listen for the slideChangeStart:
$scope.$on("$ionicSlides.slideChangeStart", function (event, data) {
alert('slideChangeStart');
vm.activeIndex = slider.activeIndex;
vm.propertySurvey.CurrentSectionIndex = vm.activeIndex;
//include is used on an ng-if so elements are removed from the dom
//and the number of watchers is reduced
//also, the slider displays the contents of the
//previous slide unless they are explicitly hidden
vm.sections[slider.previousIndex].include = false;
vm.sections[slider.previousIndex].show = false;
initialiseQuestions(vm.activeIndex);
});
When I click on my previous and next buttons, which call slider.slidePrev() or slider.slideNext(), the slideChangeStart event fires - and I see the alert. But if I slide the page using a gesture - the header changes as I expect but the event does not fire. I've tried switching the swipe off in my options without success (not my preferred solution anyway):
vm.options = {
noSwiping: true,
effect: 'fade'
}
UPDATE
I tried using slideChangeEnd but that event isn't firing either.
So I moved all my code into a single gotoSlide(index) method that I call from my next, previous and pagerClick methods - so that I don't rely on the ion-slides event.
And I added Ionic on-swipe directives to my ion-slide-page component to see if they would work:
<ion-slide-page ng-repeat="s in ::vm.sections"
on-swipe-left="vm.next()"
on-swipe-right="vm.previous()">
That made the swipe work in the Ripple emulator (where it wasn't working at all before), but it still doesn't work on any of my android devices. Again, the swipe events don't seem to fire.
I am using the Crosswalk plugin
The problem goes away if I remove the effect option. So this works:
vm.options = {
noSwiping: false,
speed: 300
}
And, since these are the default values anyway, I ended up removing the options object altogether.
NB replacing 'fade' with 'slide' did not work
Reference:
http://ionicframework.com/docs/api/directive/ionSlides/
I had a similar problem, and the above answer did not work for me, so I thought I'd share what did:
Per the Swiper API (which underlies ion-slides), you can add event based call backs directly to the widget.
The following worked for me (assuming the scope.slider object...)
//the 'slideChangeStart' event has a slider argument in its callback
scope.slider.on('slideChangeStart', function(slider) {
//do stuff - maybe you want to store the activeIndex
scope.indexIReallyCareAbout = slider.activeIndex;
});
The Swiper API gives a list of events that can named in the 'on' callback function under the header Callbacks
I have a form, and I'm navigating only with TAB. Tab order should be input > select > button, but because of the ng-disable on the SUBMIT, on certain browsers the TAB out of the select will kick you somewhere else.
HTML
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<form name="myForm" ng-submit="submit()" novalidate>
First Name: <input type="text" ng-model="Data.FirstName" required><br>
Last Name: <select ng-model="Data.LastName" required>
<option value="Bigglesworth">Bigglesworth</option>
<option value="Burgermeister">Burgermeister</option>
</select><br>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid" />
</form>
</div>
</div>
JS
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
return {
FirstName: '',
LastName: ''
};
});
myApp.controller('FirstCtrl', function( $scope, Data ){
$scope.Data = Data;
$scope.submit = function() {
console.log('you just submitted, foolio');
}
});
JsFiddle here.
On Mac FF the final tab kicks you to the address bar before enabling the submit button. Mac Chrome works as you'd expect, focusing on the submit button after final tab. I know Windows is janky, but don't have exact specs to post.
Thoughts? How can I do this in a fool-proof fashion?
EDIT
I've selected #David B.'s answer as it's the best Angular solution. I ended up using a somewhat hidden element right after the the submit button so the focus would stay in the same general area. Lame and hacky, I know, but for a tight deadline it worked.
<h3><button class="fakebtn_hack">Confirmation</button></h3>
<style>.fakebtn_hack {background:none; border:none; color: #FF6319; cursor: default; font-size: 1em; padding: 0;}</style>
This happens because Firefox doesn't send a change event on key-driven changes of the select. Angular doesn't see the change until the tab is hit, so the submit button isn't enabled until after the tab has been processed by the browser (and focus sent to some other element, e.g., the address bar). The W3C standard suggests not sending the event until the control loses focus, although Chrome sends one for any change and Firefox does if the change was mouse-driven.
See the angularjs issue tracker for more: https://github.com/angular/angular.js/issues/4216
As suggested in the issue tracker, solve it by manually issuing the change event via the following select directive (http://jsfiddle.net/j5ZzE/):
myApp.directive("select", function () {
return {
restrict: "E",
require: "?ngModel",
scope: false,
link: function (scope, element, attrs, ngModel) {
if (!ngModel) {
return;
}
element.bind("keyup", function () {
element.trigger("change");
})
}
}
})
You'll need JQuery loaded before AngularJS to have the trigger function available on the element object.
Manually include an empty option (<option value=""></option>) in your select or the first option will be auto-selected when the control receives focus.
Unlike the default behavior, this empty option will not disappear after selecting a real option. I suppose you could remove the empty option by declaring all the options via ng-options or ng-repeat and then removing the empty one from the bound scope once a real option has been selected, but I've never tried it.
Here is the zul file for reference
<?page title="MVVM Tree POC"?>
<zk>
<borderlayout height="800px">
<west size="25%"></west>
<center>
<window apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.nagarro.viewmodel.TreeViewModel')"
title="Dynamic Tree" border="normal">
<tree checkmark="true" model="#bind(vm.treeModel)"
onSelect="#command('select')" >
<template name="model" var="node" status="s">
<treeitem checkable="#load(node.checkable)"
open="true">
<treerow style="text-align:center;">
<treecell
label="#bind(node.data.firstName)" style="text-align:left;">
</treecell>
</treerow>
</treeitem>
</template>
</tree>
</window>
</center>
</borderlayout>
</zk>
There is a "onSelect" event in the tree tag and there are checkboxes for some treeItems only. Now, I want to create certain components like a combobox for the corresponding tree row when its checkbox is selected. I am trying to do it with the onSelect event of the tree but the problem is I need to pass the reference of the selected checkbox which I am unable to pass as the onSelect event is kept outside the scope of the template through which treeItems are getting rendered.
Is there any other way out to do what I want
This is the page which I get through the above zul file.
I want to know which checkbox is selected ?
You can pass any parameter on every event like that (from ZK docs):
<button label="Delete" onClick="#command('delete', item=item)"/>
and use this parameter in your java code:
#Command
public void delete(#BindingParam("item") Item item ) {
//do some stuff based on what item you've picked
}
In your case I would move onSelect-Event from Tree-Component to Treeitem, like this:
<tree checkmark="true" model="#bind(vm.treeModel)">
<template name="model" var="node" status="s">
<treeitem checkable="#load(node.checkable)"
open="true" onSelect="#command('select', nameParameter=node.data.firstName">
<treerow style="text-align:center;">
<treecell
label="#bind(node.data.firstName)" style="text-align:left;">
</treecell>
</treerow>
</treeitem>
</template>
</tree>
and use parameter in your #Command-method:
#Command
public void select(#BindingParam("nameParameter") String nameParameter ) {
System.out.println(nameParameter + " selected");
}
See ZK MVVM > Advance > Parameter Docs for more information
This is an issue I often run into. My solution has always been to attach data to the component itself; keep a database entity's id or an object itself on the checkbox for retrieval during the event.
checkbox.setAttribute("myAttributeName", myAttributeValue);
This requires a cast to retrieve, which is unfortunate, but with some best practices you can do so confidently.