dijit.DateTextBox with dojox.widget.Calendar - initialisation - dojo

Environment: Dojo.1.8.4
If the DateTextBox does not contain a valid date, I wish to start the calendar popup at a date in the past (it's a date of birth entry box). What is the best way of achieving this?
<div maxlength="12"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props="required: true, constraints:{min:'1880-01-01',
max: new Date()}, popupClass: 'dojox.widget.Calendar'">
</div>
I want to be able to put a 'startDate' parameter or similar in the above such that the constructor for the popup will pick it up and use it.
It looks as though the dojox.widget._CalendarBase sets the date to the current date in its constructor. (actually seems to set it in both the constructor and the declaration).

NOTE: If you are using the dijit/Calendar dropdown default then use the dropDownDefaultValue property as #vogomatix says in the other answer.
The following is if you are using the dojox/widget/Calendar for the dropdown.
By default the popup is set to the current value of the textbox and if null, it will use the current date.
You can do
1) set the value of the text box to what you want the default to be
OR
2) use aspects to set the value in the calendar when it is opened.
require([
'dojo/dom',
'dojo/aspect',
'dijit/form/DateTextBox',
'dojox/widget/Calendar'
], function(dom, aspect, DateTextBox, Calendar){
var dt = new DateTextBox({ popupClass: Calendar }, dom.byId('dtText'));
aspect.after(dt, 'openDropDown', function() {
// only default if there is no value
if(dt.get('value') == null) {
// Do not set the text box when changing value,
// so temporarily override the onchange function
var oldOnChange = dt.dropDown.onChange;
dt.dropDown.onChange = function(){};
dt.dropDown.set('value', new Date(1980, 7, 4)); // default to August 4th, 1980
dt.dropDown.onChange = oldOnChange;
}
});
});
See it in action:
http://jsfiddle.net/cswing/kQYhQ/

One solution is to set dropDownDefaultValue, which works with the standard calendar.
var dt = new DateTextBox({dropDownDefaultValue: new Date( 1950,1,1)},
dom.byId('dtText'));
dropDownDefaultValue gets passed to the calender in the form of currentFocus by the popup. Unfortunately dojox.widget.Calendar does not recognise currentFocus and the way round that is to either extend the class to do so, or to use the aspect method above.

This is how to extend the dojox.widget.Calendar in order to accept the currentFocus passed by the popup. Like the aspect method above, it temporarily disables onChange in order to prevent the value being placed in the parent DateTextBox
define([
"dojo/_base/declare",
"dojox/widget/Calendar"
], function(declare, calendar){
return declare("my.dijit.Calendar", [calendar], {
postCreate: function() {
this.inherited(arguments);
var oldOnChange = this.onChange;
this.onChange = function(){};
this.set('value', this.parseInitialValue( this.currentFocus));
this.onChange = oldOnChange;
}
});
});

Related

DataTables does not save state of date range search

I am using data tables to display a list of events of different types. Besides the default global text search I need to
1. filter list by event type
2. filter list by date range (show only today -> infinity)
3. Save the state of the table for the the current session.
The state saves as expected except for the date range search which is always reset. Am I missing something or custom search functions are out of the scope of state saving? Here's the relevant code in jQuery:
Fist I add my own search function through the provided method. This works except it's state is not saved
// Extend search()
var threshold_timestamp = xxxxxxxxxxxx // set for beginning of today)
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex) {
var timestamp = parseInt(data[1]); // event date timestamp
if (timestamp > threshold_timestamp) {
return true;
}
return false;
}
);
Then I add a listeners for the select used to switch between the event type options ('','Event','Sports','Dance'...) and the button user to turn on/off the date range filter
$('#filter-by-type').on('change', function() {
table.columns(0).search( $(this).val() ).draw();
});
$('#dt-history').on('click', function() {
// Logic to toggle threshold_timestamp between 0 or value
table.draw();
});
Then I call DataTables
var table = $('#example').DataTable( {
ajax: "datasource.json",
stateSave : true,
stateDuration: -1,
columns: [
{ data: "type"}, //str as 'Sport','Dance'
{ data: "date"} // int as 1528572000
]
});
I managed to scratch my head sideways and "save the date search" using localstorage but that is a hack. On page load I trigger a button click to execute the search so initially the tables seems empty, the "No data available in table" message appears and then the filtered results display. As a second hack I will suppress that message so when there will really be no data... there will be no message :(

AnyColumn option added as new column in Dojo enhanced grid view

I am working on dojo enhanced grid view. I am able to display the grid in UI. But AnyColumn option is added as new column.
Example:
Any help will be appreciated...
Here is the Code
var mygrid = new EnhancedGrid({
id: "grid",
store: gridStore, //Data store passed as input
structure: gridStructure, //Column structure passed as input
autoHeight: true,
autoWidth: true,
initialWidth: width,
canSort : true,
plugins: {
filter: {
//Filter operation
isServerSide: true,
disabledConditions : {"anycolumn" : ["equal","less","lessEqual","larger","largerEqual","contains","startsWith","endsWith","equalTo","notContains","notEqualTo","notStartsWith","notEndsWith"]},
setupFilterQuery: function(commands, request){
if(commands.filter && commands.enable){
//filter operation
}
}
}
}, dojo.byId("mydatagrid"));
mygrid.startup();
Thanks,
Lishanth
First, do not use EnhancedGrid, instead use either dgrid or gridx.
I think by default anycolumn is added to the dropdown. If you want to remove then, I would suggest to
Register for click event on the filter definition
Iterate through the drop-down and remove the first entry which is anyColumn
or you can also try something like
dojo.forEach(this.yourgrid.pluginMgr.getPlugin('filter').filterDefDialog._cboxes, function(dropdownbox) {
dropdownbox._colSelect.removeOption(dropdownbox.options[0]);
});
Updated answer is. I know this is not the elegant way of doing it but it works.
//reason why I'm showing the dialog is that _cboxes of the filter are empty initially.
dijit.byId('grid').plugin('filter').filterDefDialog.showDialog();
dojo.forEach(dijit.byId('grid').pluginMgr.getPlugin('filter').filterDefDialog._cboxes, function(dropdownbox) {
var theSelect = dropdownbox._colSelect;
theSelect.removeOption(theSelect.options[0]);
});
//Closing the dialog after removing Any Column
dijit.byId('grid').plugin('filter').filterDefDialog.closeDialog();

What's the proper way to implement formatting on v-model in Vue.js 2.0

For a simple example: textbox to input currency data.
The requirement is to display user input in "$1,234,567" format and remove decimal point.
I have tried vue directive. directive's update method is not called when UI is refreshed due to other controls. so value in textbox reverts to the one without any formatting.
I also tried v-on:change event handler. But I don't know how to call a global function in event handler. It is not a good practice to create a currency convert method in every Vue object.
So what is the standard way of formatting in Vue 2.0 now?
Regards
Please check this working jsFiddle example: https://jsfiddle.net/mani04/bgzhw68m/
In this example, the formatted currency input is a component in itself, that uses v-model just like any other form element in Vue.js. You can initialize this component as follows:
<my-currency-input v-model="price"></my-currency-input>
my-currency-input is a self-contained component that formats the currency value when the input box is inactive. When user puts cursor inside, the formatting is removed so that user can modify the value comfortably.
Here is how it works:
The my-currency-input component has a computed value - displayValue, which has get and set methods defined. In the get method, if input box is not active, it returns formatted currency value.
When user types into the input box, the set method of displayValue computed property emits the value using $emit, thus notifying parent component about this change.
Reference for using v-model on custom components: https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events
Here is a working example: https://jsfiddle.net/mani04/w6oo9b6j/
It works by modifying the input string (your currency value) during the focus-out and focus-in events, as follows:
<input type="text" v-model="formattedCurrencyValue" #blur="focusOut" #focus="focusIn"/>
When you put the cursor inside the input box, it takes this.currencyValue and converts it to plain format, so that user can modify it.
After the user types the value and clicks elsewhere (focus out), this.currencyValue is recalculated after ignoring non-numeric characters, and the display text is formatted as required.
The currency formatter (reg exp) is a copy-paste from here: How can I format numbers as money in JavaScript?
If you do not want the decimal point as you mentioned in question, you can do this.currencyValue.toFixed(0) in the focusOut method.
I implemented a component. According to Mani's answer, it should use $emit.
Vue.component('currency', {
template: '<input type="text"' +
' class="form-control"' +
' :placeholder="placeholder""' +
' :title="title"' +
' v-model="formatted" />',
props: ['placeholder', 'title', 'value'],
computed: {
formatted: {
get: function () {
var value = this.value;
var formatted = currencyFilter(value, "", 0);
return formatted;
},
set: function (newValue) {
var cleanValue = newValue.replace(",", "");
var intValue = parseInt(cleanValue, 10);
this.value = 0;
this.value = intValue;
}
}
}
}
);
Using Vue custom directives + .toLocaleString() is also a very good option.
Vue.directive("currency", {
bind(el, binding, vnode) {
el.value = binding.value && Number(binding.value).toLocaleString('en-US', {style: 'currency', currency: !binding.arg ? 'USD' : binding.arg });
el.onblur = function(e) {
e.target.value = Number(e.target.value).toLocaleString('en-US', {style: 'currency', currency: !binding.arg ? 'USD' : binding.arg});
};
el.onfocus = function(e) {
e.target.value =
e.target.value && Number(e.target.value.replace(/[^\d.]/g, ""));
};
el.oninput = function(e) {
vnode.context.$data[binding.expression] = e.target.value;
};
}
});
Here is the example link: https://codepen.io/Mahmoud-Zakaria/pen/YzPvNmO

Registering jquery radio button click event doesn't work

I am trying to set a hidden form field with the value of a selected radio button. I have the following code:
$(function () {
// set hidden form field with selected timeslot
$('input[name=["timeslot"]').live("click", (function () {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
}));
});
All radio buttons have the name "timeslot", and I would like to run this function whenever one is clicked. However, the alert box shows blank when I click one of the radio buttons.
UPDATE: Oops! Didn't see the double square brackets. However I fixed it:
$('input[name="timeslot"]').live("click", (function () {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
}));
and I am STILL having the same problem. In fact, the alert box does not even come up any more for some reason.
UPDATE 2: Actually, in my real code I have other events registered in my initiation block besides this one -- if I take out all of them except for the radio button one, it works!
For example, if I have this:
$(function () {
// set hidden form field with selected interviewee
$('#interviewees').live("change", (function () {
var selected = $("#interviewees").val();
$("#selectedInterviewee").val(selected);
}));
// set hidden form field with selected timeslot
$('input[name="timeslot"]').live("click", (function () {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
}));
});
then the radio button click event does NOT fire, though the first one (a dropdown list) does. But if I have the radio button one all by itself, it does. Any ideas????
The input tags look like this:
<input id="slot_7:30-AM" name="timeslot" type="radio" value="slot_7:30-AM" />
I am using IE 8 mostly, but I tried this on Firefox and the same thing happened. What am I doing wrong?
Without seeing your html, I can't be totally sure, but I'm thinking the problem is the selector you're using:
$('input[name=["timeslot"]')
There are at least two problems that might cause issues:
the unclosed square-bracket, and
the use of square brackets inside the attribute selector. Try using: $('input[name="timeslot"]') instead.
Edited in response to comments to the answer, below.
The following seems to work:
$('input[name="timeslot"]').live('click', function() {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
});
JS Fiddle demo.
I am, of course, using a text input, rather than a hidden, but since the selector works on the id it should work regardless of the input type.
OK I got it to work by REVERSING the order of the event registrations:
$(function () {
// set hidden form field with selected timeslot
$('input[name="timeslot"]').live("click", (function () {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
}));
// set hidden form field with selected interviewee
$('#interviewees').live("change", (function () {
var selected = $("#interviewees").val();
$("#selectedInterviewee").val(selected);
}));
});
Ugh. I'm returning to my view that javascript is a flakey mess. But for whatever reason, it does work now. (Both of them work now ... very peculiar.)

Using dijit.InlineEditBox with dijit.form.Select

I'm trying to use a dijit.form.Select as the editor for my dijit.InlineEditBox. Two problems / unexpected behavior seem to occur:
Inconsistently, the InLineEditBox doesn't have the initial value set as selected
Consistently, after selecting a choice, the value that should be hidden is shown instead of the label.
The width isn't set to 130px
Here's working code: http://jsfiddle.net/mimercha/Vuet8/7/
The jist
<span dojoType="dijit.InlineEditBox" editor="dijit.form.Select"
editorParams="{
options: [
{label:'None',value:'none'},
{label:'Student',value:'stu'},
{label:'Professor',value:'prof',selected:true},
],
style:'width:1000px;',
}"
editorStyle="width: 1000px;"
>
</span>
Any help is greatly appreciated! Thanks!
Okay, after a few MORE hours struggling with the mess that is dijit.InlineEditBox, I think I have the solution to the remaining issue (#2).
EDIT: My first solution to #2 is still flawed; the implementation at http://jsfiddle.net/kfranqueiro/Vuet8/10/ will never return the actual internal value when get('value') is called.
EDIT #2: I've revamped the solution so that value still retains the real (hidden) value, keeping displayedValue separate. See if this works better:
http://jsfiddle.net/kfranqueiro/Vuet8/13/
First, to recap for those who weren't on IRC:
Issue #1 was happening due to value not being properly set as a top-level property of the InlineEditBox itself; it didn't pick it up properly from the wrapped widget.
Issue #3 was happening due to some pretty crazy logic that InlineEditBox executes to try to resolve styles. Turns out though that InlineEditBox makes setting width particularly easy by also exposing it as a top-level numeric attribute. (Though IINM you can also specify a percentage as a string e.g. "50%")
Now, issue #2...that was the killer. The problem is, while InlineEditBox seems to have some logic to account for widgets that have a displayedValue attribute, that logic is sometimes wrong (it expects a displayedValue property to actually exist on the widget, which isn't necessarily the case), and other times missing entirely (when the InlineEditBox initializes). I've worked around those as best I could in my own dojo.declared extensions to InlineEditBox and the internal widget it uses, _InlineEditor - since generally it's a good idea to leave the original distribution untouched.
It's not pretty (neither is the underlying code I dug through to understand and come up with this), but it seems to be doing its job.
But man, this was rather interesting. And potentially pertinent to my interests as well, as we have used this widget in our UIs as well, and will be using it more in the future.
Let me know if anything backfires.
hm...
<span dojoType="dijit.InlineEditBox" editor="dijit.form.Select"
editorParams="{
options: [
{label:'None',value:'none'},
{label:'Student',value:'stu'},
{label:'Professor',value:'prof',selected:true},**<<<<** and this comma is for?
],
style:'width:1000px;',**<<<<** and this comma is for?
}"
editorStyle="width: 1000px;"
>
</span>
Also, when using dijit.form.Select, selected value is not attr "selected" but value.
And if you enter prof inside <span ...blah > prof </span> than your proper selected option will be selected ;)
Dijit select checks for VALUE, not attr.
This may be fixed in recent Dojo - see http://bugs.dojotoolkit.org/ticket/15141 - but using 1.7.3 I found this worked:
In my app directory, at the same level as dojo, dijit and dojox, I created a file InlineSelectBox.js which extends InlineEditBox with code to set the HTML on the associated domNode from the value of the Dijit, and which wires up that code to the onChange() event:
define(["dijit/InlineEditBox",
"dijit/form/Select",
"dojo/on",
"dojo/_base/declare",
"dojo/_base/array"
],
function(InlineEditBox, Select, on, declare, array){
return declare(InlineEditBox, {
_setLabel: function() {
array.some(this.editorParams.options, function(option, i){
if (option.value == this.value) {
this.domNode.innerHTML = option.label;
return true;
}
return false;
}, this);
},
postMixInProperties: function(){
this.inherited(arguments);
this.connect(this, "onChange", "_setLabel");
},
postCreate: function(){
this.inherited(arguments);
this._setLabel();
}
});
});
Then, in my view script:
require(["dojo/ready",
"app/InlineSelectBox",
"dijit/form/Select"
],
function(ready, InlineSelectBox, Select){
ready(function(){
// Add code to set the options array
var options = [];
// Add code to set the initial value
var initialValue = '';
var inlineSelect = new InlineSelectBox({
editor: Select,
editorParams: {options: options},
autoSave: true,
value: initialValue
}, "domNodeToAttachTo");
});
});
I was dealing with this situation a few months ago, and not finding a resolution i made my own algorithm.
I put a div with an event on Onclick that build programatically a Filtering Select on that div with the store i want to use.
function create(id,value){
var name = dojo.byId(id).innerHTML;
dojo.byId(id).parentNode.innerHTML = '<div id="select"></div>';
new dijit.form.FilteringSelect({
store: store,
autoComplete: true,
invalidMessage:"Invalid Selection",
style: "width: 80px;",
onBlur: function(){ },
onChange: function(){ },
required: true,
value: value,
disabled: false,
searchAttr: "name",
id: "status"+id,
name: "status"
},"select");
dijit.byId('status'+id).focus();
}
I used the onBlur event to destroy the widget and the onchange to save by xhr the new value.
The focus is below because the onBlur was not working properly.
note: the function is not complete.