I have a sap.ui.table component which is wrapped inside a sap.ui.layout.VerticalLayout. The thing is that if the table columns are re-sized(enlarged) , the table will get a horizontal scroll-bar. So far so good, but ,my question is, if there is any way I can place the table horizontal scroll-bar on the parent container (so on the VerticalLayout component), this way the user won't be required to scroll the rows all the way down to get access to horizontal scroll-bar.
I already tried to set the vertical layout component width to "auto" and that will get me the desired behavior, but in that case the table will not be expanding to 100% of the page(it works fine on chrome tho, the problem of not going 100% when auto is present on IE (IE11 in my case)) . So basically, I need to set the width of the parent to 100% so table and container are expanded to the right margin of the page, but if the horizontal scroll-bar is needed, I need to be displayed on the container rather than on table.
I am really out of ideas so any help,tips ,would be great, thanks!
UPDATE: I added a jsFiddle that replicates the structure of the page and my issue too.
I must add that the problem is there only in IE(i use IE11).
In case there will be other people facing this problem, this is the solution that I found:
1) On wrapper container creation set width to 100%, this way , the table will be expanded to 100% on all browsers.
2) Attach a columnResize function on table like this:
columnResize: function(e){
applyScrollOnContainer();
}
3) On applyScrollOnContainer(), simply change the width of your container to auto, this way the table scrollBar will be placed on container.
sap.ui.getCore().getElementById("yourContainerIdHere").setWidth("auto");
4) You may also add a check on document.load. If the table scroll-bar is displayed, again, attach it to the container.
var scrollDisplay = $("#tableIdhere .sapUiTableHSb").css("display");
if(scrollDisplay === "block"){
sap.ui.getCore().getElementById("ORDERS_VIEW_FIRST_TABLE").setWidth("auto");
}
else{
sap.ui.getCore().getElementById("ORDERS_VIEW_FIRST_TABLE").setWidth("100%");
}
Related
how to show a field in oracle reports at the bottom of the last page which is placed outside the border
A trivial answer is: place it outside the border.
I presume you already did that and encountered problems. It would really help if you specified which one(s).
The most usual error is that you're referencing a column at a wrong frequency, i.e. you can't just "move" it outside of its parent frame. (I guess that the frame is what you call a "border".) If that's so, well, you can't do that.
One way out is to create a new column (in the Data Model layout editor) (be it a formula or a placeholder column) which doesn't belong to any group, but is independent. Then you can place it anywhere you want.
If, on the other hand, you do have a formula (or placeholder, or summary) column and "border" you mentioned is the margin, then - while in Paper Layout editor - click the "Margin" icon in the toolbar to switch to ... well, margin layout editor. Now place that field anywhere you want.
Or, did you try to move the field but frames were resized and other fields moved along with the movement of the field you're moving? Pay attention to "Flex" and "Confine" ON/OFF buttons in the toolbar as they make the difference.
If none of above, what is your situation, then?
I am trying to do a chat menu in my game using a Table and Labels but I can't seem to get the labels to behave the way I want them to.
By default they are drawn in the middle of the table. I added this settings to fix that but now when I add new labels they expand to fill the table, which I don't want.
After adding settings:
After adding a new label:
Note: The second message is there, it's jsut very faint. Just another bug I am having :/
Also, you may notice that the "Send" button is half off screen, trying to fix that too, but one problem at a time I guess.
By the way, the table is within a ScrollPane.
I want to use kendo-ui-grid server paging with virtual scrolling and encountered a problem I don't know how to solve
It's shown in here:
http://dojo.telerik.com/uyEje
Try scrolling to row number 2M.
Anybody has any idea?
According to the Kendo UI documentation ...
"Virtual scrolling relies on a fake scrollbar. Its size is not determined by the browser, but is calculated based on the average row height of the data that is already loaded. As a result, variable row heights may cause unexpected behavior, such as inability to scroll to the last rows on the last page. To ensure that all table rows have the same heights, use either of the options: (1) Disable text wrapping. (2) Set an explicit row height that is large enough (as demonstrated in the following example)."
Here i am having problem with grid column resize.
The actual functionality i want to achieve is that i want to reset the grid column widths to some default values on click of buttons.
I successfully changed the width of column using some code, but the problem is arise now.
The problem is after resetting the column widths (i.e. setting column width) and then when i Just click on column separator causes column width change to previously set width (i.e. newwidth).
I illustrate the problem by showing images.
Just consider the images in sequence as they shown.
1. Before resizing the column.
2. After resizing the column.
3. Now reset width to default width.
4. Now just click on separator. This will cause the column to be resized again to previous state before we reset. and also causes undesired behavior when dragging as you see in next pic.
5. Width increased and undesired behavior when dragging.
I tried many things. I also found this : jQuery grid plugin - triand
But unfortunately no solution provided in it.
By using that reference, i tried to setting newWidth to 0, -1, undefined and moreover i removed it from headers. but all the things not working.
I can't understand what is happening.
Please note that there is no chance that some undesired code in project resided somewhere else causes this behavior. For the test i tried using new version of jqgrid 4.5.1, but in that also happening the same.
Please someone provide me solution for this. I am tired as i am doing this thing from many days. I am very much thankful to the one who help me.
Thank You in Advance !
I am not sure how you implemented "reset width to default width", but I hope two things should help you.
First of all jqGrid have bug in resizing of columns which looks exactly like on the "Step 5" which you described. I posted the pull request which merged to the main code of jqGrid about one month ago. You can do the same changes (two lines need be change) you your copy of jquery.jqGrid.src.js (see here details of the changes).
To implement resetting of width of columns to default width you can use the following. First you can use widthOrg of elements of colModel. After resizing of any column the original value of width will be saved in widthOrg. To change the column width one can use setColWidth method which I suggested in the resent answer.
I hope you will able to solve you problem using widthOrg, setColWidth and the bug fix bescribed above.
I have two main tabs named A and B. Under A I have three more tabs, and each have slickgrid. Under the B tab I have two more tabs, each with slickgrid.
All of the columns of A's slickgrid are shrunk and stay left in the following scenario:
Data is loading in a subtab of A
User switches to B
User returns to A after the data is loaded
Each column has a size around 10px in this shrunken state and is causing a lot of problems. How can I fix this?
Call grid.resizeCanvas() after the tab has been activated/shown. If you are doing any kind of animation when switching between tabs then you need to make sure to call grid.resizeCanvas() after the animation has finished.