I am using richfaces's component extendedDataTable and I need to extend the grid height to show all the rows without using a scroller. To do so I have added a java script method to run on page load. This method aims to resize the grid.
The reason that I couldn't do this in code isI dont know the height of each row as it is not fixed beacuse word wrapping is allowed.
My problem is , When an ajax action occurs and the extendedDataTable rendered the onLoad is not executed again. So How I can execute a javascript method after the completion of an ajax request ?
Thanks
Are you explicitly setting the "height" attribute for the extendedDataTable or for the div that encloses it.
Well, I have done a similar kind of application ,in which extendedDataTable size should not exceed some fixed bounds(say 600px X 600px).Similar is case with individual columns, which are of fixed width(say 60px). This I am doing by explicitly setting the "width" property for rich:extendedDatatable and rich:column to fixed dimension.
So if the no of rows exceeds,the scroll bar appears.
Now I want my data(which is a very very long string) in each cell to be wrapped, and not exceed the given column width(60px), but not able to do that ? Currently, extendedDataTable trims the string for first 60px and puts... after that !!
It would be great if you can provide some insight on this.
Regards,
KB
Instead of trying to listen for the data table being reRendered, wrap the table and your JavaScript in another component, such as an h:panelGroup. Give the h:panelGroup an id and reRender it instead of the rich:dataTable.
Use style="height:auto;", like:
<rich:extendedDataTable id="tableId" value="#{someModel.someValues}" var="someVar" style="height:auto;">
<!-- ... -->
</rich:extendedDataTable>
Related
I added kendo chart on a page according to the documentation.
But started to get next error 5 times per each kendo ui chart
Error: <g> attribute transform: Expected number, "matrix(NaN,NaN,NaN,NaN,…".
Charts are drawn but those errors break pdf export. When I use same datasource as in my app on kendo ui dojo.telerik editor there is no error.
I know there might be dozens of possible reasons but I'm a bit locked with that for next few days. So I decided to try luck on stackoverflow in case anyone had anything similar.
Any ideas?
I had the same error, and for me it was related to the <kendo-chart-series-item-labels> component.
I had as property rotation="auto" but the rotation property should be only a number. Removing the property solved it.
<kendo-chart [chartArea]="{ height: 300 }">
<kendo-chart-series>
<kendo-chart-series-item
type="column"
colorField="color"
[gap]="1"
[spacing]="0.25"
[color]="barColor"
[data]="chartData"
[stack]="true"
field="TotalSum"
categoryField="TransactionType"
[tooltip]="{ visible: false }"
>
<kendo-chart-series-item-labels
font="bold 16px unity-medi"
color="#3c3c3c"
rotation="auto"
[margin]="30"
></kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
solution: remove rotation property inside the kendo-chart-series-itme-labels component
Kendo API documentation for this component here: https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesLabelsComponent/
Of course, in your case, it may come from a different component.
Maybe double check if you have a property inside a kendo-chart or one of its child component that requires only numbers while you may be passing a string or something else to it?
Does anyone know how to set a value to span tag using capybara?
I tried using element.set or element.send_keys, they only selected the targeted element without modifing the previous value.
<div data-offset-key="bbpvo-0-0" class="_1mf _1mj"><span data-offset-key="bbpvo-0-0"><span data-text="true">aa</span></span></div>
HTML snippet is above, I want to set aa to bb.
Capybara is designed to emulate a user - A user can't edit a span unless there's some sort of javascript widget attached to it. If you have a JS widget attached to the span you would need to perform whatever actions a user would do in order to edit the span. So you say the user has to click on the span and then type on the span - if that is so then you could try something like
span = find('span[data-text="true"]')
span.click
span.send_keys("new content", :enter) # if enter is needed to end the editing
which may work - although I'm going to guess the element actually gets replaced with an input or something after it's clicked on, in which case you need to figure out what those elements are (using the browsers inspector) and then find and use send_keys or set on that element instead
To set text in span value,jquery can be used with capybara as shown below:
page.execute_script("$("<span css selector>").text("testing")");
or
page.execute_script("$("<span css selector>").html("testing <b>1 2 3</b>")");
I have got a problem with Loopj's jQuery Tokeninput inside Jack Moore's Colorbox window. The problem is that dropdown of Tokeninput shows under Colorbox window, as on screenshot below:
I think that the problem could be with this code inside tokeninput library (lines 343-347):
// The list to store the dropdown items in
var dropdown = $("<div>")
.addClass(settings.classes.dropdown)
.appendTo("body")
.hide();
because it is appended to body, not to colorbox window.
Could anyone help me solve this problem?
PS. I am using this lib also outside colorbox window, so appending it to colorbox probably will be a bad idea.
It should be possible to fix this issue by altering the z-index of the TokenInput's dropdown.
The z-index of a Colorbox is 9999, the default value for the TokenInput is lower than that.
Depending on which TokenInput version you're using - if it supports the z-index parameter, you could alter the value with that on initialisation. e.g.
$('#myID').tokenInput("http://sourceurl.com",
{
zindex: 100001
}
Else if it's an earlier version, try altering the value for div.token-input-dropdown in the token-input.css file.
I've put in a pull request for this issue on GitHub, but sadly, the project now seems to have sunk back into inactivity.
I am using Sencha ExtJs grid 4.2 . I am using a Expander plugins for my grid and try to load data under expanded region from Ajax. Right now I am using this code to show data on expanding.
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: new Ext.XTemplate(
'<br><img height="31" width="32" src="../upload/patient/thumb/{patient_image}">',
' <p><b>{fname}, {lname}</b></p>',
'<br> {accordian_view}'
)
}],
Here you can see that data is pre populated, but my requirement is to load data on expanding. I am trying hard to find the event or process to do it. But still no luck. If anyone have any idea please share.
Thanks in Advance
You might check out the expandbody event on the RowExpander plugin: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.RowExpander-event-expandbody
This event passes not only the row's bound record, but also the expanded element, so you could:
Request data via Ext.Ajax.request({...})
Handle response
Add content to expanded row
One thing to keep in mind, however, is the async nature of this approach. That is, the row is going to expand immediately, regardless of how long the subsequent request takes to come back. So it would probably be a good idea to do something like this instead when handling the expandbody event:
Add "loading" text/icon/whatever into expanded row area
Make Ajax request
Handle response
Replace loading text/icon/whatever with the data returned from the Ajax request
It's likely someone has already done so, but you could also (and I would highly suggest it) wrap this process into a custom plugin of your own that extends the RowPlugin. That way you could use it elsewhere in your app for any grid. If you end up creating a custom plugin, please share it with the community!
EDIT: A quick Google revealed a number of custom plugins that do precisely this. For example: https://github.com/nickbretz/Ext.ux.AsyncRowExpander/blob/master/AsyncRowExpander.js
So I have an asynchronous call to a controller in c# to obtain say 100 objects.
After this is done I load it into my html page and through a parameter in the link I intend to scroll to it.
So for instance: localhost/page.aspx?scrollToId=85
I do this as follows:
var selectedItem = $("tr[data-scrollToId='" + selectedItemId() + "']");
$('body').scrollTo(selectedItem );
selectedItem.fadeOut().fadeIn();
This works when I have static elements but because of the asynchronous call the dom is loaded way later and it doesnt scroll to it. (It does fade out and in again).
I have been looking at the afterRender method of knockout itself but this too didn't give any change.
Is there a way to wait for the actual dom to render all elements and only after this is done, scroll to it?
Many thanks in advance.
The issue was actually that afterRender only works on templates. I moved my view to a template then afterRender works.