I want to use 3 comboboxes that have the same set of choices. Once one is chosen from one of the comboboxes, the choice is eliminated in the other ones or they all keep the same choices, but only one is allowed that certain choice at a time. So for the second option, if box one chose "yellow", and then box two chooses "yellow", box one is now waiting on a choice. I've tried a few things with using comboboxes, Jcomboboxes, and observablelists/observableitemlists and still couldn't figure it out. I thought maybe using a listener but was stumped there also.
I set up my code like this
ObservableList<String> c = FXCollections.observableArrayList("Blue", "Green", "Grey", "Red", "Black", "Yellow");
ComboBox col = new ComboBox(c);
ComboBox col2 = new ComboBox(c);
ComboBox col3 = new ComboBox(c);
Here is how the comboboxes all look
After some testing and revising of Sai Dandem's help, this is the final code for anyone following this post. His code mostly worked but there was an issue with null pointer exceptions and the code sometimes not clearing all the boxes as wanted.
col.getSelectionModel().selectedItemProperty().addListener((obs, old, val)-> {
if(col2.getSelectionModel().getSelectedItem() != null && col2.getSelectionModel().getSelectedItem().equals(val)) {
col2.setValue(null);
}
if(col3.getSelectionModel().getSelectedItem() != null && col3.getSelectionModel().getSelectedItem().equals(val)) {
col3.setValue(null);
}
});
col2.getSelectionModel().selectedItemProperty().addListener((obs, old, val)-> {
if(col.getSelectionModel().getSelectedItem() != null && col.getSelectionModel().getSelectedItem().equals(val)) {
col.setValue(null);
}
if(col3.getSelectionModel().getSelectedItem() != null && col3.getSelectionModel().getSelectedItem().equals(val)) {
col3.setValue(null);
}
});
col3.getSelectionModel().selectedItemProperty().addListener((obs, old, val)-> {
if(col.getSelectionModel().getSelectedItem() != null && col.getSelectionModel().getSelectedItem() != null && col.getSelectionModel().getSelectedItem().equals(val)) {
col.setValue(null);
}
if(col2.getSelectionModel().getSelectedItem() != null && col2.getSelectionModel().getSelectedItem().equals(val)) {
col2.setValue(null);
}
});
I have not tested the below code, but you can do it with something like this...
col.valueProperty().addListener((obs, old, val)->updateValue(val, col));
col2.valueProperty().addListener((obs,old,val)->updateValue(val,col2));
col3.valueProperty().addListener((obs,old,val)->updateValue(val,col3));
private void updateValue(String val, ComboBox combo){
Stream.of(col,col2,col3).forEach(c->{
if(c!=combo && c.getValue().equals(val){
c.setValue(null);
}
});
}
Related
This in flash.
I have a bunch of buttons that I want to animate once I've hit the corresponding key for. Each button has an "Up," "Over," "Down," and "Hit" state.
I get the error I keep getting is:
Access of possibly undefined property enabled through a reference with static type Class.
I think there is something wrong with the way I called "Pad7" which is a button with a class name of "Pad7."
Here is my code
stage.addEventListener(KeyboardEvent.KEY_DOWN, fl_KeyboardDownHandler);
function fl_KeyboardDownHandler(event:KeyboardEvent):void
{
Pad7.enabled = false;
if (event.keyCode == 81)
{
trace("Q");
Pad7.enabled = true;
//Pad7.gotoAndPlay();
}
}
It seems like you have a class called Pad7 and then you also have an instance of that class called Pad7. At least make sure that your instance of Pad7 is named something that you can access. You probably meant to do something similar to this:
var myPad7Instance:Pad7;
function myInitFunction():void {
myPad7Instance = new Pad7();
stage.addEventListener(KeyboardEvent.KEY_DOWN, fl_KeyboardDownHandler);
}
function fl_KeyboardDownHandler(event:KeyboardEvent):void
{
myPad7Instance.enabled = false;
if (event.keyCode == 81)
{
trace("Q");
myPad7Instance.enabled = true;
//myPad7Instance.gotoAndPlay();
}
}
I want to have a column in my dataGrid with checkboxes in it. My code that creates grid with the column looks like this:
var dataGrid:DataGrid=new DataGrid();
var preparedColumns:Array=[];
preparedColumns.push(new DataGridColumn("DepCode"));
var checkboxColumn:DataGridColumn=new DataGridColumn("AddSegment");
checkboxColumn.itemRenderer=new ClassFactory(CheckBox);
checkboxColumn.editable=true;
preparedColumns.push(checkboxColumn);
for (var i:int=0; i < event.result.request.out.segments.segment.length; i++)
{
var segment:Object=event.result.request.out.segments.segment[i];
var addSegmentCheckbox:CheckBox=new CheckBox();
preparedValues.addItem({DepCode: segment.departureCode, AddSegment: addSegmentCheckbox});
addSegmentCheckbox.id = ""+i;
addSegmentCheckbox.addEventListener(Event.CHANGE, changeCheckboxState);
checkboxValues[i] = false;
}
dataGrid.columns=preparedColumns;
dataGrid.dataProvider=preparedValues;
This works, at least it renders what I want but I can't figure out how to read if user selected checkbox in given row or not. I've seen that often there are added function onChange to the checkbox but I can't figure out how to do it when I use factory (most examples I found don't create itemRenderer in code but with the use of tags).
I tried to read data like this but checkbox.selected turn out to be false no matter if I checked the checkbox or not.
public function OKButtonClick(event:MouseEvent):void
{
for (var i:int=0; i < preparedValues.length; i++)
{
var row:Object=preparedValues[i];
var checkbox:CheckBox=row.AddSegment;
if (checkbox.selected == true)
{
}
}
}
I tried to add a listener for checkboxes as suggested in the loop but the listener method isn't executed when checkboxes states change (I checked it in debugger). I updated the first code part above and added following method:
public function changeCheckboxState(event:Event):void
{
var i:int = event.currentTarget.id;
if (checkboxValues[i] == true) {
checkboxValues[i] == false;
} else {
checkboxValues[i] == true;
}
}
Table checkboxValues never changes (I set it up all to false at the beginning) and the above method is never executed.
You should listen for Event.CHANGE instead of for the mouse click itself (that way you know you're getting the event after the framework has updated selected).
From there, you should be able to get the owner of the checkbox (as an ItemRenderer), and retrieve the data for that cell.
I am using SlickGrid with dataView. I have applied conditional formatting to highlight specific rows when the grid loads with:
grid.addCellCssStyles("highlight", rowColor);
grid.invalidate();
dataView.syncGridCellCssStyles(grid, "highlight")
grid.render();
When a filter is applied, I would like to remove the css style. I have tried:
grid.removeCellCssStyles("highlight");
dataView.syncGridCellCssStyles(grid, "highlight")
When the filter is applied, render() is called twice. The first time, the style is successfully removed, but the second time render() runs it is reapplied. The first time render() is called by onRowCountChanged(), the secod by onRowsChanged(). It appears that on the second render, updateCellCssStylesOnRenderedRows(addedHash, removedHash) is using a cached version of the row to reapply the style. An interesting note, the style is cleared for all rows that are hidden by the filter, but the unfiltered rows retain the style. So when I remove the filter, the rows that were hidden have the style removed, but the unfiltered rows are still highlighted.
A side note, I'm a total noob. Any help is greatly appreciated.
Update: in slick.dataview.js, syncGridCellCssStyles(grid, key) , I commented out storeCellCssStyles(grid.getCellCssStyles(key)); and achieved my desired result. I obviously don't want to edit the source code as my final solution, but hope this will help diagnose the problem. See result below:
function syncGridCellCssStyles(grid, key) {
var hashById;
var inHandler;
// since this method can be called after the cell styles have been set,
// get the existing ones right away
//storeCellCssStyles(grid.getCellCssStyles(key));
function storeCellCssStyles(hash) {
hashById = {};
for (var row in hash) {
var id = rows[row][idProperty];
hashById[id] = hash[row];
}
}
grid.onCellCssStylesChanged.subscribe(function(e, args) {
if (inHandler) { return; }
if (key != args.key) { return; }
if (args.hash) {
storeCellCssStyles(args.hash);
}
});
this.onRowsChanged.subscribe(function(e, args) {
if (hashById) {
inHandler = true;
ensureRowsByIdCache();
var newHash = {};
for (var id in hashById) {
var row = rowsById[id];
if (row != undefined) {
newHash[row] = hashById[id];
}
}
grid.setCellCssStyles(key, newHash);
inHandler = false;
}
});
}
if (theData.hasOwnProperty("#id1")) {
var myObj:Hello = new Hello();
textArea.visible = false;
panel.addChild(myObj);
} else if (theData.hasOwnProperty("#id2")) {
textArea.visible = false;
var vijay:MCQ = new MCQ();
panel.addChild(vijay);
}
When i click on the next item, the previous window is still visible. How can i destroy myObj. I am not able to do it through removeChild.
If panel only ever contains one object, you could use the following before adding the new one:
panel.removeAllChildren();
If there are a known number of "static" children in panel, you could conditionally remove the additional ones:
while (panel.numChildren > EXPECTED) {
panel.removeChildAt(panel.numChildren - 1);
}
The best option would be to hold a reference to the object you added so that you can remove it explicitly using removeChild(). If these alternatives won't work, perhaps you could explain your constraints.
I have a hidden field on my page
<input runat="server" type="hidden" id="selectedIndex" />
and it is being set by this bunch of code, an onclick event to a gridview's row:
var gridViewCtlId = '<%=GridView.ClientID%>';
var selectedIndex = '#<%=selectedIndex.ClientID%>';
var itemVisible = '<%=ItemVisible.ClientID%>';
var gridViewCtl = null;
var curSelRow = null;
var previousRowIndx = null;
window.onload = function showQuery()
{
if ($(selectedIndex).val() != undefined)
{
if ($(selectedIndex).val() != '')
{
var prevRowID = $(selectedIndex).val();
var prevRow = getSelectedRow(prevRowID);
prevRow.style.backgroundColor = '#1A8CD4';
}
}
}
function getGridViewControl(rowIdx)
{
if (gridViewCtl == null)
{
gridViewCtl = document.getElementById(gridViewCtlId);
}
}
function onGridViewRowSelected(rowIdx)
{
if (document.getElementById(gridViewCtlId).disabled == false)
{
var selRowCCA = getSelectedRow(rowIdx);
if (curSelRow != null)
{
var previousRow = getSelectedRow(previousRowIndx);
var CountIdx = previousRowIndx % 2;
if (document.getElementById(itemVisible) == null)
{
if (CountIdx == 0)
{
previousRow.style.backgroundColor = 'Silver';
}
else
{
previousRow.style.backgroundColor = 'White';
}
}
}
if (null != selRow)
{
previousRowIndx = rowIdx;
curSelRow = selRow;
selRow.style.backgroundColor = '#1A8CD4';
}
}
}
function getSelectedRow(rowIdx)
{
getGridViewControl(rowIdx);
if (gridViewCtl != null)
{
$(selectedIndex).val(rowIdx);
return gridViewCtl.rows[rowIdx];
}
return null;
}
This is what happens: When The page first loads, the hidden field is undefined, which it should be. When I click on a row and then click the 'select' button which then calls this:
GridView.Attributes.Add("disabled", "true");
The gridview becomes disabled (along with the select button) and another gridview comes up (which should happen depending on what is seleted in the first gridview). So now, here is the problem. When I click on a row in the gridview (I'm only talking about the initial gridview, not the secondary one which comes up, that's not an issue here), and click select, everything gets greyed out and most of the time, the selected row will highlight when the page loads (the other times for some reason it defaults to row #2). Then, say you click on row 4 then click on row 1 and then click select, for some reason row 4 will remain highlighted and row 4's data will then populate the second gridview, like you never clicked row 1. But if I click row 4 then click row 1 then click row 1 again, does it save. Does anyone know why that happens?
Also, I'm pretty much trying to disable the first gridview when select is hit so I do
GridView.Attributes.Add("disabled", "true");
rather than
GridView.Enabled = false;
If a user re-clicks the search button (another button located previously on the page which makes this gridview become visible), I would like the secondary gridview to become hidden, and the primary gridview (this one in question) to become re-enabled. But doing
GridView.Attributes.Add("disabled", "false");
when the search button is fired only disables the gridview, which is very weird. Now I know that the disabled field is not supported by any other browser except IE, and i only use it because I need to check if the gridview is disabled so a user cant click on another row after they've made their selection (which happens if I dont do the following:
if (document.getElementById(gridViewCtlId).disabled == false)
So could anyone let me know of another way of accomplishing that task? Thanks again in advance.
Some bits of info on disabled:
Browsers won't send any disabled control's value to the server. This is by definition.
Disabled field is supported by other browsers, but it uses a different model. Note list of supported browsers: http://www.w3schools.com/tags/att_input_disabled.asp (also how it is defined disabled='disabled').
Also see how it compares to the read-only: http://www.w3.org/TR/html401/interact/forms.html#h-17.12.2
Also note according to the standard its support its limited to certain elements. This is important, as you are applying it at an unsupported html element, which is also a likely cause of it not working in other browsers in your scenario. You can disable the supported control by using an script, getting the controls to apply it like $get("someClientID").getElementsByTagName("input");