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.
Related
There is one image in dojo/dijit's content. I want to set click event for the image but it can't catch the event.
the code in JSFiddle
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../../_static/js/dojo/dojo.js'></script>
<script>
require(["dijit/layout/ContentPane", "dojo/domReady!"], function(ContentPane){
new ContentPane({
content:"<p><img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png' onclick='clickHandler()' /></p>",
style:"height:125px"
}, "targetID").startup();
function clickHandler()
{
alert("img clicked");
}
});
</script>
</head>
<body class="claro">
<div id="targetID">
I get replaced.
</div>
</body>
</html>
You are defining the clickHandler function within the require function. This means that it will not be available after require returns. At the console you can see an error when the image is clicked: "clickHandler is not defined". You can easily solve this by defining the clickHandler function outside of require().
<script>
require(["dijit/layout/ContentPane", "dojo/domReady!"], function(ContentPane){
new ContentPane({
content:"<p><img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png' onclick='clickHandler()' /></p>",
style:"height:125px"
}, "targetID").startup();
});
function clickHandler()
{
alert("img clicked");
}
</script>
Edited.
require([
'dojo/dom-construct',
'dijit/layout/ContentPane',
'dojo/domReady!'
], function(domConstruct, ContentPane){
new ContentPane({
content: '<div id="imageDiv"></div>',
style: 'height:125px'
}, 'targetID').startup();
domConstruct.create('img', {
src: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png',
onclick: function(){ alert('i have been clicked') }
}, 'imageDiv');
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<div id="targetID">I get replaced.</div>
I have defined dgrid and a button for removing row:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css" media="screen" />
</head>
<body class="claro">
<div id="container"></div>
<button id="remove">Remove</button>
<script type="text/javascript">
var dojoConfig = {
async: true,
packages: [
{ name: 'dgrid', location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0' },
{ name: 'dstore', location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1' }
]
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script type="text/javascript">
require([
'dojo/_base/declare',
'dojo/on',
"dojo/dom",
"dstore/Memory",
"dstore/Trackable",
'dstore/SimpleQuery',
'dgrid/Grid',
'dgrid/extensions/Pagination',
'dgrid/extensions/DijitRegistry',
'dojo/domReady!'
],
function(declare, on, dom, Memory, Trackable, SimpleQuery, Grid, Pagination, DijitRegistry) {
var data = [];
for (var i = 1; i <= 500; i++) {
data.push({id:i,name: 'Name '+i, value: i});
}
var Store = declare([Memory, SimpleQuery, Trackable]);
var myStore = new Store({data:data});
var MyGrid = declare([Grid, Pagination]);
var grid = new MyGrid({
collection: myStore,
columns: {
'id' : 'Id',
'name' : 'Name',
'value' : 'Value'
},
className: "dgrid-autoheight",
showLoadingMessage: false,
noDataMessage: 'No data found.'
}, 'container');
grid.startup();
on(dom.byId('remove'),'click',function() {
myStore.remove(10);
});
});
</script>
</body>
</html>
The dgrid shows up, you can sort it, edit name or value.
The problem is, that when you click on the "remove" button, row is deleted, but then, at the end of the gird is 9x written: "No data found" and the dgrid stops to work (you cant delete any other row).
If you set showLoadingMessage: to true, then everything works without a problem.
Edit: I have simplified the example. Problem persists.
The grid may have been encountering error while updating the row data after the row has been removed. As the editor tries to update the row after the button loses focus. Try using the grid.removeRow method to remove the row. It might still encounter some other issues, but worth a try.
Editor might not be the best solution to achieve what your are trying to do.
User renderCell to add button to the grid, to remove the row/record. This might be a better solution.
Update: Just refresh the grid that should solve the problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css" media="screen" />
</head>
<body class="claro">
<div id="container"></div>
<button id="remove">Remove</button>
<script type="text/javascript">
var dojoConfig = {
async: true,
packages: [
{ name: 'dgrid', location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0' },
{ name: 'dstore', location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1' }
]
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script type="text/javascript">
require([
'dojo/_base/declare',
'dojo/on',
"dojo/dom",
"dstore/Memory",
"dstore/Trackable",
'dstore/SimpleQuery',
'dgrid/Grid',
'dgrid/extensions/Pagination',
'dgrid/extensions/DijitRegistry',
'dojo/domReady!'
],
function(declare, on, dom, Memory, Trackable, SimpleQuery, Grid, Pagination, DijitRegistry) {
var data = [];
for (var i = 1; i <= 500; i++) {
data.push({id:i,name: 'Name '+i, value: i});
}
var Store = declare([Memory, SimpleQuery, Trackable]);
var myStore = new Store({data:data});
var MyGrid = declare([Grid, Pagination]);
var grid = new MyGrid({
collection: myStore,
columns: {
'id' : 'Id',
'name' : 'Name',
'value' : 'Value'
},
className: "dgrid-autoheight",
showLoadingMessage: false,
noDataMessage: 'No data found.'
}, 'container');
grid.startup();
on(dom.byId('remove'),'click',function() {
myStore.remove(10);
grid.refresh();
});
});
</script>
</body>
</html>
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")
})
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/
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.