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)."
Related
I am using jqGrid in virtual mode (i.e. paging is being done via a scrollbar). Firstly I had a problem that sometimes when scrolling by large distance (for example, from the start to the middle) no requests to server were sent and no new data appeared in the grid. But when scrolling by small distance requests were sent and data appeared in the grid. I noticed that the problem can be solved by playing with scrollLeftOffset property, but the problem is I don't actually understand how this property works. I would like to know how to caluculate this property properly, knowing total count of records and page size.
Basically scrollLeftOffset controll dynamically the appearance of the scroll dialog information when virtual scrolling is enabled and scrollPopUp is set to true
As from the Guriddo documentation it has the following meaning:
Determines the left offset of the box which appear when virtual scroll
is enabled and scrollPopUp parameter is set to true. The information
does appear when we use the mouse to scroll through the pages. The
value of 0% set the box to appear at upper left corner of the grid.
See scrollPopUp and scrollTopOffset parameters. Default value : 100%
It is available only in Guriddo jqGrid from version 4.8
We try to use the treefilter in IcCube to show categories with subcategories. Now we discovered two problems, we don't know, how to fix:
We have 15 categories on level 1, but only the first 11 of them show. There is some space underneath, so it doesn't seem to be cut due to rendering:
We are not able to activate a vertical scrollbar, so when we unfold the tree, there are parts we cannot see anymore. The hotizontal scrollbar is there, but once the tree is too big (image 2) it can't be used anymore as well.
Did we do something wrong and there are options we didn't see, or are our problems due to some bugs in this widget?
Point 1)
Try to increase Max Member Count property on the Query Wizard tab of the widget (this number is for all the members to be managed, not only level 1 items)
Point 2)
Try adding {"cssStyle":"overflow:auto"} in the Content CSS property of the Box tab of the widget.
I am using a ZedGraphControl in a WindowsForms project in C#. The ZedGraphControl is V5.1.5.
The data in the control is static and I add it all before the form is shown. The X axis of the data consists of numbers indicating seconds offset from the beginning. in other words from 0 to some number of seconds.
I want to initially show the last 5 seconds, but provide a horizontal scrollbar so the user can scroll back and forth. I set the "graphPane.XAxis.Scale.Max = maxX;" where maxX is the largest X value in my data. I set the "graphPane.XAxis.Scale.Min = maxX - 5;".
The data starts off displaying the way I want it, but when the user scrolls the horizontal bar, bizzar behavior occurs.
As you drag the thumb of the scrollbar to the left, the beginning of the data shown in the grid moves to the lower values as expected, and the thumb of the scrollbar moves to the left, but the right edge of the thumb stays at the right of the scrollbar and you cannot move back to the right. It is as if the data to the right of the viewing range gets truncated as you scroll left.
I cannot find any reason for this nor any way to control it. Does anyone have any ideas about this behavior?
Ok, found it myself.
I found a fine article that describes scrolling:
Add a ScrollBar
In it the author specifically says "the scrolling will be wacky because the scrollable range has not been set".
I used the sample "Manually Setting the Scroll Range" and the part that I was missing is setting the zedGraphControl1.ScrollMinX and zedGraphControl1.ScrollMaxX properties. Once I defined these values everything started working as expected. I also found that in my case, the value of zedGraphControl1.IsAutoScrollRange had no effect, but I left it set to false to be consistent with the example. This would probably have an effect if the dataset is dynamic.
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 a datagrid with many columns. This makes it pretty wide. Now we want to add more information to the table. Aside from removing or shortening existing columns what are some ways we might be able to add additional information without adding new columnes.
The data we want to add would be one of several values. For example:
Projected
Actual
Other
For other cases when the value was an off/on or true/false we would change the color of the row. In this case that doesn't seem to be a good option.
Another thing we considered is using an icon to indicate the information.
Any other ways this could be done?
A solution i've seen implemented with grid components is to have a column chooser - some sort of popup dialog that lists the columns and you can select which ones you would like to see in the grid. You should be able to invoke this popup by triggering it from the grid, e.g. it might appear as an option when the user right clicks and causes the context menu to appear.
Can you group related information into tabs?
an overflow area? ie a number of fields underneath the table that populate based on the selected row.
or just only show the minimum needed info and the have full details in a popup when doble clicked or something..
1) Popup on row hover
2) Drop open inline in the grid with extra info on row click
One technique I've used in the past was to create a "container" type of class that has its own labels and textboxes, and you can arrange them however you want, then insert this class into a single grid column. You still have to do some tricks on binding multiple controls that are not native "grid column" controls, but should help you along. Then, you can actually have each row a single container control in a single grid column...
You can't add completely new data to a grid without reserving a column to display it. The best solution I've seen is to provide only the essential information in the grid displaying all records, and then create a drilldown view that shows all of the data for one row. The drilldown can either be a new view in the same form, a popup for an additional window, or perhaps a mouseover popup.
I've worked on systems that use all sorts of shortcuts to display every last bit of information on a single page, and I found that it just made everything more confusing and harder to use. "Oh, that little icon there means that <insert something totally unrelated to the icon picture>."