We are using dojo DateTextbox in our applications. Earlier it was displaying local format mm/dd/yyyy
Now end user needs same in dd-MMM-yyyy format. Below code will take care for single textbox.
<input id="startDate" name="startDate" size="10" value="${fromdate }"
dojoType="dijit.form.DateTextBox" required="true"
constraints="{min:'08/22/2008',datePattern : 'dd-MMM-yyyy'}" />
But we have many DateTextBoxs in our project. Adding constraints attribute in all the textfield would be tedious job.
Is there any we can define it globally so it would take care of all the textfields ?
thanks
The proper way to do that is to extend from the DateTextBox and define your constraints.
For example:
declare("CustomDateTextBox", [DateTextBox], {
postCreate: function() {
this.inherited(arguments);
this.set('constraints', {
min: '08/22/2008',
max: new Date(),
datePattern: 'dd-MMM-yyyy'
});
}
});
This ofcourse means that you need to use CustomDateTextBox in stead of DateTextBox. If you really want to use the dijit/form/DateTextBox you can define the name dijit/form/DateTextBox but I don't recommend it because if you would ever need the default DateTextBox too, you can't.
The this.inherited(arguments) is also very important since it will run a super-call, this means that the default postCreate will also be called (without it your widget won't work).
I also made a full example at JSFiddle, if you want to use dijit/form/DateTextBox you can use this example.
EDIT: I just noticed you're using Dojo 1.6. The code won't work but the idea is the same, just extend your widget and it will work.
EDIT 2: This code might work with Dojo 1.6.
A couple of alternatives are
extend the dijit class and add a set of default constraints.
create an object for the constraints
An example is:
var myConstraints = {
min: new Date( 1950, 2, 10),
max: new Date(),
datePattern : 'dd-MMM-yyyy'
};
Then when you declare a box have:
constraints: myConstraints
Related
I'm using dojo to validate input fields and if there is an error (for eg: required field) it appears in the dojo tooltip. But, I would like to show error in the custom div instead of tooltip.
So, I'm wondering if there is a way to hide/disable the validate error to appear in the tooltip? If so, I can capture the error message shown in the hidden tooltip and show the result in custom div, which will be consistent with error styling across the application.
Please advise. Thanks.
I would recommend to use the standard Dojo validation mechanism, contrary to what vivek_nk suggests. This mechanism works great in most cases, and covers most situations (required, regular expressions, numbers, dates etc.).
To solve your issue: you can overrule the "dispayMessage" function of a ValidationTextBox (for example).
displayMessage: function(/*String*/ message){
// summary:
// Overridable method to display validation errors/hints.
// By default uses a tooltip.
// tags:
// extension
if(message && this.focused){
Tooltip.show(message, this.domNode, this.tooltipPosition, !this.isLeftToRight());
}else{
Tooltip.hide(this.domNode);
}
}
Just create your own ValidationTextBox widget, extend dijit/form/ValidationTextBox, and implement your own "displayMessage" function.
Simple solution for this scenario is not to add the "required" condition at all to those fields. Instead add a separate event handler or function to check for this validation.
For eg: add a function for onBlur event. Check if the field is a mandatory. If so, show message in the custom div as expected.
<input data-dojo-type="dijit/form/TextBox"
id="sampleText" type="text" mandatory="true" onBlur="checkMandatory(this)"/>
function checkMandatory(field) {
if(field.mandatory=='true' && field.value=="") {
alert('value required'); // replace this code with my showing msg in div
} else {
field.domNode.blur();
}
}
This above code snippet does not use Dojo for validation, rather manual. Dojo actually helps to ease this by just adding the attribute "required". If that is not required, then just ignore Dojos help for this case and go native.
So, for all fields, just add the attributes - "mandatory" & "onBlur", and add the above given function for onBlur action for all these fields.
I've been looking into dgrid and I'm trying to figure out if there's a way to attach an event to a grid that uses dojo/on without explicitly calling grid.on but, instead, passes it as a method (or set of methods) in the initial configuration of the grid. The reason for this is because the grid instance itself out of scope upon creation and I can't find any documentation on it.
So, instead of
var grid = new (declare[Grid])({}, element);
grid.on('.dgrid-row:click', function(){console.log('Hello World!')});
having something like
var grid = new (declare[Grid])({
'events' : {
'.dgrid-row:click' : function(){console.log('Hello World!')}
}
}, element);
Ideas? Alternatives?
You can use the the DijitRegistry extension, which will allow you to get a reference to your grid like you would with a normal dijit widget, through registry.byId... then you can use grid.on, as usual.
Example : https://github.com/SitePen/dgrid/wiki/DijitRegistry
I tried to do a layout using dijit in dojo (1.7.2), but the result did not looks like the way I intended.
My first attempted is trying a declarative style from some example (here http://pastebin.com/Uy0pFmn3), which worked fine. Then I tried to convert it to programatic style (here http://pastebin.com/qRWUQsQN ), but it only showed the layout that created last.
Did I do misunderstanding how the dijit's layout works or just some minimal overlook here ?
thanks
You must add CSS styles:
html, body {
height: 100%;
width: 100%;
}
and for BorderContainer:
style="height:100%; width:100%"
EDIT: ok I got it. I guess I cannot use new ContentPane but instead, new dijit.layout.ContentPane (So here the finalize version http://pastebin.com/eYfeQUd8). The weird, "show only last layout" cause by my weird CSS stuff.
One thing that puzzled me is that why new ContentPane did not work ? As far as I recall, some example did like this
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane"], function(BorderContainer) {new BorderContainer //STUFF//}
I see the problem here..
In your pastebin code you are missing do declare the function paramter like the below example...
Your modified code:
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane"], function(BorderContainer, TabContainer, ContentPane ) {
var appLayout = new BorderContainer({"design": "headline"}, 'appLayout');
Also the order of the require paramters should match inside the function parameters also ..
Waseem Ahmed V
I want to add dijit.Editor after clicking on element.
dojo.ready( function() {
var handle = dojo.connect(dojo.byId("k"),"onclick",
function(){
dojo.byId("k").innerHTML +=
"<div data-dojo-type=\"dijit.Editor\" id=\"editor\" style=\"width:400px;min-height:100px;background-color:white;border-style:solid;border-width:1px\" > </div>";
dojo.disconnect(handle);
}
);
});
In general this code works but dijit.Editor is malformed, one cannot write in it and there are no default plugins. How can I fix this?
Is this for inline editing ? Because if so, you should follow the examples on this page.
Othewise, you should do something like this rather than creating html in javascript.
I believe inlineEditBox is better fit to your need.
Also more generally, you add declarative code, in an onClick, after dojo.ready.
Basically it means that the html is "probably" parsed, then you get dojo.ready, do your connect, when the onClick happens, you add declarative markup in your html code, but you are not calling the parser.
I would recommand using programmatic approach for these kind of cases and keep declarative for templated widgets, or html string you will "parse" calling the parser.
Hope this also helps a little ;)
<script>function(ready, Editor, AlwaysShowToolbar, dom, query){
this.createEditor = function(){
new Editor({
height: '40px',},dom.byId('programmatic2'));autosave:false,
query('#create2').orphan();
}
});
</script>
try this.. u might get a solution..
As far as I can judge, the CSS-Rule "dijitRequired" is used to mark a required input field. Yet, this style is not set when I apply the "required"-Attribute to a dijit, for example, a date dijit:
The Dijit is built as follows:
<input dojoType="dijit.form.DateTextBox" class="l" id="datumsTestID" name="datumsTest" tabindex="5" value="2009-01-01" />
The Attribute is set with the following Javscript code
dijit.byId('datumsTestID').attr('required', true)
Am I doing something wrong or is the style "dijitRequired" not intended to be used as I assume?
For my purposes, I patched ValidationTextBox.js to set/unset the class, but is there a cleaner (meaning: more correct) way to set the class or can I style required fields using other attributes?
ValidationTextBox.js, Dojo 1.3, Line 116
_setRequiredAttr:function(_12){
this.required=_12;
if (_12) dojo.addClass(this.domNode, "dijitRequired");
else dojo.removeClass(this.domNode, "dijitRequired");
dijit.setWaiState(this.focusNode,"required",_12);
this._refreshState();
}
Hmm, I don't see that code in ValidationTextBox.js or anywhere else. My _setRequiredAttr() in 1.3 is:
_setRequiredAttr: function(/*Boolean*/ value){
this.required = value;
dijit.setWaiState(this.focusNode,"required", value);
this._refreshState();
}
Actually I don't see any references to dijitRequired at all, maybe that's something you added to your local copy?
Setting dijitRequired is not enough. dijit.form.DateTextBox has its own internal state. Even if required attribute is set, this widget display error only when it has been blurred. You can disable this mechanism using such subclass:
dojo.provide("my.DateTextBox");
dojo.require("dijit.form.DateTextBox");
dojo.declare("my.DateTextBox", dijit.form.DateTextBox, {
_setRequiredAttr: function(required){
this._hasBeenBlurred = true;
this.inherited(arguments);
}
});