I have a Kendo Grid inside a Kendo Window. How can I enable its horizontal scrolling using wrappers?
I've tried anything, but none of them worked. The last thing I tried was surrounding the Grid with a width-limited div.
Have you tried using frozen column, I prefer use this feature if I have a lot of columns to be displayed.
Demo Section
Apply Scrollable() and give Width for each columns and then if the total width exceeds the width of the grid the horizontal scrollbar will appear.
Reference
Scrolling
Kendo Grid Horizontal Scroll bar
Another solution here could be using 'table-responsive' from bootstrap.
For example:
<div class="table-responsive">
<div id="grid"></div>
</div>
and in the declaration of the kendogrid something like this:
$("#grid").kendoGrid({
dataSource: dataAjax.Rotation,
scrollable: false,
});
Simple Solution to get the horizontal scrolling for a Kendo Grid
If you want to get horizontal scrolling on the whole grid not on specific columns then you can try this.
Use width: 'auto'
It will show horizontal scrolling if grid's size is more than the container.
Demo
I had the same issue with Angular 12. Adding [scrollable]="true" to the kendo-grid solved my issue.
Related
When I am placing the jQuery selectmenu inside a div that has a CSS property overflow: scroll and is smaller then its content, then the dropdown menu is not following the scrolling inside the overflown div.
See the example here
https://codepen.io/Nighel123/pen/gZeQVd?editors=1000
I have found a way to fix it with this code:
$(".demo").scroll(function(){
$( "#salutation" ).selectmenu( "open" );
});
But I think this is not the best way to fix the problem since the dropdown does not seem to follow the select element precisely when I am trying the code on my computer. Additionally the dropdown menu opens when I am scrolling inside the overflown div, what is also not the expected behavior of a dropdown.
I also tried to trigger the scroll event of the window object, when the overflown div gets scrolled to fire the positioning methods of the jQuery dropdown menu. But this did not work at all.
I would like to follow the dropdown menu follow my select item more precisely with the scrolling of the overflown div. And maybe also get some less ugly hack compared to what I did above.
I found a solution with the appendTo method of the jQuery-UI selectmenu. Just append the dropdown menu to the div that is being scrolled and it works!
I've a kendo grid with Navigatable option, and the grid navigation is working fine when I press Tab. But when I make some columns in grid as locked (frozen columns), the grid navigation is not working as expected. The navigation is working for only frozen columns and then for unfrozen columns.
#(Html.Kendo().Grid<ProcessModel>()
...
.Navigatable())
dojo.telerik.com/#joeTopazz/ODEbA
Thanks in Advance.
When the Grid has its keyboard navigation enabled, tabbing inside the widget is managed only when incell editing is used. In your example with inline editing, tabbing is managed by the browser and the observed behavior is expected due to the separate tables used for the locked and unlocked columns.
To achieve the desired tabbing order, use incell editing, or set a tabindex for all buttons and inputs from the edit row in the Grid's edit event:
http://dojo.telerik.com/EVuNe
$("#grid").kendoGrid({
navigatable: true,
editable: "inline",
edit: function(e){
e.sender.wrapper
.find(".k-grid-edit-row input,.k-grid-edit-row a")
.attr("tabindex", 1);
}
});
I am using a kendo grid to display my data. I want to show another kendo grid inside one cell of my kendo grid. Is there anyway I can achieve this?
There is a 'way' (using the "template" option of the corresponding Grid column), however I would suggest to instead use Grid hierarchy to show details about current row:
Grid: hierarchy demo
Nesting another Grid inside cells of current Grid is not a good idea as it will not be usable, it will reduce the page performance etc.
I have the following problem. I'm currently building a onepager dashboarding page with the kendo framework but I have the following problem. All the kendo widgets ignore my fixed header and are floating on my page.
You can find an example on this url:
enter link description here
If you scroll above you will see that my kendo widgets (window, charts) are floating above my navigation. I looked for hours to find the right css prop to disable that, but didn't find it.
Thanks in advance
These are Kendo Windows and not Kendo Panels. Panels are decoration of an HTML element and they do not float. Windows is much more than that and float in front of others elements, that's why they are called windows.
A panel is the following HTML:
<div id="panel" class="k-block">
<div class="k-header">Header</div>
Block with header
</div>
You can find more panel styling here: http://demos.telerik.com/kendo-ui/styling/panels
I am adding columns dynamically in the kendo ui grid. At the top of the grid the default text is displayed 'Drag a column header and drop it here to group by that column'.
At the footer of the grid the paging details are displayed including icon for navigation.
But, the grid is not displaying the border at the top and bottom, means the default text displayed at the top of the grid is not having the border and also the footer including the paging control the border is missing.
How can I add that border.
Thanks
For styling group header o a grid you need to include the definitions in k-group-header. Something like:
.k-grouping-header {
border: 5px groove red;
}