When I resize the Webix treetable column, after clicking on plus button, the ajax request for more data is resizing tables columns to default. How could I stop it?
Below you could see the "problem".
It seems you are using fillspace:true for the first column, just remove it and resize will work correctly.
It is known issue for the Webix 3.x, which will be fixed in one of the next builds
Related
I am using AG-Grid without a framework to create an Excel-like editable table. I have implemented the ability to select one or more rows and have them duplicated immediately under the original row.
You may find a plunker here.
The issue arises with attempting to call the Loading Overlay on scripts.js:421 and hide in on scripts.js:438.
gridOptions.api.showLoadingOverlay();
...
gridOptions.api.hideOverlay();
If you attempt to duplicate the rows, the provided overlay does not show. If you view the console, you can see that the div.ag-bl-overlay is manipulated but the loading overlay never shows.
I have also attempted to manually force an overlay onto the grid using any outside function. This too does not display.
How do I get the loadingOverlay to display while I am inside the 'duplicateRows()' function?
I'm trying to make a Handsontable grid table for a fixed table with multiline headers to avoid the horizontal scrolling.
I made it using two ways : Using max-width in the css file or using fixed columns.
But in both solution manualColumnMove doesn't work as expected for example:
[code]: http://jsfiddle.net/bounmed/mua144zv/
I can't move the first column to the end.
and if i move columns a lot it get missed up.
Here's a doozy. I have a TableView with programmatically added custom TableViewRows. They are custom in that they have a left-aligned label and a right-aligned switch (think of it as a browse filter). I inserted the same type of row at the top to programmatically toggle all switches on/off.
All of this works as intended EXCEPT when I have more rows than can fit on the screen and attempt to toggle all. In this case, the custom row switches off-screen haven't rendered when the view loaded and therefore don't fire their changed event when handled programmatically.
If I manually scroll to the bottom to force render all rows then attempt to toggle all, it works just fine.
Is there a way to force all TableView rows (even those off screen) to render when the view loads? Or is there a workaround that I can live with?
Here is my current workaround. In the window OnOpen event, I call my function to initialize table data. This is important because this makes sure the first load works.
Then I force scrollToIndex to the last row then immediately scrollToIndex back to the first row. Since I do this right after adding rows, I need to do use setTimeout to make sure it covers load time.
setTimeout(function() {
$.tblOptions.scrollToIndex(lastIndex, { animated: false, position: Titanium.UI.iPhone.TableViewScrollPosition.BOTTOM });
}, 0);
Since this creates a jumpy user experience, I hide the table during load, show an activity indicator, then re-show table after load.
This will work for now but I'm still wondering if there is a simpler solution.
The table is too wide, I don't want it overflow outside the screen and make browser scrollable.
I prefer the table can slide horizontal in a frame, but I need first 2 columns to be fixed, only 3rd to the last column can slide horizontal?
Do you have jQuery code example?
Or do you know any good jQuery plugins that meet my requirement.
Datatables - http://datatables.net/
There is a jQuery adapter that has a ton of features that will allow you to create a table with a fixed column and fluid columns. There are even ways of showing / hiding columns based off of the screen width.
Dynatables - http://www.dynatable.com/
This is said to be the more "fun" alternative. It took concepts from datatables and made it more friendly.
Create two tables, one fixed and one in scrolling div. In first table, put first two columns, in second put rest of columns. Just make sure all cells are same height to get synchronized tables view
---------------------------------------------
|[table1]<div overflow='auto'>[table2]</div>|
---------------------------------------------
JQuery Datatables is the most comprehensive table plugin for paginating, sorting, searching table data. They also have a fixed column plugin, here's an example: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
I have a kendo grid which gets data and also font settings from the server.
The user has the option of either using scrolling or paging, but not both.
The problem is that when I set the font for the appropriate cells, that makes these rows bigger, so the rows no longer all fit inside the grid content area.
What I'm doing at the moment is all in the dataBound event:
Set the styling.
Given this styling, calculate how many rows can fit
in the content.
If the calculated row count doesn't match the
dataSource.pageSize, set the dataSource.pageSize as this value.
The problem is that the pageSize method resets the grid (thereby calling dataBound (only sometimes?!)), removing the styling and also the dataBound becomes unbound somehow.
I have a jsfiddle which fails in a different manner but I think for the same reasons as my program, but if someone could tell me how to get it working I could apply the logic to my program.
http://jsfiddle.net/y6vMx/5/
Why did you load the style when dataBound fires? Does the user have the option to change the style?
If I'll have to do something similar, I'll put styles to another event, like on page load or something similar.(the best way is to call it after you populate the grid)
I am also using kendo grid right now and I experience a lot of troubles..