I have a gridpanel and want to show a errortooltip on mouse hover as we see for textfields and combobox. Is there any inbuilt component to show this error styled tooltip for grid panel.
i am doing this to find validate based on the number of records in the grid panel.Please Help
There's nothing built-in to accomplish this, but you can still do it. Lucky for you, I had to do something like this not too long ago.
You'll need to use a column renderer. You'll also need to store the error message on the record itself, or have a way to access error messages by record. Your renderer should look something like this:
renderer: function(value, metaData, record){
if(/* record has error */){
metaData.tdCls += " x-form-invalid-field"; // Squiggly red lines
metaData.tdAttr = "data-errorqtip='This is my error message!'";
}
return value;
}
You may need to play around with styling and whatnot, but that is the gist of it. Also, you'll have to refresh your grid if the validity of your records changes, to make sure your tooltips say updated.
Related
Question
I'm working with Adobe Scene7 BasicZoomViewer and I'm looking for a way to tell the ZoomViewer to reset the zoom so that the user is no longer zoomed in on an image but instead will show the default "zoom" level.
What I've found
The closest thing I found to what I need is this reset property ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".
This looks close to something I need but it states that it will reset or preserve the aspect ratio when a new image has been inserted but I am not inserting new images.
Demo from Adobe
There is a button on the image that the API inserts into the page that resets the zoom level. Adobe provides a demo page that shows what I'm working with. If you look at the bottom left, the right-most button is the reset button. When clicked, it has to make some kind of API call and I need to figure out which one it is.
Edit
I've been able to find a minified version of the BasicZoomViewer and I am currently attempting to make sense of the code.
There is an event listener placed on the "Zoom Reset Button" that just simply calls a reset() method on line 274 in the uglified version of the file. Currently, I am trying to make sense of the file and figure out how to access this method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
I will be answering my own question. If someone finds a better way please feel free to answer as well.
tldr;
Create a variable to hold the instance of your s7viewers.BasicZoomViewer() and inside of that you can access the event handlers and much more.
Example of calling the reset zoom handler
// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
containerId: 's7viewer',
params: {
asset: assetUrl,
serverurl: serverUrl
})
// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()
Explanation
After digging through the minified code that was uglified I found an event listener on the s7zoomresetbutton DOM class name, or perhaps it's watching for the ID of that DOM element which is the same ID as the container div for your S7 BasicZoom Viewer plus some added text to make this ID unique. For example, if the container div is s7viewer then the reset zoom button will have an ID of s7viewer_zoomresetbutton.
Now, going through the code I found this event listener which let me know there must be some way to call the zoomReset() method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
In the code above, the value of c is this or in other words it's the instance of your S7 BasicViewerZoom and in my case I have multiple depending on how many images I need to zoom on.
When instantiating the s7viewers class you can then reference that instance later and access the event handlers on each button and other properties and methods.
From there it was just looking through the object returned from the instance and calling the handler for the reset button.
Is there a feature in Xamarin Forms which will point to (scroll up) to a label which became visible after validation? What I am trying to do is: if required field is blank I display label under it - saying that it needs to be filled out, I have a scrollable page and when label becomes visible I want to make it show that label by scrolling the page to desired location, so user will know what is missing.
Thank you.
You have two distinct points to implement:
first, your entry validation: there are many ways to do it, but you can take a look at this fully documented sample from Xamarin: Entry validation sample
Then next, you have to scroll to the (first) invalid entry control. That means that all your entries must be embedded into a parent Scrollview control. Then you have to find the first invalid UI element to scroll to (make your own "business" method to find this control).
Then just call the Scrollview scroll method. An example sample code could be:
// in your xaml.cs
//
public Task FocusInvalidEntryAsync()
{
var firstInvalidEntry = FindInvalidEntries().FirstOrDefault();
if(firstInvalidEntry != null)
{
return parentScrollView.ScrollToAsync(firstInvalidEntry, ScrollToPosition.MakeVisible, true);
}
return Task.FromResult(true);
}
The FindInvalidEntries() method is your own method to determine wich UI entry is invalid (maybe it needs your ViewModel).
Then ScrolltoAsync() is a method that will scroll the parent scrollview to the desired control. The last parameter indicates if you want to display the scroll animation.
Tell me if it's clear !
I am using modalpopup to enter some value in a textfield. After the value is selected in the modalpopup view, the modalpopup is closed and the value takes the appropriate value. Even if the value is displayed in the textfield, the textfield1.text returns an empty string. When I see the source code (html), I see that even the textfield isn't displaying anything; it hasn't really had this value input, because the appropriate html input field hasn't got a value yet.
This is the code I use to fill this textfield:
function CloseRequestModal(s)
{
document.getElementById('<%=txtRequest.ClientID%>').value = s;
var mpu = $find('<%=ModalPopupExtender3.ClientID%>');
mpu.hide();
}
Please help.
I would need to see source HTML cause it looks like you have template language mixed into your javascript but perhaps instead of "textfield1.text" you use "textfield1.value"?
Additionally, you would need to view "generated" source (with a browser plugin) or inspect the node with web inspector on safari/chrome or firebug on firefox in order to see the change that you made with javascript.
i fixed this problem in an alternate way.
even if the value is there (in the textfield), none of the events is fired, to let know the browser / compilator that the value really exists.
so i decided, despite editing the value of the textfield, i store this value in the session too. in this case, the value is displayed for user needed in the interface, and on the other hand i use the value that i stored in the session.
Flex 3 question:
I trying here to avoid having to bind resources to all my components labels ( ie a button) and find a way to have this automated.
Problem:
It corrupts the layout in design mode to bind directly in the mxml label="{resourceManager.getString('myResources', 'submit')}" and makes the design view useless. but when declaring bindings elsewhere, in actionScript or via a bind tag, it is counter productive and prone to many errors and miss.
Proposition:
I would like to create my own button that automatically invoke resources to localize a button label. So the author puts "Submit" in the mxml description of my button, and when running it would take the value of the label ie "submit" and use resourceManager.getString('myResources', 'submit').
but I can't find the way to override the set label function, Is it possible if yes how? else how can I go about it?
Maybe I am missing an essential process here that would make the use of resources more elegant, as well as how to override such thing as a button's label.
Thanks for your advices.
Create a component called MyButton, extending Button. Then use this:
override public function set label(value:String):void {
super.label = resourceManager.getString('myResources', value) || value;
}
Assuming the resource manager returns "null" or "undefined" this will work, and will only replace the value if it exists in "myResources".
If you don't want to override every component you need to do this with, then you can add a FlexEvent.CREATION_COMPLETE event on every component. Then use a single generic function to do your label localization.
Is there any code or custom options available to achieve the following :
1> When an error occurs in a text box, the validation shows the error. Forces the user to remove the error and only then proceed to complete remaining text inputs. KEEPS the mouse focus on the Text Box.
I have used built in mx:Validator tags, but it does not coerce the user to remove the error. Instead, user can easily go ahead without rectifying the error.
2> Can the error message which generally appears as a tooltip when mouse focus moves over the text input with the error, REMAIN until the user removes error and not just be displayed on mouse hover action?
You can customize your ToolTips to show your Error. Check this link to customize your tooltip, to show your error in ToolTips
For #2, check out http://aralbalkan.com/1125.
Unfortunately, it is a lot of hassle if you have multiple/large forms. It is unfortunate flex doesn't provide more styling options for the error tooltip.
#1 seems to be a bad UI design. While you may not allow them to submit a form unless they enter valid information, they should be able to navigate around the form freely and fill in the information as they choose. Just my opinion.
A solution to question 1) is as follows;
Use the Validator.validateAll static method to check that all form items are valid before allowing the form to be submitted. The following snippet is taken from a good flex example which shows this
private function resetForm() :void
{
btnLogin.enabled = false;
}
private function validateUs() :void
{
btnLogin.enabled = (Validator.validateAll([val1,val2]).length == 0);
}
The complete example is here
http://idletogether.com/easy-form-validation-and-submit-button-enable-disable-in-flex-3/