The following code works fine.But when the drop-down list is displayed it should not override the button elements named get value and get displayed value below it..instead the buttons should movedown when the dropdown is displayed and after a particular item is selected the button shoud come to the original position.
<html >
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
require([
"dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!"
], function(Memory, FilteringSelect){
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"},
{name:"Armed Forces Pacific", id:"AP"},
{name:"Armed Forces the Americas", id:"AA"},
{name:"California", id:"CA"},
{name:"Colorado", id:"CO"},
{name:"Connecticut", id:"CT"},
{name:"Delaware", id:"DE"}
]
});
var filteringSelect = new FilteringSelect({
id: "stateSelect",
name: "state",
value: "CA",
store: stateStore,
searchAttr: "name"
}, "stateSelect");
var filteringSelect = new FilteringSelect({
id: "stateSelect1",
name: "state",
value: "CA",
store: stateStore,
searchAttr: "name"
}, "stateSelect1");
});
</script>
</head>
<body class="claro">
<input id="stateSelect"><br/>
<br/>
<br/>
<input id="stateSelect1">
<input id="stateSelect">
<p>
<button onclick="alert(dijit.byId('stateSelect').get('value'))">Get value</button>
<button onclick="alert(dijit.byId('stateSelect').get('displayedValue'))">Get displayed value</button>
</p>
</body>
</html>
I'm not sure what you mean by "should not override the button elements" because it certainly should. The drop down menu is supposed to be an overlay, it's not part of the page. Whether or not you want it to be part of the page is different.
You cannot easily do this with the filtering select. The filtering select appends the div it uses to hold options, to the bottom of the page. You cannot show it in the normal flow of the page. You will have to create a custom widget that appends its options inside a container directly below the select input.
But I don't know what you are trying to solve by doing this. My advice would be to leave it as is unless you have a really good reason to change it. The drop down menu is a pretty well-ingrained component of GUIs, so changing the behavior of it is not recommended.
Edit:
If you want to limit the height of the drop-down. Set the "maxHeight" of the filteringSelect.
var filteringSelect = new FilteringSelect({
id: "stateSelect",
name: "state",
value: "CA",
store: stateStore,
searchAttr: "name",
maxHeight: 40
}, "stateSelect");
Here is a fiddle. http://jsfiddle.net/8sh24/
Related
I want to change in runtime how my popover is opening (from 'hover' to 'click'). I added code similar to the below:
<el-popover
placement="top-start"
width="200"
:trigger="someCondition ? 'hover' : 'click'"
:title="title"
:content="content">
<el-button slot="reference">Button</el-button>
</el-popover>
The title and content successfully changes dynamically in runtime but the trigger stays with the initial value even if the condition changes.
What am I doing wrong?
PS - I am pretty new with vue.js (but very experienced with programming and other web frameworks - e.g. React).
Thanks!
Use the key modifier on the el-popover as the element should be recreated
The key special attribute is primarily used as a hint for Vue’s
virtual DOM algorithm to identify VNodes when diffing the new list of
nodes against the old list. Without keys, Vue uses an algorithm that
minimizes element movement and tries to patch/reuse elements of the
same type in-place as much as possible.
HTML:
<el-popover
:key="trigger"
placement="top-start"
title="Title"
width="200"
:trigger="trigger"
content="this is content, this is content, this is content">
<el-button slot="reference">Hover to activate</el-button>
</el-popover>
<el-button #click="changebehavior">Change behavior</el-button>
JS:
data() {
return {
visible: false,
trigger: 'hover'
};
},
methods: {
changebehavior() {
this.trigger = 'hover' == this.trigger
? 'click'
: 'hover'
}
}
Using key modifier
Working example
var Main = {
data() {
return {
visible: false,
title: 'Default title',
content: 'Default content',
trigger: 'click',
};
},
methods: {
changeToClick() {
this.title= 'Click title';
this.content= 'Click content will be here';
this.trigger = 'click';
},
changeToHover() {
this.title= 'Hover title';
this.content= 'Hover content will be here';
this.trigger = 'hover';
},
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.13.2/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.13.2/lib/index.js"></script>
<div id="app">
<template>
<el-popover
:key="trigger"
placement="top-start"
:trigger="trigger"
width="200"
:title="title"
:content="content">
<el-button slot="reference">Button</el-button>
</el-popover>
<el-button type="text" #click='changeToClick'>Change To Click</el-button>
<el-button type="text" #click='changeToHover'>Change To hover</el-button>
</template>
</div>
I am a newbie to Dojo. Here is the issue i had. Pleas help.
When select State radio button, State combo box should appear. When select Region radio button, Region combo box should appear. But my codes seem not working.
Fiddle project is here
require([
'dojo/dom',
'dojo/dom-construct',
'dojo/dom-style',
'dojo/query',
'dojo/on',
'dojo/store/Memory',
'dijit/form/ComboBox',
'dojo/domReady!'
], function (dom, domConstruct,domStyle,query,on, Memory, ComboBox) {
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"}
]
});
var regionStore = new Memory({
data: [
{name:"North Central", id:"NC"},
{name:"South West", id:"SW"}
]
});
var comboState = new ComboBox({
id: "stateSelect",
name: "state",
store: stateStore,
searchAttr: "name"
}, "state").startup();
var comboRegion = new ComboBox({
id: "regionSelect",
name: "region",
store: regionStore,
searchAttr: "name"
}, "region").startup();
domStyle.set(dom.byId('state'), "display", "block");
domStyle.set(dom.byId('region'), "display", "none");
on(query('.radio'),'change',function(){
query('.query').forEach(function(divElement){
domStyle.set(divElement, "display", "none");
});
domStyle.set(dom.byId(this.dataset.target), "display", "block");
});
});
.hidden {
display: none;
}
<input class="radio" data-target="state" type="radio" name="selection" value="state">State
<input class="radio" data-target="region" type="radio" name="selection" value="region">Region
<div id="state" class="query hidden"></div>
<div id="region" class="query hidden"></div>
It is more straightforward to query and then connect lke:
query('.radio').on('change', function(){
alert("bing")
})
I have a widget on dojo, but it does not display the datagrid. If I make the example outside the widget works. I see the code by firebug, you can not mistake, however, I can see the div inspect and there is nothing inside. The Builder runs, but does not load the grid in div.
Widget.js
define([ "dojo/_base/declare",
"dojo/text!./FormularioQCI.html",
"icm/base/_BaseWidget",
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore"
],
function(declare, template, _BaseWidget, JsonRest, Memory, Cache, DataGrid, ObjectStore){
return declare("icm.custom.pgwidget.formularioQCI.FormularioQCIWidget", [_BaseWidget], {
templateString: template,
widgetsInTemplate: true,
constructor: function(){
alert("X");
myStore = dojo.store.Cache(dojo.store.JsonRest({target:"rest/formularioQCI/get"}), dojo.store.Memory());
grid = new dojox.grid.DataGrid({
store: dataStore = dojo.data.ObjectStore({objectStore: myStore}),
structure: [
{name:"State Name", field:"name", width: "200px"},
{name:"Abbreviation", field:"abbreviation", width: "200px", editable: true}
]
}, "target-node-id"); // make sure you have a target HTML element with this id
grid.startup();
alert("Y");
dojo.query("#save").onclick(function(){
alert("X");
dataStore.save();
});
var id = 0;
dojo.query("#add").onclick(function(){
dataStore.newItem({
name: "col2-" + id,
abbreviation: "col3-" + id
});
id++;
});
},
/**
* #private destroys this widget
*/
destroy: function() {
//Do any custom clean up here
this.inherited(arguments);
}
});});
Widget.html
<div style="width: 100%; height: 100%;">
<div id="target-node-id">
</div>
<button id="save">Save
</button>
<button id="add">Add Linha
</button>
</div>
you need to write you code in the postCreate function.
Simplest way would be to replace the constructor keyword with postCreate.
The reason being that the "target-node-id" will not be available until the postCreate function call.
postCreate: function(){
this.inherited(arguments);
// Rest of your code here.
alert("X");
...
}
How to change "more choices" label in the filteringselect.Kindly help me resolve the issue.Below is the code i tried,which is the normal code used in FilteringSelect Example i executed this in notepad++.
<html>
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
require([
"dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!"
], function(Memory, FilteringSelect){
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"},
{name:"Armed Forces Pacific", id:"AP"},
{name:"Armed Forces the Americas", id:"AA"},
{name:"Alifornia", id:"AA"},
{name:"Aolorado", id:"AO"},
{name:"Aonnecticut", id:"AT"},
{name:"Aelaware", id:"AE"},
{name:"Blabama", id:"BL"},
{name:"Blaska", id:"BK"},
{name:"Bmerican Samoa", id:"BS"},
{name:"Brizona", id:"BZ"},
{name:"Brkansas", id:"BR"},
{name:"Brmed Forces Europe", id:"BE"},
{name:"Brmed Forces Pacific", id:"BP"},
{name:"Brmed Forces the Americas", id:"BA"},
{name:"Balifornia", id:"BA"},
{name:"Bolorado", id:"BO"},
{name:"Bonnecticut", id:"BT"},
{name:"Belaware", id:"BE"},
{name:"Dlabama", id:"DL"},
{name:"Dlaska", id:"DK"},
{name:"Dmerican Samoa", id:"DS"},
{name:"Drizona", id:"DZ"},
{name:"Drkansas", id:"DR"},
{name:"Drmed Forces Europe", id:"DE"},
{name:"Drmed Forces Pacific", id:"DP"},
{name:"Drmed Forces the Americas", id:"DA"},
{name:"Dalifornia", id:"DA"},
{name:"Dolorado", id:"DO"},
{name:"Dnecticut", id:"DT"},
{name:"Delaware", id:"DE"}
]
});
var filteringSelect = new FilteringSelect({
id: "stateSelect",
name: "state",
value: "CA",
store: stateStore,
forceWidth:true,
pageSize:10,
searchAttr: "name"
}, "stateSelect");
});
</script>
<style type="text/css">
.dijitInputField
{
font-size:13;
}
.dijitPlaceHolder
{
font-size:13;
}
.dijitMenuItem
{
font-size:0.8em;
}
</style>
</head>
<body class="claro">
<input id="stateSelect">
<p>
<button onclick="alert(dijit.byId('stateSelect').get('value'))">Get value</button>
<button onclick="alert(dijit.byId('stateSelect').get('displayedValue'))">Get displayed value</button>
</p>
</body>
</html>
Yes it's possible, but it's not easy. Dojo defined the "More choices" message in their localized messages, which you can see here.
You cannnot change them directly, but you can override the method where it's used. That's the tricky part, after reading the code I noticed that dropdowns are loaded by using the dropDownClass property which is by default _ComboBoxMenu. This class is where the message is actually used (actually it's a mixin), so we need to subclass this class and extend its behaviour, for example:
var CustomizedMenu = declare([_ComboBoxMenu], {
buildRendering: function() {
this.inherited(arguments);
this.nextButton.innerHTML = "More states"; // New text
}
});
As you can see here, we change the html content of the nextButton to something else in the buildRendering method. It's here where it's originally placed, so we replace it afterwards, that's why we use this.inherited(arguments); first because that means that the superclass function is first executed.
Afterwards we just change the dropDownClass of the select, like this:
var filteringSelect = new FilteringSelect({
id: "stateSelect",
name: "state",
value: "CA",
dropDownClass: CustomizedMenu, // Just change it
store: stateStore,
forceWidth:true,
pageSize:10,
searchAttr: "name"
}, "stateSelect");
You can see the complete code example on this JSFiddle.
The following code works fine,But only one value at a time, i want more than one value to selected separated by a comma.
for Example i selected Alabama from the dropdown and then when i give comma Example:Alabama, and enter a new letter,say C [Example:Alabama,C],the next set of items must be displayed in the dropdown
So finally i would be having the following values in the TextBox Example:Alabama,California
<html >
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
require([
"dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!"
], function(Memory, FilteringSelect){
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"},
{name:"Armed Forces Pacific", id:"AP"},
{name:"Armed Forces the Americas", id:"AA"},
{name:"California", id:"CA"},
{name:"Colorado", id:"CO"},
{name:"Connecticut", id:"CT"},
{name:"Delaware", id:"DE"}
]
});
var filteringSelect = new FilteringSelect({
id: "stateSelect",
name: "state",
value: "CA",
store: stateStore,
searchAttr: "name"
}, "stateSelect");
});
</script>
</head>
<body class="claro">
<input id="stateSelect">
<p>
<button onclick="alert(dijit.byId('stateSelect').get('value'))">Get value</button>
<button onclick="alert(dijit.byId('stateSelect').get('displayedValue'))">Get displayed value</button>
</p>
</body>
</html>
The Dojo Filtering select widget does not allow multiple items to be selected. Consider using a Dojo MultiSelect widget as an alternative.
See:
http://dojotoolkit.org/reference-guide/1.9/dijit/form/MultiSelect.html
You should look at CheckedMultiSelect:
https://dojotoolkit.org/reference-guide/1.9/dojox/form/CheckedMultiSelect.html
It has both the dropdown and the multiseletion. To change the displayed label, the interesting code is in function _updateSelection:
this.dropDownButton.set("label", this.multiple ?
lang.replace(this._nlsResources.multiSelectLabelText, {num: i}) :
label);
It displays label n item(s) selected. If you want items separated with commas, it's the good place to plug in your code.