I'm trying to bind data inside a Simple form after a Omodel.read, this is my code:
oModel.read("/" + sObjectPath + "/to_AL", {
success: function(oData2, oResponse2) {
var oModelJson = new sap.ui.model.json.JSONModel(oData2.results[0]);
that.getView().byId("SimpleFormAnalisi").setModel(oModelJson);
}
}
oData2.results[0] contains the data I want to bind, SimpleFormAnalisi is the name of my SimpleForm
<form:SimpleForm id="SimpleFormAnalisi"
editable="false"
layout="ResponsiveGridLayout"
labelSpanXL="4"
labelSpanL="4"
labelSpanM="12"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="0"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsXL="2"
columnsL="2"
columnsM="2"
singleContainerFullSize="false">
<form:content>
<Label text="SST" textDirection="RTL"/>
<Text text="{sst}" />
I expected into {sst} the value, but is empty.
any help?
best regarsd
Nearly everything you are doing in your example is correct. What might be the problem is the databinding in your Text element.
Please take a look at the docs, to make sure that your binding syntax is right. JSON models require a / binding, which you don't have.
Related
I'm new to vaadin. I came across with a bug that full name is not visible in twin-column component's values. I have very long names inside the left side of the twin-column. I increased the width of the component much as I can. But still some lines are there that not visible full name.
I tried to add some css, even that didn't work.
.v-select-twincol-options .v-select-twincol-break-word{word-wrap: break-word;}
I tried with this css line. Any wrong in here? Or any idea to solve this. Please help me on this..
Thank you in advance.
private TwinColSelect createTemplateSelectTwinColumn()
{
TwinColSelect twinColSelect = new TwinColSelect("Related Templates");
twinColSelect.setNullSelectionAllowed(true);
twinColSelect.setMultiSelect(true);
twinColSelect.setImmediate(true);
twinColSelect.setSizeFull();
Collection<File> templates = getTemplates();
Collections.sort((List<File>) templates, new Comparator<File>()
{
#Override
public int compare(final File f1, final File f2)
{
return f1.getName().compareTo(f2.getName());
}
});
for (File file : templates)
{
twinColSelect.addItem(file.getNodeId());
twinColSelect.setItemCaption(file.getNodeId(), file.getName());
}
return twinColSelect;
}
Method where I'm creating the twinColumn inside a FormLayout
Vaadin's TwinColSelect eventually results in two standard HTML option list controls in the DOM; see the DOM of this example: http://demo.vaadin.com/book-examples/book/#component.select.twincolselect.basic
word-wrap is, however, not possible on option list items.
Consider creating your "own" TwinColSelect from two Vaadin tables. Vaadin tables are much more flexible regarding CSS styling.
I have a RadGrid with a filtercontrol on it. The grid fits the size of the window, but certain views have quite a few columns and when the columns get shrunk down, the filter controls don't resize to fit. Is there any way to set those filter controls to auto fix within the width of the column?
In latest RadGrid, there is an easy fix for this. Just set the filter control width in your markup or code-behind as shown below.
Set Filter Control width in markup
<telerik:GridBoundColumn DataField="ProductName" FilterControlWidth="80%"
HeaderText="Product Name" UniqueName="ProductName" HeaderStyle-Width="130px"
AllowFiltering="true"></telerik:GridBoundColumn>
Set Filter Control Width in code-behind
boundColumn.FilterControlWidth = Unit.Percentage(80);
As shown in the screenshot, the filter textbox width is beyond the header column. To set it within limit you can use the following JQuery code.
$(document).ready(function fn() { $(".riTextBox").css("width", "80%"); });
In this 'riTextBox' is css class of filter textbox generated by RadGrid. You can set the width as you need.
Last time I checked, the size of the filter button was 20.16px, so you can use put this in your css:
.RadGrid .rgFilterBox {
width: calc(100% - 20.16px);
}
You might take a look at column editors. I think they'll let you control the style of controls nested in the grid from outside of the grid.
<telerik:GridBoundColumn ColumnEditorID="TextBoxColumnEditor" ... />
<telerik:GridTextBoxColumnEditor ID="TextBoxColumnEditor" runat="server">
<TextBoxStyle Width="500" />
</telerik:GridTextBoxColumnEditor>
Here's a link that explains it in detail:
http://www.telerik.com/help/aspnet/grid/grdstylingthroughdeclarativecustomeditors.html
I have faced this issue and didn't find the 80% width solution sufficient. As your column gets wider, the gap between the filter button and the text box grows and it isn't a very clean solution. I have a mostly working solution for the problem that uses jQuery to create appropriate wrappers around the elements. It currently doesn't work well for situation where you are using a column that would filter for a date range (uses two date filters in the Telerik controls), but other than that has served me well.
function fixRadGridFilterBar() {
jQuery('.rgFilterRow > td').each(function () {
var cell = jQuery(this);
var isDate = false;
if (cell.children().length) {
var filterBox = cell.find('.riTextBox');
if (filterBox.length) {
if (cell.find('.RadPicker').length){
filterBox = cell.find('.RadPicker');
filterBox.css("width", "100%");
isDate = true;
}
}
if (!filterBox.length) {
filterBox = cell.find('.rgFilterBox');
}
if (filterBox.length) {
var filterWidth = cell.find('.rgFilter').outerWidth();
var padRight = isDate ? 0 : parseInt(cell.css('padding-right'));
var marginRight = parseInt(cell.css('margin-right'));
var filterPadding = (isNumber(padRight) ? padRight : 0) + (isNumber(marginRight) ? marginRight : 0);
cell.css('position', 'relative');
cell.children().wrap("<div class='filter-input'></div>");
filterBox.parent().css('float', 'left').css('width', '100%');
filterBox.wrap('<div></div>');
filterBox.parent().css('padding-right', (filterWidth + filterPadding).toString() + 'px');
cell.find('.rgFilter').parent().css('width', filterWidth.toString() + 'px').css('position', 'absolute').css('right', '0');
cell.children().wrapAll("<div style='position:relative;'></div>");
}
}
});
jQuery('.RadGrid > table').each(function () {
jQuery(this).wrap('<div class="rgHeaderWrapper"></div>');
});
}
var newParagraph : ParagraphElement = new ParagraphElement();
var icon : InlineGraphicElement = MY_ICON;
// icon.toolTip = "boo" ????
newParagraph.addChild( icon );
I want a specific toolTip for "icon". I have read about using HTML and rollOver and rollOut (e.g. Thanks, Mister), but I'm building this as part of a larger text block; it's difficult to switch from incremental objects to HTML in the middle.
If I cannot set an event on the icon, can I create an HTML bit in ActionScript as part (but not all) of a paragraph ?
Cheers
I just came across the same problem.
The easiest solution i found was wrapping my InlineGraphicElement in a LinkElement.
The LinkElement already dispatches mouse events.
The problem (as I'm sure you found out) is that text flow elements are not display objects, and so do not implement the normal display object behavior.
What you need to do is create a custom InlineGraphicElement that attaches the event listeners you need, then dispatch an event off of the textFlow instance so it can be read in somewhere in your display object hierarchy (or whatever your method of choice is to target that event).
You can see a good example of how to add mouse interaction by looking at the source to the LinkElement (see the createContentElement function).
Unfortunately the InlineGraphicElement is marked final, so you will need to duplicate it's functionality rather then extend it. Just make sure to use the custom graphic element in your code in lieu of the normal one.
Best of luck!
edit
Just in case the point was lost, the idea is that you can capture the mouse event somewhere in your app by attaching a listener to the textFlow, then programmatically create and position a tool tip over the element using the standard methods to find the bounds of a text flow element.
You can do some hit-testing when the mouse is over the textflow component.
Suppose you have some textflow like this:
<s:RichEditableText width="100%" height="100%" mouseOver="toggleTooltip()">
<s:textFlow>
<s:TextFlow>
<s:p>
<s:span>Some text before</s:span>
<s:img id="myImg" source="myImg.png" />
<s:span>Some text after</s:span>
</s:p>
</s:TextFlow>
</s:textFlow>
</s:RichEditableText>
And you listen for mouseOver events on the entire textcomponent.
Then to test if the mouse is over your image, implement the mouseOver handler:
private function toggleTooltip():void {
var graphic:DisplayObject = myImg.graphic;
var anchor:Point = graphic.localToGlobal(new Point(0, 0));
if (mouseX >= anchor.x && mouseX <= anchor.x + graphic.width &&
mouseY >= anchor.y && mouseY <= anchor.y + graphic.height)
{
trace('show tooltip');
}
else {
trace('hide tooltip');
}
}
I have a chart that displays a tooltip (string) when hovered over. Is there a way to control the delay/time the tooltip is displayed to the user?
<asp:Chart runat="server" ID="Chart2" Width="340px" Height="265px">
<!--Define Things in here-->
</asp:Chart>
Backend:
//define what rec is
string tooltip = rec;
Chart2.ToolTip = tooltip;
I just came up with a pretty simple solution to this classic problem with the help of some Javascript I borrowed from here: http://bonrouge.com/~js_tooltip
Asp.NET renders tooltips as a title attribute on the actual HTML page generated. You can take advantage of this fact to apply whatever style you like to the tooltip by overriding it with two very simple javascript functions.
function showTooltip(control) {
var ttext = control.title;
var tt = document.createElement('SPAN');
var tnode = document.createTextNode(ttext);
tt.appendChild(tnode);
control.parentNode.insertBefore(tt, control.nextSibling);
tt.className = "tooltipCss";
control.title = "";
}
function hideTooltip(control) {
var ttext = control.nextSibling.childNodes[0].nodeValue;
control.parentNode.removeChild(control.nextSibling);
control.title = ttext;
}
Next you need to design your css for your tooltip:
position:absolute;
border:1px solid gray;
width:300px;
margin:1em;
padding:3px;
background: Red;
Finally you need to wire up the JavaScript to your control
Chart2.Attributes.Add("onmouseover", "showTooltip(this)");
Chart2.Attributes.Add("onmouseout", "hideTooltip(this)");
Hope this helps.... I've been looking for a SIMPLE way of doing Tooltips for all my Asp.Net stuff for ages. I don't like to declare my Tooltip code in separate spans or whatever as this is really no good for my dynamically generated stuff. Anyway I just wanted to add this somewhere online. Hope it helps someone out.
Sorry, but probably not.
Most tooltips are a browser feature, and display either the alt tag of an img, or the title tag of most elements. So the control of how long that tooltip displays is going to vary from browser to browser.
It's possible that the tooltip is under your control, and is an html element displayed with javascript on mouseover, or the charts and the tooltip might be in Flash or Silverlight, but if that's the case we'd need to see your code.
I'm guessing probably not. If you need more flexibility I would recommend going with a jQuery tooltip solution.
To add to Ravendarksky's answer: I used his code but if I moved my mouse during the mouseout event over the tooltip content, IE would issue an unhandled exception (no issues in Chrome, I did not check Firefox):
0x800a138f - JavaScript runtime error: Unable to get property 'nodeValue' of undefined or null reference
So I simply wrapped the implementation of hideTooltip in a conditional checking for null and all was well in IE [and Chrome]:
function hideTooltip(control) {
if (control.nextSibling.childNodes[0] != null) {
var ttext = control.nextSibling.childNodes[0].nodeValue;
control.parentNode.removeChild(control.nextSibling);
control.title = ttext;
}
Or you can use HoverMenuExtender of asp.net. You can also modify the pop up content/design.
Code reference sample here: http://asp-net-example.blogspot.com/2009/11/ajax-hovermenuextender-how-to-use.html
I'm not sure if this is possible, is there a way to get the <mx:Form> to set its own height based on the position of an element within it?
For example something like this:
<mx:Form height="{submitBtn.y + submitBtn.height}">
<mx:FormItem>... </mx:FormItem>
<mx:FormItem>... </mx:FormItem>
<mx:FormItem>... </mx:FormItem>
<mx:FormItem>
<s:Button id="submitBtn" label="Submit" />
</mx:FormItem>
</mx:Form>
where the form height is dynamically set based on submitBtn's y position and its height.
I tried using Alert.show to show these values and turned out submitBtn.y = 0 and submitBtn.height = 21. height sounds reasonable, but I know the submitBtn.y can't be 0 since it's below several other
Is it possible to set the form height dynamically?
Yes. Do it in the measure method:
private var n:Number = 0;
override protected function measure() : void {
super.measure();
if (submitBtn) {
var fi:FormItem = FormItem(submitBtn.parent);
n = fi.y + fi.height;
}
}
Then just set the height to n.
Edit: I changed this to specify the containing FormItem, not the button, which is what I tested in my own sample code first. You can either get the button's parent or give that FormItem an ID. But this way does work.
your submitBtn.y will always return 0, since it's the y position inside the mx:FormItem element (like the relative y position)
So as I guess you want to set the y position of a form based of the y position of a button inside the form. why do you want that ?
check out the localToGlobal() method available to all children of DisplayObject. It will convert your x,y coordinates to the global x,y. You should be able to use this in your calculations.
I hope that thread is not closed cause I just have had the same problem like you and found the correct solution, so I will try to explain.
Whenever my application starts it reads a file and parse it, containing some information that will fit some forms, and I create them dynamically without specificating any height or width.
I add them to a viewStack like this:
<mx:ViewStack id="viewStack" resizeToContent="true">
</mx:ViewStack>
that is inside a component to show Information for some items, depending the class of the item one of the form is shown fitting the necessary information in.
As you can notice, the viewstack has inside a property resizeToContent that when I select an item from a datagrid, the viewstack changes the selectedIndex (indicating another form) and automatically changing its size resizing to the new content.
If for some reason you need the height of the form, you can use, instead of measure(), the measuredHeight property.
I will add some of the code used for you to understand:
onCreationComplete(){
...
for each (var form:Form in DataModel.getForms())
{
viewStack.addChild(form);
}
...
}