on edit the bit should be true and also context.clicked should also work
this is not working
Clicked="#(()=> OnEditBtn(context))"
First of all, I am not quite sure what is your problem, you could try to expand on your question.
Secondly if your problem is not showing some component after changing variable, try to call StateHasChanged() to redraw component, if your OnEditBtn function is the bound function in <Button Clicked=#..., could be the issue.
But I am just guessing with what I have to work with.
Related
This is may be very noobish and a bit embarrassing but I am struggling to figure out how to make checkboxes 'checked' using CSS?
The case is that if a parent has a class setup (for example) I'd like to have all the checkboxes having setup as parent to be checked. I'm guessing this is not doable in pure CSS, correct? I don't mind using JS but am just very curious if I could toggle the state of the checkboxes along with that of their parent (by toggling the class).
Here's a fiddle to play around with.
A checkbox being "checked" is not a style. It's a state. CSS cannot control states. You can fake something by using background images of check marks and lists and what not, but that's not really what you're talking about.
The only way to change the state of a checkbox is serverside in the HTML or with Javascript.
EDIT
Here's a fiddle of that pseduo code. The things is, it's rather pointless.
It means you need to adding a CSS class to an element on the server that you want to jQuery to "check". If you're doing that, you might as well add the actually element attribute while you're at it.
http://jsfiddle.net/HnEgT/
So, it makes me wonder if I'm just miss-understanding what you're talking about. I'm starting to think that there's a client side script changing states and you're looking to monitor for that?
EDIT 2
Upon some reflection of the comments and some quick digging, if you want a JavaScript solution to checking a checkbox if there's some other JavaScript plugin that might change the an attribute value (something that doesn't have an event trigger), the only solution would be to do a simple "timeout" loop that continuously checks a group of elements for a given class and updates them.
All you'd have to do then is set how often you want this timeout to fire. In a sense, it's a form of "long polling" but without actually going out to the server for data updates. It's all client side. Which, I suppose, is what "timeout" is called. =P
Here's a tutorial I found on the subject:
http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
I'll see if I can whip up a jQuery sample.
UPDATE
Here's a jsfiddle of a timeout listener to check for CSS classes being added to a checkbox and setting their state to "checked".
http://jsfiddle.net/HnEgT/5/
I added a second function to randomly add a "checked" class to a checkbox ever couple of seconds.
I hope that helps!
Not possible in pure css.
However, you could have a jQuery event which is attached to all elements of a class, thereby triggering the check or uncheck based on class assignments.
Perhaps like this:
function toggleCheck(className){
$("."+className).each( function() {
$(this).toggleClass("checkedOn");
});
$(".checkedOn").each( function() {
$(this).checked = "checked";
});
}
I'm working on an app that, from the Main.mxml, opens one or many Window.mxml instances. When it's done I want all windows to be chromeless so the custom controls need to work.
In Main I've added applicationComplete="init();" so the init function gets ran, which contains clickhandlers, which makes the buttons work.
However, this way of running an init function doesn't seem to be valid for an mx:Window.
I can cheat by not using a clickhandler for the minimize and close buttons with a click="this.minimize();", but I don't know of a way like this to make the move work because it's a MOUSE_DOWN event.
Question 1:
Is there a way to have such an init function in an mx:Window?
Question 2:
What's a good way to make the buttons on the Window instances all work?
ps. If you think question 2 needs a separate post please let me know, they're so closely related and seemingly simple I couldn't decide.
Example code:
Main.mxml - http://pastebin.com/0HHVpkb8
Window.mxml - http://pastebin.com/g5TWuLYk
Window doesn't have an applicationComplete event, but it does have windowComplete event. Perhaps that would work for you. There is a list if Window events here.
The Following code seems to only be working when i have editable="true" on the Advanced Data Grid. But I don't want it it be editable. Anyone have any idea or experience with this issue?
The docs don't say anything about it needing to be editable, and i dont see why it should need to be.
http://docs.huihoo.com/flex/4/mx/events/DataGridEvent.html#ITEM_FOCUS_IN
a_data_list.addEventListener(AdvancedDataGridEvent.ITEM_FOCUS_IN, clickedRow);
public function clickedRow(event:AdvancedDataGridEvent):void
{
trace("datagrid line was clicked");
}
You need to listen to the "change" (ListEvent.CHANGE) event if you want to know when rows are selected/deselected.
Actually, sorry christophe, the proper solution to the issue is using
ListEvent.ITEM_CLICK
Because for example if the highlighted item is already highlighted it will not trigger the function because it does not "change" what does work perfectly for this issue though is item click. But thanks for pointing me in the right direction
I've got a project I'm working on where I need to put a RadioButton inside a ListView, and have them all have the same GroupName. (can't use RadioButtonList, long story).
Anyway, this seems to be a well known bug in .NET, so I've implemented the solution found here:
ASP.NET RadioButton messing with the name (groupname)
This works perfectly, but with one small bug which undoubtedly will come back to bite me. If I click one radio button, and then click another while the javascript function is still running and has not completed; I can get 2 radiobuttons in the same group selected.
Any ideas? If you need clarification; leave me a comment and I'll update my post.
EDIT: I believe I fixed my own issue here. See my posted answer below.
Would something like this work?
if (!rbClicked)
rbClicked=True;
runJavascript();
rbClicked=False;
I admit I didn't do alot of research, but this is how I've usually solved this type of problem.
Turns out I was misguided here.
Later on in the page lifecycle; I was adding an additional onclick event that was overwriting the previous value.
In the following example:
var radiobutton = new System.Web.UI.WebControls.RadioButton();
radiobutton.Attributes.Add("onclick", "test1");
radiobutton.Attributes.Add("onclick", "test2");
the onlcick attribute is set to "test2"; test1 is lost.
I ended up fixing it by appending to the existing attribute; see below:
radiobutton.Attributes["onclick"] = string.Format("{0};{1}", radiobutton.Attributes["onclick"], "My Second Script");
This works without issue.
First and foremost, I apologize for any vagueness in this question. At this point, I'm simply trying to get some new ideas of things to try in order to diagnose this bug.
Anyway, the problem I'm having is with an application that's using a custom moduleloader. That moduleloader has been compiled into an swc and the moduleloader is being instantiated via its namespace. This all works perfectly fine. The problem I'm encountering is specific to mx:button controls used within modules. For whatever reason, their labels are being truncated so, for example, Sign In is showing up with an ellipsis, as Sign ...
After quite a bit of fooling around I have been able to establish the following:
This problem only seems to occur within modules. If a button control is used in the main mxml, the label does not get truncated.
The button control whose label is being truncated does not have a width specified (setting its width to 100% or a specific pixel width doesn't fix the issue)
The button control is using the default padding (messing with the padding by setting left and right to 5 or any other value doesn't help matters either).
We are not using any embedded fonts so I've ruled that out as a possibility as well.
mx:CheckBox and mx:LinkButton are equally impacted by this problem although mx:CheckBox also seems to not want to show its checkbox, it just shows the truncated label.
A potential side affect of this is that attaching a dataprovider to mx:ComboBox causes the combobox control to throw a drawing error but I'm not entirely certain that it's related to the above problem.
One interesting thing I did find while perusing the net for an answer was a mention of fontContext and its relationship to IFlexModuleFactory. There's no specification for fontContext within our implementation of moduleloader so I'm not entirely certain if this could be the issue. In any case, if anyone has any ideas, it would be hugely appreciated. On the other hand, if you know exactly what ails me and can provide me with an answer, I might just wet myself with excitement. It's late. I'm tired. I NEED my Flex app to play nice.
Thanks in advance,
--Anne
Edit: To clarify what I'm looking for with this question, I really just need to know the following:
Could this issue be caused by a namespace conflict?
What else can potentially override the default behavior of labels if no CSS has been implemented?
Has anyone encountered a problem with inheritance being lost while using a custom implementation of moduleloader?
Has anyone encountered this problem or a similar problem with or without using moduleloader?
I'm not sharing any code with this question simply because I'd have to share the entire application and, unfortunately, I can't do that. Again, I'm not looking for the end all, be all solution, just some suggestions of things to look out for if anyone has any ideas.
I've been dealing with this issue myself, off and on and in various forms, for a year, and while I haven't figured out just what's causing it yet, there's clearly a mismeasurement happening somewhere along the line.
What I have been able to to, though, is work around it, essentially by subclassing button-type controls (in my case, Button, LinkButton, PopUpButton, et. al.) and assigning their textField members instances of a UITextField extension whose truncateToFit element simply returns false in all cases:
public class NonTruncatingUITextField extends UITextField
{
public function NonTruncatingUITextField ()
{
super();
}
override public function truncateToFit(s:String = null):Boolean
{
return false;
}
}
The custom component just extends Button (or whatever other button-type control is the culprit -- I've created a half-dozen or so of these myself, one for each type of control), but uses a NonTruncatingTextField as its label, where specified by the component user:
public class NonTruncatingButton extends Button
{
private var _truncateLabel:Boolean;
public function NonTruncatingButton()
{
super();
this._truncateLabel = true;
}
override protected function createChildren():void
{
if (!textField)
{
if (!_truncateLabel)
textField = new NonTruncatingUITextField();
else
textField = new UITextField();
textField.styleName = this;
addChild(DisplayObject(textField));
}
super.createChildren();
}
[Inspectable]
public function get truncateLabel():Boolean
{
return this._truncateLabel;
}
public function set truncateLabel(value:Boolean):void
{
this._truncateLabel = value;
}
}
... so then finally, in your MXML code, you'd reference the custom component thusly (in this case, I'm telling the control never to truncate its labels):
<components:NonTruncatingButton id="btn" label="Click This" truncateLabel="false" />
I agree it feels like a workaround, that the component architecture ought to handle all this more gracefully, and that it's probably something we're both overlooking, but it works; hopefully it'll solve your problem as you search for a more definitive solution. (Although personally, I'm using it as-is, and I've moved on to other things -- time's better spent elsewhere!)
Good luck -- let me know how it works out.
I've used the custom button and link button class solutions and still ran into problems - but found a workaround that's worked every time for me.
Create a css style that includes the font you'd like to use for you label. Be sure to check 'embed this font' right under the text selection dropdown. Go back and apply the style to your button (or your custom button, depending on how long you've been bashing your hear against this particular wall), and voila!
Or should be voila...
I just came across this issue and solve it this way:
<mx:LinkButton label="Some label"
updateComplete="event.target.mx_internal::getTextField().text = event.target.label"
/>;
I've had some success preventing Flex's erroneous button-label truncation by setting labelPlacement to "bottom", as in:
theButton.labelPlacement = ButtonLabelPlacement.BOTTOM;
Setting the label placement doesn't seem to help prevent truncation in some wider button sizes, but for many cases it works for me.
In cases where you can't use a bottom-aligned button label (such as when your button has a horizontally aligned icon), janusz's approach also seems to work. here's a version of janusz's .text reassignment technique in ActionScript rather than MXML:
theButton.addEventListener(FlexEvent.UPDATE_COMPLETE, function (e:FlexEvent):void {
e.target.mx_internal::getTextField().text = e.target.label;
});
The preceding code requires you to import mx_internal and FlexEvent first, as follows:
import mx.events.FlexEvent;
import mx.core.mx_internal;
And here are the results…
Before (note truncation despite ample horizontal space):
After:
The only downside to this approach is you lose the ellipsis, but in my case I considered that a welcome feature.