hello I am new to dev extreme
i have used extreme dev form but I am not able to preLoader spinner in the button item I have tried this code but nothing works for me
<Form colCount={0} id="form" formData={employee} onSubmit={handleSubmit}>
<SimpleItem dataField="Email" editorType="dxTextBox">
<RequiredRule message="Email is required" />
<EmailRule message="Email is invalid" />
</SimpleItem>
<SimpleItem dataField="Email" editorType="dxTextBox">
<RequiredRule message="Email is required" />
<EmailRule message="Email is invalid" />
</SimpleItem>
<ButtonItem horizontalAlignment="left" render={Btns}
buttonOptions={buttonOptions}
/>
<Item>
<Button id="button" width={'100%'} height={64} onClick={handleLogin}>
<div className="spinner">
{loader && <BeatLoader color="#ffffff" />}
<span className="dx-button-text">Login</span>
</div>
</Button>
</Item>
</Form>
and if I am using the button of dev extreme it's working I want you to use preloader in the dev extreme button item
Related
I have a jquery mobile panel like so:
<a href="#panel2" class="ss-header-actions-language">
<span class="ss-header-labels" id="ss-general-label">Language</span>
</a>
<div data-role = "panel" id = "panel2" data-display="overlay" data-position="right" data-swipe-close="false" >
<asp:RadioButton ID="rdbEng1" AutoPostBack="true" runat="server" Text="English" GroupName="lang" />
<asp:RadioButton ID="rdbspan1" AutoPostBack="true" runat="server" Text="Español" GroupName="lang" />
<asp:Button runat="server" Text="Submit" OnClick="Submit_Click" />
</div>
I want the panel to close when the submit button is clicked. Right now, panel closes when I select any radio button inside the panel. I want the panel to stay open if the Radio button is clicked, but as soon as I click on submit button, I want the panel to close.
How can I achieve that. Any help will be highly appreciated.
First you need to prevent postback to server, in order to do that set AutoPostBack="false" to RadioButton and you can change asp:Button to input.
Then according to JQuery Mobile Panel:
A panel can also be closed by calling the panel's close method
directly.
So this should work:
<a href="#panel2" class="ss-header-actions-language">
<span class="ss-header-labels" id="ss-general-label">Language</span>
</a>
<div data-role="panel" id="panel2" data-display="overlay" data-position="right" data-swipe-close="false">
<asp:RadioButton ID="rdbEng1" AutoPostBack="false" runat="server" Text="English" GroupName="lang" />
<asp:RadioButton ID="rdbspan1" AutoPostBack="false" runat="server" Text="Español" GroupName="lang" />
<input type="button" onclick="ClosePanel();" name="Submit" value="Submit" />
</div>
<script type="text/javascript">
function ClosePanel() {
$("#panel2").panel("close");
}
</script>
I have designed my CQ5 dialog as given in the following image. I have to disable my checkboxes options as highlighted in the image.
And dialog.xml is like
<stewartOwned jcr:primaryType="cq:Widget"
defaultValue="false" fieldLabel="Stewart Owned"
inputValue="false" name="./stewartOwned" type="checkbox"
xtype="selection" layout="hbox">
<options jcr:primaryType="cq:WidgetCollection">
<option1 jcr:primaryType="nt:unstructured" text=""
value="stewartOwned" />
<option2 jcr:primaryType="nt:unstructured" text=""
value="ShowInAdvanced" />
</options>
<optionsConfig jcr:primaryType="nt:unstructured"
width="150" />
</stewartOwned>
<independent jcr:primaryType="cq:Widget"
defaultValue="false" fieldLabel="Independent" inputValue="false"
name="./independent" type="checkbox" xtype="selection"
layout="hbox">
<options jcr:primaryType="cq:WidgetCollection">
<option1 jcr:primaryType="nt:unstructured" text=""
value="I" />
<option2 jcr:primaryType="nt:unstructured" text=""
value="ShowInAdvanced" />
</options>
<optionsConfig jcr:primaryType="nt:unstructured"
width="150" />
</independent>
I have tried following solution to disable through id but it is not viable as id is auto generate and you never know what id will be generated in the next session.
listeners jcr:primaryType="nt:unstructured"
loadcontent="function(dialog) {
CQ.Ext.getDom('ext-comp-1568').disabled = 'disabled';
CQ.Ext.getDom('ext-comp-1573').disabled = 'disabled';
}" />
Can someone please suggest how I disable highlighted checkboxes in dialog.xml ?
After a lot of research and reading CQ5 documentation, I managed to find out following solution.
var nameField =
dialog.getField('./name').getEl().child('input[value*=ShowInAdvanced]').id;
CQ.Ext.getDom(nameField).disabled = 'disabled';
I'm using jsf2.2 primefaces 6.0 and i already implemented a graphical solution to view, download and print pictures through galleria component of primefaces.
The issue is that I need help positioning the print commandButton on the right for best ergonomic result.
Here's the wanted result:
Here the XHTML code:
<p:dialog header="Documents numérisés" widgetVar="diag" modal="true"
dynamic="true" showEffect="fade" hideEffect="fade" resizable="true"
position="center" id="diagImages" onShow="download()">
<p:outputPanel id="gal" style="text-align:center;">
<p:galleria value="#{demandeBean.demandeSelectionnee.images}"
panelWidth="500" panelHeight="313" showCaption="false"
autoPlay="false" var="image">
<p:graphicImage id="image"
value="http://localhost:18080/openCars/images/#{image}"
width="500" height="313" />
</p:galleria>
</p:outputPanel>
<p:commandButton value="Print" type="button" icon="ui-icon-print"
style="display:block;margin-bottom: 20px">
<p:printer target="image" />
</p:commandButton>
</p:dialog>
Well, this may not be a perfect solution but it worked for me.
<p:panelGrid>
<p:commandButton value="Print" type="button" icon="ui-icon-print"
style="float:right;">
<p:printer target="image" />
</p:commandButton>
<p:panelGrid>
I have an ASP.NET 5 app. I'm creating this app as a learning exercise on a Mac. Currently, I'm trying to use the validation tag helper. In my view, I have the following code:
<form method="POST" action="~/account/login">
<h1>Login</h1>
<div class="validation" asp-validation-summary="All" />
#Html.ValidationSummary(false, "", new { })
<input id="Username" name="Username" />
<br />
<input id="Password" name="Password" />
<br />
<button type="submit">Login</button>
#Html.AntiForgeryToken()
</form>
The traditional #Html.ValidationSummary(...) approach works. However, the <div class="validation" asp-validation-summary="All" /> approach does not. I want to break away from using the tradition #Html. approach and use tag helpers as much as possible.
Why won't the validation results appear in the asp-validation-summary?
Thank you!
Since this commit
the ValidationSummaryTagHelper takes a value of the ValidationSummary enum instead of a string
So you need to write:
<div class="validation" asp-validation-summary="ValidationSummary.All" />
See also in the sample on Github.
In the next listbox I load elements with template:
<listbox model="#load(vm.resAccepted)" selectedItem="#bind(vm.selResAccepted)">
<template name="model">
<listitem>
<listcell label="#load(each.eventName)" />
<listcell label="#load(each.userName)" />
<listcell>
<button image="/img/button_mail.png"/>
</listcell>
</listitem>
</template>
</listbox>
My goal is to enable the button of the listitem ONLY for the row the user selects.
To do this, I try
<button disabled="#load(vm.selResAccepted.id=each.id?'false':'true')" />
checking if the unique field id is the same of the selected element, but it fails.
Any help will be appreciated.
You can use eq for equals comparison:
<button disabled="#load(vm.selResAccepted.id eq each.id?'false':'true')" />
or maybe even better: disabled when selected item is not the current item
<button disabled="#load(vm.selResAccepted ne each)" />
here ne is not equal