KendoUi Grid setting pagesize in databound - javascript

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..

Related

TFS 2017 and custom control area

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);

AG-Grid (Vanilla JS): Loader overlay does not display when duplicating rows

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?

Webix: resizing column after dynamic load

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

Using DijitRegistry mixin with dgrid causing grid to disapear

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.

Dropdownlist formatting using CSS

I am basically using a dropdownlist control on an asp.net page, where I have set the width to 150px. In mozilla browser, it is showing the list items expanded, whereas in IE, the list item text is restricted to drop down list's width. Any idea, how can I can get the same appearance of this dropdownlist in IE as it is in Mozilla.
I just want the list items container to be expanded to its maximum width, NOT the dropdownlist box.
I'm pretty sure that you can't set the width of the dropdown and the options independently - that's up to the browser. The only option is to replicate the behaviour of the dropdown list yourself in javascript. Basically you would create something that looks like a dropdown list control and attach a click event handler which would display an absolutely positioned div (or ul) displaying the options. You would then attach an event handler to each option that would hide the options and take the action you need - probably display the option in the text of the dropdown control and store the value (a hidden form field would help here if this is a form you wish to submit). This is a fair bit of work but would have the advantage of looking identical in all browsers as long as you're careful with your css. I don't have time to write the code here but it should be fairly straightforward once you accept that there is no quick fix.
I think you are looking for the following solution.
https://jsfiddle.net/avernet/2Gn2c/
$("select.ie8-fallback")
.on('mousedown' , 'select', expand)
.on('blur change' , 'select', contract);
Although i would recommend using this code only with IE using IE8 if condition.
I would have provided a solution specific to your question if you added any code, But i think you can understand from this.

Categories

Resources