I have a Flex ComboBox that gets populated by a dataprovider all is well...
I would now like to add a default " -- select a item --" option at the 0 index, how can I do this and still use a dataprovider? I have not seen any examples of such, but I can't imagine this being hard...
If you don't need the default item to be selectable you can use the prompt property of ComboBox and set the selectedIndex to -1. That will show the string you set propmt to as the selected value until the user chooses another. It will not appear in the list of options, however.
I came across this problem today and wanted to share my solution.
I have a ComboBox that has an ArrayCollection containing Objects as it's dataprovider. When the application runs, it uses a RemoteObject to go out and get the ArrayCollection/Objects. In my event handler for that call I just have it append another object to the beginning of the ArrayCollection and select it:
var defaultOption:Object = {MyLabelField: "Select One"};
myDataProvider.addItemAt(defaultOption, 0);
myComboBox.selectedIndex = 0;
This is what my ComboBox looks like for reference:
<mx:ComboBox id="myComboBox" dataProvider="{myDataProvider}" labelField="MyLabelField" />
The way I've dealt with this in the past is to create a new collection to serve as the data provider for the combobox, and then I listen for changes to the original source (using an mx.BindingUtils.ChangeWatcher). When I get such a notification, I recreate my custom data provider.
I wish I knew a better way to approach this; I'll monitor this question just in case.
This can be used following code for selected default value of combobox
var index:String = "foo";
for(var objIndex:int = 0; objIndex < comboBox.dataProvider.length; objIndex++) {
if(comboBox.dataProvider[objIndex].label == index)
{
comboBox.selectedIndex = objIndex;
break;
}
}
<mx:ComboBox id="comboBox" dataProvider="{_pageIndexArray}" />
Related
I am using view stack...so when view change like when we move from one page to another hide event is dispatched.So i am saving the information of last page in hide event before i go to next page.but thing is that if i change nothing still change on view hide event is invoked nd call go to backend...i just want do call only if sumthing change in the view..like sum text value...So i have two options
use event listener on each component if sumthing change its make the flag true...nd hide event check, if flag is true send call to backend.
event listener at container level ..if sumthing change in child componenet through bubbling container knows if sum event is dispatched.nd makes the flag true.
I have doubt with container...
Can i use container, and how?
Reason why I can't use container?
What are the pros and cons either way?
I would recommend using a dataProvider with the ability to compare them. For instance, if you are changing things with textinputs, you could basically do something like this:
[Bindable]
private var myDataProvider:Object = new Object();
private function creationCompleteHandler():void {
myDataProvider.updated = false;
myDataProvider.defaultValue = 'default';
myDataProvider.defaultValueTwo = 'default';
}
etc.
Then, in your mxml, you can have something like this:
<mx:TextInput id="myText" text="{myDataProvider.defaultValue}" change="myDataProvider.defaultValue=myText.text; myDataProvider.updated=true;" />
Lastly, in your hide event, you can do the following:
private function hideEventHandler( event:Event ):void {
if( myDataProvider.updated ){
// Call your RemoteServices (or w/e) to update the information
}
}
This way, when anything changes, you can update your dataProvider and have access to the new information each time.
Hope this helps!
I've used an approach similar to your first option in a couple of my past projects. In the change event for each of my form's controls I make a call to a small function that just sets a changesMade flag to true in my model. When the user tries to navigate away from my form, I check the changesMade flag to see if I need to save the info.
Data models are your friend!
If you get in the habit of creating strongly typed data models out of your loaded data, questions like this become very basic.
I always have a key binding set to generate a code snipit similar to this...
private var _foo:String;
public function get foo():String
{
return _foo;
}
public function set foo(value:String):void
{
if(_foo == value)
return;
var oldVal:String = _foo;
_foo = value;
this.invalidateProperty("foo", oldVal, value);
}
If your data used getters/setters like this, it would be very easy to validate a change on the model level, cutting the view out of the process entirely.
I have sort of a table with a radio-button column. I managed to make radio-button column work dynamically inserting into a cell (div if matter). But, on postback innerHtml hasn't been updated with "checked" attribute.
Could you give me an idea how can I find out (on the server) if radio-button has been checked?
More info: This is on user control inside update panel.
This would be good post on my topic, still doesn't help
Any reason you cannot use a standard asp:RadioButton and use javascript to ensure it is mutually exclusive. I have done this before by adding a custom attribute to the radiobutton and then using a js function to uncheck all items with that attribute and then check the selected one. This works around the IE issue which prevents the groupname attribute from working on radioboxes that are in different containers.
radioButton.InputAttributes.Add("ClientGroupName", "grpRadioList");
radioButton.InputAttributes.Add("onclick",
string.Format(
"javascript:radiobuttonToggle('{0}','ClientGroupName','grpRadioList');"
,radioButton.ClientID));
and use the following JS to uncheck all radios and then check the one you want.
Note i used InputAttributes instead of Attributes as the radiobutton is wrapped inside a span tag so InputAttributes is for items added to the actual input control rather than the span.
function radiobuttonToggle(selectedRB, attribName, attribValue)
{
var objRadio = document.getElementById(selectedRB);
for(i = 0; i < document.forms[0].elements.length; i++)
{
elm = document.forms[0].elements[i];
if (elm.type == 'radio')
{
if(elm.getAttribute(attribName) == attribValue)
elm.checked = false;
}
}
objRadio.checked = true;
}
You can then expose radioButton.Checked as a property in your CS file and reuse this as a control.
Check Form.Request("radio-name") != null
You only get a non-null value when it's been checked.
Make sure your page elements are being rebuilt correctly on postback. Any binding process that inserted the radio buttons the first time around will have to be re-run before you can access them the second time.
Here is a working example, first I add radios to my webform by the method you linked :
function addRadio()
{
try{
rdo = document.createElement('<input type="radio" name="fldID" />');
}catch(err){
rdo = document.createElement('input');
}
rdo.setAttribute('type','radio');
rdo.setAttribute('name','fldID');
document.getElementById('container').appendChild(rdo);
}
Then at code behind I used only the code below to get the radio's value :
string value = Request["fldID"];
So, be sure you're trying to get the name of the radio buttons at server side. You should use name attribute at server side, not id.
I am trying to add a checkbox in a listview with value as ids of the records from the database so I can allow the user to check the ones they want to delete and when they click the delete button I can get value collection of checkbox with request.form.
My problem is, because checkbox in a listview ASP.NET renders the listview name into the name property of the checkbox, it prevents me to do request.form["checkboxname"].
I don't want to use Listviews delete commands but simply use request.form to get the collection of checked values.
How can I set name of the htmlinput checkbox so .NET doesn't change it in render time?
I have tried:
ListViewDataItem dataItem = (ListViewDataItem)e.Item;
HtmlInputCheckBox _CheckBoxDelete = (HtmlInputCheckBox)e.Item.FindControl("CheckBoxDelete");
_CheckBoxDelete.Visible = true;
_CheckBoxDelete.Value = DataBinder.Eval(dataItem.DataItem, "id").ToString();
_CheckBoxDelete.Name = "deletechecked";
But still it renders like:
<input name="PmList$ctrl0$CheckBoxDelete" type="checkbox" id="PmList_ctrl0_CheckBoxDelete" value="3" />
This is happening because ListView is a Naming Container. You can get around this in a couple of ways, but they all boil down to the choice of:
Rendering the HTML you want.
Pulling out the checked items in a different way.
The former is doable, but you'll likely loose a lot of ASP.NET's built in functionality. I'd advise against it unless you're deeply familiar with the control life cycle.
You've got everything you need for the pulling the values out in a way ASP is expecting:
HtmlInputCheckBox _CheckBoxDelete = (HtmlInputCheckBox)item.FindControl("CheckBoxDelete");
You just need to wait for the control hierarchy to be populated, and then loop over the ListView.Items looking for the checkboxes. Your "Delete" button's event handler is probably a good place to call this from.
Incidentally, why are you using a HtmlInputCheckbox, rather than a CheckBox?
I have sorted it out with:
string idCollectionTodelete = string.Empty;
foreach (string x in Request.Form)
{
if (x.IndexOf("CheckBoxDelete") > -1)
{
idCollectionTodelete += Request.Form[x] + ",";
}
}
new DB().DeleteUserPm(
ActiveUsername(), subdomain, idCollectionTodelete.TrimEnd(','));
It is not an ideal solution but it does work for me.
I do this
List<HtmlInputCheckBox> chkDeleteContacts = new List<HtmlInputCheckBox>();
foreach (RepeaterItem item in rptrFamilyContacts.Items)
{
chkDeleteContacts.Add((HtmlInputCheckBox)item.FindControl("chkDeleteContact"));
}
foreach(HtmlInputCheckBox chkDeleteContact in chkDeleteContacts)
{
//Delete Contact
if(chkDeleteContact.Checked)
blnStatus = BusinessUtility.DeleteConsumerContact(LoginConsumerID, chkDeleteContact.Value);
}
Slightly easier in my opinion
I have a DataGridColumn with an ItemRenderer that extends the Box component. The default display is a Text component. When the user clicks on the text component, I change the State to add a PopUpMenuButton child, and make the Text component invisible. This works fine. However, I only want to allow one PopUpMenuButton to be visible in the DataGrid at a time (similar to how an itemEditor works). I don't want to use an itemEditor, because I've run into too many problems trying to get that to work in this instance.
I am implementing IDropInListItemRenderer in my itemRenderer, in order to access the listData property, which will give me the owner (DataGrid), but I don't know how to "turn off" the "editing" state in other itemRenderers in the DataGrid.
How can I accomplish this?
Thanks.
Here we go. I simply added an Listener for Change Events in the listData.owner - if it is triggered, I update the currentState to null. Works like a charm. Much easier than trying to access the itemRenderers in the column and resetting them all. Better on performance too.
private function label_clickHandler():void
{
showEditor();
}
private function showEditor():void
{
this.currentState = "editingMode";
var ownerListBase:ListBase = ListBase(listData.owner);
ownerListBase.addEventListener(ListEvent.CHANGE, ownerListBase_changeHandler);
}
private function ownerListBase_changeHandler(event:ListEvent):void
{
this.currentState = null;
var ownerListBase:ListBase = ListBase(listData.owner);
ownerListBase.removeEventListener(ListEvent.CHANGE, ownerListBase_changeHandler);
}
OK I have a ComboBox, the dataProvider is an array of objects with label properties that give the ComboBox the list of options.
Is there a way I can have a variable like mySelectedItem, and bind the ComboBox's selectedItem to it so that if it changes, the ComboBox's selectedItem will change to whatever it is?
I hope this makes sense.
Thanks!
Yes, ComboBox's selectedItem property is bindable.
It would go something like this:
<mx:ComboBox selectedItem="{mySelectedItem}">
</mx:ComboBox>
In your AS:
[Bindable]
var mySelectedItem:Object;
Changes to mySelectedItem should show up in ComboBox. You may get errors if the item referenced by mySelectedItem does not exist in the ComboBox's dataProvider.
On the surface, it's as simple as:
<mx:ComboBox id="myComboBox"
dataProvider="{myDataProvider}"
selectedItem="{defaultItem}"/>
When you set defaultItem (make sure it is [Bindable]) to one of the items in the data provider, it will update the control.
But there are problems with this approach. Unless currentDefaultItem always changes AFTER myDataProvider, the binding to dataProvider may undo the selection, reverting to the default (first item in the list).
One way around this is to force selectedItem to be rebound after dataProvider, by including dataProvider in the call providing the selectedItem.
<mx:ComboBox id="myComboBox"
dataProvider="{myDataProvider}"
selectedItem="{getSelectedItem(myComboBox.dataProvider, defaultItem)}"/>
What this does is ensure selectedItem will be rebound when either currentDefaultItem changes, or after the dataProvider changes. I'd be interested in other solutions myself.
Use an event listener for the Change event and do your processing there.
// update a label item's text with that of the Combobox's selectedItem
private function changeEvt(event:Event):void {
label.text =event.currentTarget.selectedItem.label + " " +
}
or, you could do something like this if you don't mind extending ComboBox;
This is pseudocode (sorry, identification of matches depends on the object type) - but you get the idea...
public class IndexRetainingComboBox extends ComboBox
{
public function IndexRetainingComboBox()
{
super();
}
override public function set dataProvider(value:Object):void
{
var originalSelection:Object = this.selectedItem;
super.dataProvider = value;
var newIdx:uint = [find originalSelection idx in combobox or return 0 ]
this.selectedIndex = newIdx;
}
}
I know this is how its described in the documentation.
As in a change to the selectedItem will fire the change listener. However for me, this does not happen. Anyone else encounter the same behavior?
This looks like a great approach: make the value attribute writeable:
http://flex.sys-con.com/node/312098