I'm trying to programmatically set a dgrid row as active, not just selected. I have a dojo dgrid OnDemandList which is using the Selection and Keyboard Mixins.
Using the select(row) method I can programmatically select a given row, but that row is not active. When a row is active, I can use the Up and Down arrow keys to navigate to the rows above and below it. When a row is just selected, the row is highlighted but the arrows keys do not work.
Clicking the row with the mouse will make it active and selected, but I'm trying to build my interface to be 100% usable with just the keyboard.
Ok, took me awhile but got it figured out. What I was really trying to do was add focus to a row. The code for doing that was in dgrid/Keyboard.js under the _focusOnNode method.
The actual code to change focus from row currentFocusedNode to row focusedNode is:
if(currentFocusedNode){
// Clean up previously-focused element
// Remove the class name and the tabIndex attribute
put(currentFocusedNode, "!dgrid-focus[!tabIndex]");
if(has("ie") < 8){
// Clean up after workaround below (for non-input cases)
currentFocusedNode.style.position = "";
}
}
if(has("ie") < 8){
// setting the position to relative magically makes the outline
// work properly for focusing later on with old IE.
// (can't be done a priori with CSS or screws up the entire table)
focusedNode.style.position = "relative";
}
focusedNode.tabIndex = grid.tabIndex;
focusedNode.focus();
put(focusedNode, ".dgrid-focus");
The code above is really just a code fragment, for it to work you will have to declare "dojo/has" and "put-selector/put" first as well as define the currentFocusedNode and focusedNode. But I'm leaving that as an exercise for the reader ;-)
Also note that this only changes the "focus", it will not select the focusedNode but that can easily be done using grid.select(focusedNode);
I've encountered this in a couple spots in my app:
Let's assume I have 3 items in a carousel. I'm viewing item #2. I need to reload that carousel, so I do the following operations:
Ext.getCmp('carousel_name').removeAll();
var new_objects = (bunch of code that recreates the carousel's objects again, with the same IDs; this is the same code that was used to create the objects the first time, so it is likely not the issue)
Ext.getCmp('carousel_name').add(new_objects);
In the carousel object items list (Ext.getCmp('carousel_name').getItems()), all three items exist. However, only #1 and #3 (the ones which weren't the active item prior to the carousel reload) actually appear. #2 presents a blank white screen, and in the HTML nothing exists except for the item shell markup (no code that I've written shows up). If I do Ext.getCmp('carousel_item_2').show();, the item does appear, but is full-screen, and I get the error:
[DEPRECATE][Ext.Panel#show] Call show() on a component that doesn't currently belong to any container. Please add it to the the Viewport first, i.e: Ext.Viewport.add(component);
When I try to manually add that item to either the Viewport or the carousel, nothing is fixed.
I've tried inserting a dummy item in-between removal and reinsertion of new items, that doesn't work. Nor does hiding the entire Viewport before doing any of this and showing it afterwards. Nor does using setItems() rather than add(). Nor does doing Ext.getCmp('exercises_carousel').each(function(item){ item.destroy(); }) rather than removeAll(true)
I don't believe the issue is the code snippet that re-creates the new items, since it's the same code that's used to create the items the first time, and there are no issues on the first creation.
Pretty stumped here.
EDIT: I've found that if, when I get to the end of the carousel, if I add a empty item after the last item in the carousel, I don't get the blank item at N-2. No clue why this is the case. Still not a real solution, it's a hack.
Assuming there are no problems in your code snippet to re-populate new items in your carousel, then the only problem is because of this issue (I'm not sure whether it's a bug in Sencha Touch 2.1 or not but it does exist): when you call yourCarousel.removeAll() and add some new items again, your carousel will NOT set proper active item.
I've seen a similar problem and I added this after adding new items, which works:
carousel.setActiveItem(0);
Alright, this is a hack, so if anyone has a legitimate solution, that would be awesome. But the hack does work, so here it is:
Add an empty item in the carousel
Set active item to the new empty carousel item
Destroy all carousel items
Recreate (and re-add) all of the items
In code:
Ext.getCmp('carousel_name').add({});
Ext.getCmp('carousel_name').setActiveItem(Ext.getCmp('carousel_name').getMaxItemIndex());
Ext.getCmp('carousel_name').removeAll(true);
var new_objects = (bunch of code that recreates the carousel's objects again, with the same IDs)
Ext.getCmp('carousel_name').add(new_objects);
EDIT: As it turns out, this for some reason works 90% of the time; for some unknown reason 10% of the time it still doesn't get inserted. The only way to guarantee that all items get inserted correctly is to clear the entire viewport (Ext.Viewport.removeAll(true)), recreate all of the original items in the viewport, and reinsert them. I'd rather not have to do this every time an item doesn't get inserted.
i'm looking to create a sliding open door effect with jquery that has the following functionality:
arrive on the page and the doors are closed
click a link and the doors slide outwards a fixed amount on the x-axis
click the same link again and the doors close
i started out with the concept here, which works great:
http://buildinternet.com/2009/07/animate-curtains-opening-with-jquery/
but realised that i wanted the doors to slide across, rather than shrink in size, using the type of functionality seen here:
http://ricostacruz.com/jquery.transit/
so i think what i am looking for is some type of 'animate' functionality:
http://api.jquery.com/animate/
this is the logic of the functionality i am trying to achieve:
static state:
background: an image that is revealed when the doors slide open.
door-left-inner: 122px wide x 244px high, centered and offset left -61px with z-index 3.
door-left-outer: 122px wide x 244px high, centered and offset left -151px with z-index 2.
door-right-inner: 122px wide x 244px high, centered and offset right 61px with z-index 3.
door-right-outer: 122px wide x 244px high, centered and offset right 151px with z-index 2.
onclick (all these functions take place at the same time):
door-left-inner x-position slide on click: -164px on x-axis.
door-left-outer x-position slide on click: -74px on x-axis.
door-right-inner x-position slide on click: 164px on x-axis.
door-right-outer x-position slide on click: 74px on x-axis.
here is a diagram of what i am trying to achieve:
attempted code (not currently working)
$("#open_close_doors").click(function(){ $("#leftdoor_inner").animate({"left": "-=50px"}, "slow");});
and here is my jsfiddle attempt at getting one of the doors to slide - i figure once i know how to get one of the doors sliding i'll be able to apply the same logic to the others. also i'm a relative newb to jquery.
http://jsfiddle.net/9zsdN/
thank you.
Here's the corrected jsFiddle for the same: http://jsfiddle.net/9zsdN/1/
$("#open_close_doors").click(function(){ $("#leftdoor_inner").animate({"left": "-=50px"}, "slow");});
It should be:
$(".open_close_doors").click(function(){
$("#leftdoor_inner").animate({"left": "-=50px"}, "slow");
});
The difference lies in the way you access an element. As you can see, when you access an element by class, you use " .classsname" instead of "#classname" as you have done.
"#name" is used for accessing elements by their id.
I have a rdlc report that conains a tablix, nothing other. The Tablix expands in horizontal direction to show days and in the vertical direction to show groups.
The tablix works as expected, as long as I set the width of the content area equal to the width of the tablix.
If I expand the content size to its fixed size (approximately PageWidth-PageBorders) and run the report, every second page is an empty page.
However the tablix only uses one page. Every odd page is absolutely empty. It seems that the tablix adds its horizontal expansion to the currently definied content width and calculates then the overflow.
The reportviewer Version is 3 (2010 Redistributable)
Does someone have a solution for this odd behaviour?
Update
If I export the report to excel, I see that there is on the right site of the tablix a column that is exactly as long as the generated items for the days. It seems realy to be a bug or a feature I don't see how to deactivate.
I also have tried to create the same construction from a table, and it resulted in the same problem, what not is astonishing, because the table is internally also a tablix.
Update 1
If I set the property "ConsumeContainerWhitespace" of the report to true, the above test version works. But if I place then other elements in the "white" area, the effect reocurrs.
Setting the page-property ConsumeContainerWhitespace=true (in the properties dialog, F4) has helped. However it was anyhow tricky to build the report correct. At the begining it worked only if I added all extra content to the page-header and footer. But this was not acceptable. After a lot of trying, I succeed in making the report as desired. However I don't really understand the logic behind.
I have in mind that I already have done such reports (growing in both directions, horizontally and vertically together) without any problems and I don't know what is difference to this report here. For this report, it's definitively reproducable that the ConsumeContainerWhitespace-property makes the difference. But why this never happens to me for similar reports I have done, I don't know. Also I don't know why I had first to circle around before the layout-engine accepted my design.
The best way to solved this problem is, for example for an A4 page where
Width=21 cm and Height=29.7 cm
Now Margin Left=1 cm and Right=1 cm so you are having a usable width of 19 cm.
When you have understand this basic calculation that means your problem is solved. You can set up the report page size properties by right clicking on the report property => pagesetup.
I was working with an RDLC report that was printing an extra blank page. I tried all the usual tricks, and everything I could think of, until I realized the problem was caused by an extra amount of visible whitespace in the right margin area of the report. One of the objects in the report (a "Rectangle") was a single pixel or two too wide, and this prevented resizing the visible space of the report. Once I removed all the extra width, the report started printing with the expected number of pages.
Visual Studio 2017 (15.7.5) + Microsoft Rdlc Report Designer extension (v14.2)
I had a similar problem, I solved it this way
For instance for width, the following equation should be satisfied
PageSize >= LeftMargin + BodySize + RightMargin
where to find BodySize?
Press F4 -> CLick somewhere inside the report -> you will find body property(look at size property, take the width value)
Where to find report PageSize?
click somewhere outside the report -> you will find report property ( look at PageSize (take its width value), and margins (Left, right, ..), take left and right margin values)
take values from these properties, and check if they meet
PageSize >= LeftMargin + BodySize + RightMargin
Check the "body" size, try to make it as wide and height as your real paper size but reduce only the margins.
There is a confusion there on the page design. Developers would think the report being designed is WYSIWYG, but actually it's NOT!! Microsoft reportviewer will take your designed page as the content!! and append the margins defined on the outside of your page, and turn out that your page can never fit in to one page!!
So, when you design a new report, focus on the content area, the client area, including your headers and footers, and allow margins to be appended on your outer border.
the solution is simple ConsumeContainerWhiteSpace=True (you find this in the property window for "report") you set the paper size in the main menu/ report/report properties for example to "A4" and then you check that paper size is larger then body + header + footer + margins.
I was having the same issue until I played with the report body's height and width. :)
Please select "Report" in the object selector at the top of the window.
and make the ConsumeContainerWhiteSpace = true
if the also same problem persist then, your rdlc report size should be less than your report body.!
I have meet this problem recently.
The root cause may be:
your report's body has some blank upside report Footer or somewhere else.
The solution is :
1, click the report body
2, go to the property window, you will see the body size property
3, check the body size, you may find a strange number like 9.6654in,1.5625in.
that means you have some blank upside the Footer, modify the height or width size till there is no blank you can see.
Go to Property F4
Select Body
Write width and height to 1cm
Visual studio will overwrite to the smallest Body possible
Done.
You need set report width property to actual print page width. In my case 6 inches helped.
You need to make sure your RDLC Report have :
ConsumeContainerWhiteSpace = true (open by click F4)
Report Body Size <= Page Size+margin Size. (open by Ctrl + Alt + D)
Page Footer may cause the problem too. So if you have one, it's better to place it as near as possible to the main content. In this case you don't need to set the Body.Height property.
My 4x2 inch label was printing 3 extra pages for a one page report.
To fix it, I reduced the Body.Size attribute to be same or smaller than the Report.PageSize minus the summed respective Report.Margins.
Try this one,
Just make sure that all Data the needed is in the report,
Then Select the Table or the Matrix and make it squeeze to the left and if needed to the Top Left Corner until your white Page Problem is Done.
But make sure that the cells are squeezed in the right manner, Be gentle (I hope you got it !!)
Ok, Bye
Or you can just graphically resize your report design, to the exact bottom of the last report control or label.
Or add a footer section to create some space.
I thought this important enough to put here, especially since every day more of the critical information we need to do our jobs keeps disappearing:
From response to The "Every Other Page Is Blank" Feature
Many Reporting Services users ask this question:
"I'm rendering to a physical page format (PDF, Image, Print) and for
some reason a blank page gets inserted between all of the other pages
in the report. Thank you, Reporting Services, for the free pages.
It's a charming feature, but paper ain't free and I'm getting paper
cuts pulling out every other blank page after it's printed. How do I
make it stop?!"
To which I reply:
This is almost always caused by the Body of your report being too wide
for your page. Make sure that the Width of the Body is less than the
physical page size, less the margins. For those of you who are into
the math thing, make sure that:
Body Width <= Page Width - (Left Margin + Right Margin)
For physical page renderers, it's important to keep in mind the
concept of Usable Area. The Usable Area is the amount of space left
on a page for your report to be drawn after reserving space for
margins, headers and footers, and column spacing (for multi-column
reports).
Horizontal usable area:
X = Page.Width - (Left Margin + Right Margin + Column Spacing)
Vertical usable area:
Y = Page.Height - (Top Margin + Bottom Margin + Header Height + Footer
Height)
Any time objects on your report (including the Body itself) extend
past the usable area either because they are defined like that or
because they grow at runtime, the physical page renderers have no
choice but to break onto a new page.
Make sure Body size is cm , not in(inch)
For me when I increase the width for pagesize report from 21 to 23 cm , It was not generating extra empty page.
Because of few elements total size of my report's element was greater than 21 and less than 23, that is why I changed to 23cm and works for me.
In my case I have only one page and I was working with .rdl file.