I have a kendo grid (version 2012.3.1114) that displays quite a bit of data.
The grid scrolls vertically and does not page, as this is a requirement we have.
Is there any way that the grid can maintain it's headings visible as the user scrolls down? I'm looking for something similar to how Excel behaves when you select the "Freeze Top Row" option.
Define the height of the table body as follow
$("#grid").kendoGrid({
dataSource: datasource,
pageable : false,
height: 300,
columns : [
...
]
});
NOTE: The height is the height in pixels of the body of the table (does not include header or footer).
Related
I have a Kendo grid which has a lot of columns.
At the initial loading, only a few columns are displayed since I used the hidden attribute on Grid options.
{ field: 'projDisplayId', title: "columnToBeDisplayed", width: "170px"},
{ field: 'workTypDescription', hidden: true, title: "hiddenColumn", width: "170px" },
After that, I manually added some other columns by checking them on the column menu (see My Kendo Grid)
However, when I refresh the page, the columns I added before the refresh have disappeared.
Is there any way to keep the added columns displayed even after I refresh the page?
I have kendo MVC Grid and I have to set my page size to 50, so I need to freeze the column header while scrolling.
The question is : How can I freeze the column header while scrolling ?
When you create the Grid you should define the height in pixels as well as define scrollable as true.
Example:
var grid = $("#grid").kendoGrid({
dataSource: ds,
scrollable: true,
height : "150px",
columns : [
...
]
});
See this working here : http://jsfiddle.net/OnaBai/uuPW5/
Maybe this is something you were looking for:
https://github.com/jmosbech/StickyTableHeaders
Works quite well and you don't have to have scrollbars in your grid which makes it easier to work with.
You simply link provided script to your view and call this method on load:
$('#grid').stickyTableHeaders({
cacheHeaderHeight: true,
leftOffset: 1,
fixedOffset: ...
});
Parameters are optional but cacheHeaderHeight improves performance and I had to add leftOffset because of custom grid header borders and fixedOffset because of other sticky elements.
Just set the css of the grid header like this :
.k-grid-header {
position: sticky;
top: 0;
}
This answer has already been given for kendo UI, but here is how it's implemented for kendo MVC:
.Scrollable(scr => scr.Height(400))
It will give you a vertical scroll bar, allowing the user to scroll through the data while constantly seeing both the header and footer of the table. You can read more about it here: https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/scrolling/overview.
Trouble with this solution, however, is that the grid will be 400px tall, even when there is only one row of data. You can solve this like so
.Scrollable(scr =>
{
if (data.Count() < 10)
{
scr.Height("auto");
}
else
{
scr.Height(400);
}
})
I've got a grid that's width is 100%. The columns size equals out among all columns when the grid first loads.
The user can then re-size columns to fit their need.
Now I need a way to reset all the columns back to defaults without reloading the page.
I tried refreshing the grid but that didn't work after the grid has already been bound:
.data().kendoGrid.refresh()
You might try a little trick (this is not perfect and might fail depending on your custom grid formatting). The trick is setting the widths to the same amount (ex. 100px). Something like:
Grid definition:
var grid = $("#grid").kendoGrid({
dataSource: ds,
resizable : true,
pageable : true,
columns :
[
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "City" }
]
}).data("kendoGrid");
Code for resizing:
$("col", grid.element).css("width", "100px");
In addition, you might be interested on doing:
$("table", grid.element).css("width", "100%");
This resizes the "table" columns to use all the original space otherwise (just doing the col resizing) you might end-up with equally spaced cols but not using all the original width of the table).
You can see how it works here: http://jsfiddle.net/OnaBai/a9QSr/
Hello a have a simple question I have defined columns with property resizable: true.
How do I manage to let user re-size column with their mouse, like they will do in most grid control?
Columns are resizable by default, but you have to activate resizing on the whole grid by setting enableColumnResize to true in the grid options. See this Plunker.
$scope.gridOptions = {
data: 'myData',
enableColumnResize: true
};
How can I change the size of buttons and text (or style) in Kendo ui grids?
I want to use them for a responsive web page (mobile and desktop).
Change the text size of rows is easy:
columns: [
{
field: "Title",
width: 100,
attributes: {
"class": "myClass",
style: "font-size:20px;"
}
}
]
But I don't know how change the size of the title of columns and buttons
In this section you can see how you can change the messages the Grid uses or the text for the buttons. use ctrl+f and search for 'message' and 'text'.
Customizing the buttons style is not a good idea (imo). However you can just use CSS classes with "stronger" selectors.