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>
Related
I have implemented a SearchField. When I click on the "X" button, the value gets cleared. Cursor is blinking in the field, but the suggestions do not populate. If I click again in search field still do not populate.
I have to click somewhere else on the page and then again click in the search field again to ensure suggestions populate. How to handle the "X" ?
View.xml
<SearchField class="" suggestionItems="{path:'model>/names'}" id="names"
value="{model>/header/names}" suggest="onSuggest" enableSuggestions="true" width="90%">
<suggestionItems>
<SuggestionItem key="{model>UserId}" text="{order>LastName} , {order>FirstName}"/>
</suggestionItems>
</SearchField>
Controller.js
onSuggest: function (oEvent) {
var value = oEvent.getParameter("suggestValue");
this.oSF = this.getView().byId("name");
this.oSF.getBinding("suggestionItems")
this.oSF.suggest();
Have tried this attachEventOnce('dataReceived') solution?
BTW: using
this.oSF = oEvent.getSource()
instead of
this.oSF = this.getView().byId("name");
will keep you out of trouble with typos (names <=> name) ;-)
I recently started using the latest Desktop version of Google Material Design Lite, I figured it doesn't have a modal pop up and the team has not yet implemented it for the next release.
I have tried to include bootstrap model into it, but thats not working infect seems pretty messed, I believe with the classes/styles clashing with each others.
Any Idea what will work good as an replacement ??
Thanks for your help.
I was also looking for a similar plugin and then I found mdl-jquery-modal-dialog
https://github.com/oRRs/mdl-jquery-modal-dialog
I used this because the other one I found was having issue on IE11. This one works fine.
<button id="show-info" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Show Info
</button>
Here a JSFiddle: https://jsfiddle.net/w5cpw7yf/
I came up with a pure JavaScript Solution for this
You can use the default bootstrap data attributes for the buttons, and make sure that your buttons and modals have their own unique IDs.
You need to have Material Design Lite's JS included before using this JavaScript
Check out the code. Any reviews are welcomed. :)
// Selecting all Buttons with data-toggle="modal", i.e. the modal triggers on the page
var modalTriggers = document.querySelectorAll('[data-toggle="modal"]');
// Getting the target modal of every button and applying listeners
for (var i = modalTriggers.length - 1; i >= 0; i--) {
var t = modalTriggers[i].getAttribute('data-target');
var id = '#' + modalTriggers[i].getAttribute('id');
modalProcess(t, id);
}
/**
* It applies the listeners to modal and modal triggers
* #param {string} selector [The Dialog ID]
* #param {string} button [The Dialog triggering Button ID]
*/
function modalProcess(selector, button) {
var dialog = document.querySelector(selector);
var showDialogButton = document.querySelector(button);
if (dialog) {
if (!dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function() {
dialog.showModal();
});
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
});
}
}
<!-- Button to trigger Modal-->
<button class="mdl-button mdl-js-button" id="show-dialog" data-toggle="modal" data-target="#upload-pic">
Show Modal
</button>
<!-- Modal -->
<dialog id="upload-pic" class="mdl-dialog mdl-typography--text-center">
<span class="close">×</span>
<h4 class="mdl-dialog__title">Hello World</h4>
<div class="mdl-dialog__content">
<p>This is some content</p>
</div>
</dialog>
I use MDL with bootstrap and the modal is displayed correctly after adding the data-backdrop attribute this to the modal element:
<dialog data-backdrop="false">
Hope it helps!
I have a form, which I'm validating using JQuery Validation plugin. Validation works file until I add a Bootstrap 3 popover to the text field with name "taskName" (the one being validated) (please see below) . When I add the popover to this text field, error messages are repeatedly displayed every time the validation gets triggered. Please see the code excerpts and screenshots below.
I've been trying to figure out what is happening, with no success so far. Any help will be greatly appreciated. Thanks in advance!
HTLM Excerpt
The popover content
<div id="namePopoverContent" class="hide">
<ul>
<li><small>Valid characters: [a-zA-Z0-9\-_\s].</small></li>
<li><small>Required at least 3 characters.</small></li>
</ul>
</div>
The form
<form class="form-horizontal" role="form" method="post" action="" id="aForm">
<div class="form-group has-feedback">
<label for="taskName" class="col-md-1 control-label">Name</label>
<div class="col-md-7">
<input type="text" class="form-control taskNameValidation" id="taskName" name="taskName" placeholder="..." required autocomplete="off" data-toggle="popover">
<span class="form-control-feedback glyphicon" aria-hidden="true"></span>
</div>
</div>
...
</form>
JQuery Validate plugin setup
$(function() {
//Overwriting a few defaults
$.validator.setDefaults({
errorElement: 'span',
errorClass: 'text-danger',
ignore: ':hidden:not(.chosen-select)',
errorPlacement: function (error, element) {
if (element.is('select'))
error.insertAfter(element.siblings(".chosen-container"));
else
error.insertAfter(element);
}
});
//rules and messages objects
$("#aForm").validate({
highlight: function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
},
success: function(element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
}
});
$('.taskNameValidation').each(function() {
$(this).rules('add', {
required: true,
alphanumeric: true,
messages: {
required: "Provide a space-separated name."
}
});
});
});
Bootstrap 3 popover setup
$('[data-toggle="popover"]').popover({
trigger: "focus hover",
container: "body",
html: true,
title: "Name Tips",
content: function() { return $('#namePopoverContent').html();}
});
The screenshots
First Edit
It seems I did not make my question clear, so here it goes my first edit.
I'm not using the popover to display the error messages of the validation. The error messages are inserted after each of the fields that fail validation, which is precisely what I want. Hence, this question does not seem to be a duplicate of any other question previously asked.
Regarding the popover, I just want to add an informative popover that gets displayed whenever the user either clicks the text field "taskName" or hovers the mouse over it. Its role is completely independent of the validation.
The question is, then, why adding the (independent) popover is making the validation plugin misbehave, as shown in the screenshots.
I had the very same issue a few days ago and the only solution I found was to use 'label' as my errorElement:.
Change the line errorElement: 'span' to errorElement: 'label' or simply removing the entire line will temporarily fix the issue. ('label' is the default. )
I am not completely sure what the JQ validate + BS popover conflict is, but I will continue to debug.
After some debugging I think I found the issue.
Both jQuery validate and bootstrap 3 popovers are using the aria-describedby attribute. However, the popover code is overwriting the value written by jQuery validate into that attribute.
Example: You have a form input with an id = "name", jQuery validate adds an aria-describedby = "name-error" attribute to the input and creates an error message element with id = "name-error" when that input is invalid.
using errorElement:'label' or omitting this line works because on line 825 of jquery.validate.js, label is hard-coded as a default error element selector.
There are two ways to fix this issue:
Replace all aria-describedby attributes with another attribute name like data-describedby. There are 4 references in jquery.validate.js. Tested.
or
Add the following code after line 825 in jquery.validate.js. Tested.
if ( this.settings.errorElement != 'label' ) {
selector = selector + ", #" + name.replace( /\s+/g, ", #" ) + '-error';
}
I will also inform the jQuery validate developers.
The success option should only be used when you need to show the error label element on a "valid" element, not for toggling the classes.
You should use unhighlight to "undo" whatever was done by highlight.
highlight: function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
}
(The success option could also be used in conjunction with the errorPlacement option to show/hide tooltips or popovers, just not to do the styling, which is best left to highlight and unhighlight.)
Also, I recommend letting the Validate plugin create/show/hide the error label element, rather than putting it the markup yourself. Otherwise, the plugin will create its own and ignore the one you've created.
In case you were unaware, you cannot use the alphanumeric rule without including the additional-methods.js file.
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
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.