I have a formpanel with various fields. The panel has autoScroll.
CompositeField has a SuperBoxSelect based element ( ux - multiple selected tags in form etc) - and a button at the end.
Now the problem is that the compositefield does not resize to fit the increased size of its contents.
It keeps the default size it had on render.
Form is populated from selected grid rows. So data amount can change.
It will fix itself when i resize the whoel formpanel ( split bars on left/top).
I added autoResize to almost everywhere when testing, still nothing.
Is there a way to force the formpanel to reload or render when i add data to it, so it? ( since apparently the height/width change works).
this seemed to do the trick:
this.fields.tags.on('autosize', function(tags){
tags.ownerCt.doLayout();
});
Related
How do you make it possible to search for any item in the table regardless of the number of rows loaded using ctrl-f?
I have a large table consisting of over 10,000 rows.
So, far I have tried using Pagination. This works regardless of how large I change the "paginationSize".
Is there a way to make the pagination controls always visible regardless of paginationSize?
Right now setting the paginationSize to certain amounts will need a scroll bar to view the pagination controls.
Also when using pagination if I include a height to the table then ctr-f cannot find everything on any page.
How does the height setting affect the number of rows loaded?
How do I figure how many rows the table will load based on the height setting?
With both of those questions in mind, how do you know how many of the loaded rows will be searchable with ctrl-f
It says in the documentation "The virtual DOM renders a number of rows above and below the visible rows to ensure a smooth scrolling experience." What determines the number of rows above and below the visible rows?
Finally is there a better way to make ctrl-f always work on the table besides using pagination?
// Creating the tabulator table
var table = new Tabulator('#themeTestCaseMetricsTable', {
height:"100%",
pagination:"local",
paginationSize:100,
layout: "fitDataFill",
cssClass: "column data",
responsiveLayout: true,
tooltips: true,
// "safe" turns off auto-escaping
columns: {{columns|safe}},
data: {{rows|safe}},
persistenceMode: "local",
persistence: {
columns: true
}
});
Appreciate any help and feedback
Ctrl+f
Tabulator uses a virtual DOM to improve render efficiency on large data sets, this means that only the visible rows actually exist, as you scroll rows are created and destroyed in realtime as they become visible. therefore you cannot search the table in that way.
The ctrl+f feature of browsers is more of a convenience feature of browser and it is bad UX to expect your users to use this to find things, if you want users to be able to search a table, you should add a search input and use the built in table Filter Functionality. you can see an example of this on the Tabulator Home Page where it lets you filter the table by the name column
That being said you can disable the virtual DOM by setting the virtualDom property to false although this will result in the table no longer scrolling and the table will take a long time to load if displaying large data sets
var table = new Tabulator("#example-table", {
virtualDom:false, //disable virtual DOM rendering
});
paginationSize
You are having this issue because you are setting both a page size and a height, if you want the table to resize to fit the height of a page of data you should not set the height. if you would like the page to take up the height of the table you should not set the page size
I have dynamic data in my table. The amount of data in a cell may change. I have implemented a rowHeightGetter method to calculate the height of a row. When I add content to a cell and rerender my table, the content appears and the cell is larger, but if the additional content caused overflow, scrollbars do not show up. Please see the jsfiddle and click on a row. You'll see that you can no longer access the bottom row of the table until you click a second time.
https://jsfiddle.net/3cooper/ed7Ltc6o/1/
It appears that _calculateState() is not getting the actual row heights from the rowHeightGetter methods when it calls
var scrollContentHeight = this._scrollHelper.getContentHeight()
At this point it is getting the height of the rows by checking the rowHeight property on the table. I see in _calculateState() there are other calls that eventually call this._scrollHelper._updateHeightsInViewport() to properly get the height. Should this be done again. Just really started looking into this today - so I could be missing something obvious. Thanks.
Is there a better way to handle this?
Update:
Also, I notice that once a scrollbar appears so that the contents can scroll, if you click a row again, the table with shift down but the scrollbar will not adjust. Then once you start to scroll up the scroll jumps to the correct position and allows you to scroll the entire table correctly.
I have a UI with several grid components. For some reason, even after it's populated with rows, one of the grid's Load Mask stays visible.
I have to work out why the mask stays after load, but first I was trying to determine the code that would hide the mask.
Here's what I've tried:
Ext.getCmp('callClassAvailableGrid').setLoading(false)
Ext.getCmp('callClassAvailableGrid').unmask()
Ext.getCmp('callClassAvailableGrid').view.unmask()
Ext.getCmp('callClassAvailableGrid').viewConfig.unmask()
None of which hide the mask.
Also of note:
Ext.getCmp('callClassAvailableGrid').store.loading
returns false
How can I hide the Mask on this Grid?
I believe you need to be calling unmask() on the Ext.Element instance for the grid.
mygrid.getEl().unmask()
Found the answer:
Ext.getCmp('callClassAvailableGrid').view.loadMask.hide();
Sorry if this is a pain the ass, but I could really use some help here:
http://dev.rjlacount.com/treinaAronson-form/
The contact form can be seen by clicking the "Contact" button on the top left. I'm using the jqTransform jQuery plugin to style it. It's hidden initially with display:none; applied to the div with the ID "panel", and slid in with the following:
$("#flip").click(function(e){
e.preventDefault();
$("#panel").slideToggle("3000");
});
With this setup, the contact form isn't displaying the current value of the select box inside its field. If I instead remove the display:none; rule for the panel div from my CSS, and hide the form after the page has loaded with:
$("#panel").hide();
The form display correctly. Does anybody know how I can make this work and avoid the flash of an open panel I get if I hide it with jQuery after the page loads?
Thanks so much for any advice. Please let me know if I can provide any more information.
The problem is, jqtransform is setting width for a label (currently visible value in a transformed select) to match the width of original select.
If the original select (or its parent) has display:none set, and it doesn't have any css width specified, the result of .width() on that element is zero.
You can in fact check (using firebug or google chrome dev tools), that it's not that contact form isn't displaying the current value of the select element, but rather displaying it with a width equal to zero.
The easiest solution in your case, is to set (in your css file) fixed width for the selects that are part of a contact form. That way, even though they will be hidden at first, the jqtransform will set correct width for label. For example:
/* css declaration */
#change-form select {
width: 390px;
}
Side note: there are of course other ways to make it work, including tweaking the jqtransform script to fit your specific use case. Part of the script related to setting mentioned width of a label starts on line 289.
If users manually resize jqGrid columns, how can you reset the column width back to whatever the original values were?
I don't believe that there are any built in methods for reseting the widths, leaving the option of recording them at creation and restoring them at a later point. Unfortunately, this functionality is the same as it was 10 months ago with column width being one of the few options that cannot be changed once the grid has been created. I even tried the newest version of the grid just to be sure (3.8.2) and it does not allow you to change the column sizes.
$('#jqGrid').getColProp(colName).width; //Properly retrieves value of column width
$('#jqGrid').setColProp(colName, {width: newWidth}); //Does nothing visually
$('#jqGrid').getColProp(colName).width; //Returns newWidth, although it doesn't show it on page
I don't know if it would be worth it, but you could try Oleg's solution here of destroying the current grid and creating a new one in its place. The practicality of this solution I suppose would be dependent upon how you are getting the data and how long it would take to re-bind the data to a new grid.