I want to widen the popup window in Kendo UI grid. So that also the elements in it fill the window.
In the answer How do I Change window size on kendo grid editor template? only the window is made wider, but not also the elements contained in it.
Simple provide the width in your grid definition: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.window or see https://stackoverflow.com/a/30778406/4944034 for a practical example.
in the area of kendoGrid add the following code to the event edit:
jQuery("#grid").kendoGrid({
...
edit: function(e){
kendoUi_popUpEditWindow_setWidth('950px');
},
...
})
and the corresponding function:
function kendoUi_popUpEditWindow_setWidth(width){
if(typeof(width) != "string" || (width + '').indexOf("px") == -1 ){
width = "800px";
}
left = (jQuery( window ).width() - parseInt(width)) / 2;
left = left + "px";
jQuery(".k-widget.k-window").css('left', left);
jQuery(".k-edit-form-container").attr('style', 'width:' + width);
jQuery(".k-edit-form-container .k-edit-field").children().attr('style', 'width:100%');
}
Related
I am aware of this beeing a frequently discussed issue.
Anyway I want to give it a shot:
I am using multiple kendo grids - so I am looking for a reusable and clean way how to set the grids styles without having side effects on each other.
So here's what I want to achieve:
Grid style 1:
- min-height: 150px max-heigt: 600px scrollable
Grid style 2:
- min-height: 150px max-heigt: 300px scrollable
Doesn't seem very extraordinary, does it?
I tryed setting html.attributes, setting scrollable() height and overwriting css.
But in the end I'll always find myself in having following problems, though:
Grid content div overflows the parent div
no scrollbars anymore
"fixing" by overwriting css classes what has undesired side effects
of course
Does anybody have a solution?
I have a possible solution which I have modified from a bit of code I use.
independent grid height resizing
So lets examine the magic bit for you:
function resizeGrid(grid, size, fixed, minHeight, minSizeHeight, maxHeight, maxSizHeight) {
if (size === null || size === undefined) {
size = 0.6;
}
if (minHeight === null || minHeight === undefined) {
minHeight = 600;
minSizeHeight = 150;
}
if (maxHeight === null || maxHeight === undefined) {
maxHeight = 800;
maxSizHeight = 600;
}
var windowHeight = $(window).height();
if (!fixed) {
windowHeight = windowHeight * size;
} else {
windowHeight = size;
}
if ($(window).height() < minHeight) {
windowHeight = minSizeHeight;
}
if ($(window).height() > maxHeight) {
windowHeight = maxSizHeight;
}
var gridContent = $("#" + grid + " div.k-grid-content");
var lockedContent = $("#" + grid + " div.k-grid-content-locked");
gridContent.height(windowHeight);
if (lockedContent !== null && lockedContent !== undefined) {
lockedContent.height(windowHeight);
}
}
So based on your requirements and my understanding you want to be able to change the scrollable area dynamically and independently of one another.
in this example we provide the following signature:
resizeGrid(grid, size, fixed, minHeight, minSizeHeight, maxHeight, maxSizeHeight)
Grid ==> the id of the grid we are working with
Size ==> this is the size either expressed as a pixel value or percentage (eg. 150 or 0.4 (40%))
fixed ==> this tells the function if the value passed is a fixed height or a percentage height for the initial height requirements
minHeight==> this should be the minimum screen size that the grid should resize itself
minSizeHeight ==> this is the size the grid should resize to if the minHeight condition is met.
maxHeight ==> this should be the maximum screen size that the grid should resize itself.
maxSizeHeight ==> this should be the maximum size of the grid should be be above the maxHeight of the window.
Note: the final 4 settings will use pixel defined values but the code could be adapted to work with percentages as well
so in the example I have provided I have declared:
resizeGrid("grid",600,true, 400,150, 800,600 );
resizeGrid("grid2",150,true, 300,300, 600,400 );
So the first grid #grid will set itself to a size of 600px initially and then resize itself if the window goes below 400px and over 800px. In both scenarios it will resize to 150px, 600px respectively.
then when we start resizing the window I have added this:
$(window).resize(function () {
console.log("resizing::" ,$(window).height() );
resizeGrid("grid",600,true, 400,150, 800,600 );
resizeGrid("grid2",150,true, 300,300, 600,400 );
});
This will then look for the window resize event to be fired off and then resize the grids accordingly.
I have added the console statement purely so you can see this event being fired off and what the window height is to check the code is being activated at the right point.
One thing you may notice are these lines here:
var gridContent = $("#" + grid + " div.k-grid-content");
var lockedContent = $("#" + grid + " div.k-grid-content-locked");
Due to the grid "wrapping" the locked and non-locked portions into different tags I am checking to see if there are any locked columns as otherwise you will have different scrolling/unexpected style on the various parts of the grid.
If you need anything more explaining/changing let me know and I will update my answer accordingly. Hopefully this is what you are after.
Edit: I have updated the example so you can see the grids side by side
I am new to webix and have a problem with ui.window!
For me the window never adjusts to the parent HTML element. :(
I want the window to have the same width and height as the parent (100%).
What am I dowing wrong?
See code in Webix Snippets: http://webix.com/snippet/c5fe5e96
According to the documentation:
"Window Sizing and Positioning
The must-have parameters for the window are width and height. If you don't set [them], the window [...] will occupy the whole screen."
http://docs.webix.com/desktop__window.html
"adjust - adjusts the component to the size of the parent html container"
http://docs.webix.com/api__link__ui.popup_adjust.html
Window and Popup widgets are working for the whole app, they are not using container and can't use .adjust as well.
You can size the Window to the document by using fullscreen option
var popup = webix.ui({
view: "window",
fullscreen:true,
http://webix.com/snippet/93a5e3ba
or by using the complex position property
var popup = webix.ui({
view: "window",
position:function(state){
state.left = state.top = 10;
state.width = state.maxWidth - 20;
state.height = state.maxHeight-20;
},
http://webix.com/snippet/164a3955
I have managed to make the window inherit the size of the HTML container by getting the HTML container size by using getNode() and then using setPosition, config.width, config.height and resize().
See example below.
http://webix.com/snippet/056b9610
When the datatype is Date, the kendo grid uses a kendo datepicker with dropdown calendar for the column.
The datepicker's dropdown calendar usually aligns itself flush with the left edge of the input box. If there isn't room for that, it is moved to the left, but not quite enough. This presents a problem when the rightmost column in the grid is a Date, and the grid is occupying 100% of the width available on the screen: the Saturday column in the dropdown calendar gets "cut off". See pic attached.
Is it possible to tell the calendar dropdown (for a particular column) to align itself flush with the right edge of the text input?
I know that bug. Your datepicker animation container is hidden under right scrollbar. If you set body overflow to hidden, you will not have a scrollbars and calendar will fit and touch right border of screen, like in this example: http://dojo.telerik.com/UCOhA
However if you can't turn off the body scrollbars you need to set calendar position manually dirty way like this:
$("#piker").kendoDatePicker({
open: function(e) {
//setTimeout to let kendo make k-animation-container element at first open
setTimeout(function(){
var animationContainer = $("#" + e.sender.element.attr("id") + "_dateview").parent();
var left = e.sender.element.offset().left + e.sender.element.closest('.k-datepicker').width() - animationContainer.width();
animationContainer.css('left', left);
});
},
//turnoff the animation to avoid strange visual effects
animation: {
open: {
duration: 0
}
}
});
Running example: http://dojo.telerik.com/Imiqa/2
I have a pie chart using BIRT. Works fine but the problem is it only shows data that is "fitted" in the chart's size. Is there a "can grow" property equivalent for pie charts? I mean all data shows only if I resize the pie chart into larger one. But if I choose a larger amount of data, it won't fit again. I need the size to be "auto resize" according to how many data to be displayed.
I tried modifying the advanced settings but nothing worked
Format - Overflow: Auto, Scroll and Visible
Push down - set to true
I do not see any other properties related to pie chart formatting. Can anyone point me to right direction? thanks.
nevermind, found it here but I tweaked it a bit. OnRender event of the chart itself type this:
function afterDataSetFilled(series, dataSet, icsc)
{
if( series.getSeriesIdentifier() == "categorySeries" ){
if( dataSet.getValues().length <= 4 ){
icsc.getChartInstance().getBlock().getBounds().setWidth(450);
icsc.getChartInstance().getBlock().getBounds().setHeight(250);
}
if( dataSet.getValues().length > 4 && dataSet.getValues().length < 8 ){
icsc.getChartInstance().getBlock().getBounds().setWidth(450);
icsc.getChartInstance().getBlock().getBounds().setHeight(400);
}
if( dataSet.getValues().length > 8 ){
icsc.getChartInstance().getBlock().getBounds().setWidth(450);
icsc.getChartInstance().getBlock().getBounds().setHeight(600);
}
}
}
"categorySeries" is the title of the "simple series" type that can be found in "Format Chart" tab when chart is double clicked.
I have a kendoGrid displaying a data source that has 200 rows and 50 columns. There are vertical and horizontal scrollbars, which is desired.
How can I cause the grid to scroll into view a specific column, row or row&column ?
Two use cases are:
Column name Z selected from a menu, jump to column Z (scroll it into view)
Grid with data source is FOO is scrolled about until Column X is left most column in view. The grid then replaced with a new one whose data source is BAR. If BAR contains a column X then I want to scroll it into view.
Thanks,
Richard
The very first thing that you need is finding the position of the cell. If you know the number of the row and the column you can do:
var col = 30;
var row = 100;
var pos = $("tr:nth(" + (row - 1) + ")", grid.tbody).find("td:nth(" + (col - 1) + ")").position();
Then you have to scroll and you can go directly using:
$(grid.tbody).closest(".k-grid-content").scrollTop(pos.top).scrollLeft(pos.left);
or animate it using:
$(grid.tbody).closest(".k-grid-content").animate({
scrollTop : pos.top,
scrollLeft: pos.left
}, 2000);