I'm converting a large Dojo 1.1 application to Dojo 1.9.1 & in the process replacing dojox.Grid with dgrid.Grid. My initial issue was that the column headings were consistently being overwritten by the first row. Researching here I discovered that since the grids are being embedded either directly or indirectly within dijit layout widgets that I should use the dgrid.extensions.DijitRegistry mixin. However this in turn results in the grids not being displayed at all. They are being added but are being hidden by their style being explicitly set to zero width & height, which in the past I've identified as a symptom of a resize problem. These grids are on different tabs of a TabContainer each of which displays a custom widget. Each of these custom widgets implements a simple resize method which resizes the "containing" ContentPane upon which one or more grids are added.
My understanding is that the DijitRegistry mixin should cause the grid to be registered in the dijit registry & that this should mean that when resized the grid should be resized as a "dijit" child of the content pane.
Obviously something is wrong but I'm unsure where to look. Suggestions & solutions appreciated.
It's typically just a matter of calling resize(). One technique I use when creating custom widgets that contain a dgrid is to extend from a layout widget, such as BorderContainer, instead of dijit/_WidgetBase. This gives me a hook into the resize function. I simply override it, call this.inherited(arguments), then explicitly resize my grid. Other than that, you can use .on to connect to show events on whatever the grid's container is and have it resize whenever the container is shown.
Related
With your help, as well as with the help of manual I wrote a combobox control for the work items. I set the height (100px for exmpl) of the control in the file vss-extension.json (contributions -> properties -> height). It looks like this:
https://gyazo.com/3490e0ed2ce93c2710df1689c108cbf4
but when i opened dropdown list of combobox is displayed only in the area of the my control:
https://gyazo.com/a9c1ae6f8ecc9965f37ce677aa69956a
I can set the height of the control so large that the dropdown list will be seen completely, but it looks so crooked
https://gyazo.com/5723d1ae0a8362cc77bcd36d1be3962f
Judging by the html, this is due to the fact that my control is placed as a separate html-document inside the frame.
how to make my control to open the drop-down list on top of other fields?
The drop list should be dynamically base on your needs. If you hard code the height, when you add some values in the drop list, it will not expand correctly and be cropped out.
You could try to use via resize() method in Core SDK.
If you want to dynamically resize the iframe, you can use the resize
method available in the client SDK.
First, remove the "height": 100px, section from the contribution preperties.
And then, call the resize() method . For example, resize the width to 100 and height to 200:
VSS.resize(100,200);
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 am trying to create dynamically resized panels with react and foundation. I have tried react-split-pane and other similar libraries, but they are messing with the responsiveness of the page. I also tried the resize css3 property but it is not flexible as it only allows the containers to be resized only to the right and bottom and I was unable to style the resize handle to be a horizontal or vertical bar.
Any suggestion would help.
This will be possible with react-resizeable once pull request 76 gets handled.
For now, you can grab the code from the fork.
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..
In my project I have a long scrolling page that has a project grid. when you click on a project, I ajax load that project, then slide open a window pushing the project grid down, displaying the chosen project. Each projects will have different heights based on the content. I need the content that shows below the project grid to always show at the end of the page. Currently when the grid slides open it slides right over the "footer" content (rough example at the bottom).
The skrollr documentation says that if the window resizes, you should call the refresh function.
I run this function on init, on project grid click, and I don't see the window adjusting to the new height of the content. The goal is to have the footer appear always a couple hundred pixels after the project grid whatever it's current height/position.
http://caava.elusiveform.com/example.html
I don't think this is related to skrollr. If you want the footer to appear after the content, then make sure it's there in the document flow. You are using position:fixed and mix it with other stuff. I recommend to first create the page without skrollr and then add animations using relative mode. The skrollr.css file you are using is outdated, it doesn't exist any more.
After you made sure the footer is correctly placed, then you can call refresh to make your animations work (they depend on data-end, which changes and needs to be recalculated). In your case, that would probably be enough:
s.refresh(document.getElementById('footer'));
Btw, the skrollr documentation says
Window resizing is handled by skrollr.
refresh is only needed when you change the DOM and skrollr can't detect that.