I am working on a menu that lets the use select a classification method, either quantile or equal interval, as well as letting them change the color or the number of intervals. The number of classes is in a dijit/form/NumberSpinner. The colors I have in a FilteringSelect. For both of those, I was able to have an event listener such as
registry.byId('classSelect').on ('change', function (){
numClass = registry.byId("classSelect").value;
drawFeatureLayer();
});
This lets the user change the interval and it immediately executes the functions that do the drawing. I like the look of a radio buttons and I want to use those for my classification methods. First I tried a dijit/formRadioButton. This looks OK, but selecting between the two choices doesn't have very good styling. The first button still has a little fill color to it, and the 2nd one does too, so it looks like both of them are selected.
<h4>Classification method: </h4>
<form id="classForm" action="">
<input type="class-method" name="method" id="btnQuantile" value="quantile" data-dojo-type="dijit/form/RadioButton" checked="checked"/> <label for="btnQuantile">Quantile</label> <br />
<input type="class-method" name="method" id="btnEqInterval" value="equal_interval" data-dojo-type="dijit/form/RadioButton" /> <label for="btnEqInterval">Equal Interval </label> <br />
</form>
The other thing I'm not sure about is how I might have an event listener to the change in buttons. All I can figure out is to add a 'Go' button which will read the classification and then execute my drawing function.
registry.byId('btnClassify').on('click', function (){
var clsForm = dom.byId("classForm");
for(var i = 0; i < clsForm.method.length; i++) {
if(clsForm.method.checked){
currentMethod = clsForm.method.value;
}
}
drawFeatureLayer();
});
Since I figured out I don't need a 'Go' button for either the number of classes or my colors, I'd really like to get rid of it all together and not have to have it just for my classification method.
I suppose I could use another type of menu, but I only have two methods. It looks klunky to have a dropdown menu that has just one other option in it. Am I missing something obvious on how to detect when one of those two buttons are selected?
Solved! Go to Solution.
Tracy,
The name for both of your input elements needs to be the same in order for the radio buttons to function as a group. Otherwise they are just independent buttons and can both be checked at the same time. In the sample link I sent you'll see that the name value for both options is set to toppings.
Tracy
Here's a sample that shows how to detect when a radio button's value is changed:
And if you look at the jsfiddle posted in the last response on this stack overflow discussion you'll see one example of the dijit radio buttons could be customized.
html - How do I make a customized Radio Button using CSS and Javascript or DOJO? - Stack Overflow
It is executing, but its still not styled correctly. The first checked item retains a filled look.
I'm sure I have something out of order. What is the true parameter for ?
HTML
<ul style="list-style-type: none">
<li>
<input id="btnQuantile" name="quantile" type="radio" value="quantile" checked
data-dojo-type="dijit/form/RadioButton">
<label for="btnQuantile">Quantile</label>
</li>
<li>
<input id="btnEqInterval" name="eqInterval" type="radio" value="equal_interval"
data-dojo-type="dijit/form/RadioButton">
<label for="btnEqInterval">Equal Interval</label>
</li>
</ul>
JAVASCRIPT
registry.byId("btnQuantile").on("click", function(isChecked){
if(isChecked){
currentMethod="quantile";
drawFeatureLayer();
}
}, true);
registry.byId("btnEqInterval").on("click", function(isChecked){
if(isChecked){
currentMethod="equal_interval";
drawFeatureLayer();
}
}, true);
Tracy,
The name for both of your input elements needs to be the same in order for the radio buttons to function as a group. Otherwise they are just independent buttons and can both be checked at the same time. In the sample link I sent you'll see that the name value for both options is set to toppings.
That was it, thanks! I had it right in another section of my code, I just went a little too far editing the pizza sample.