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);
}
})
Related
I have requirement to show icon in each datatable header.now problem is icon and text are not showing in same line because of column width.what i want to increase each header cell by 50px.
Below is my code to show icon and increase width.
"fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
$.each($('.table tr th'),function(key,val){
var title=nHead.getElementsByTagName('th')[key].innerHTML;
var new_width=parseInt($(nHead.getElementsByTagName('th')[key]).attr('style').split(":")[1].split("px")[0])+50 +"px"
$(nHead.getElementsByTagName('th')[key]).attr('style','width:'+new_width)
nHead.getElementsByTagName('th')[key].innerHTML = "<i class='fa fa-cube'></i>"+title;
})
}
Note : I am using dataTables 1.9.4
fnHeaderCallback() is not the right callback to use here, since it is called on each and every redraw. It is called when the user sorts, change page and so on. You should use fnInitComplete() instead.
The reason for the header titles becoming multiline is mostly caused by the browser defaults and the CSS settings (or lack of same). Add this CSS :
.dataTable th {
white-space: nowrap;
}
and add the icons in the fnInitComplete() callback :
var table = $('#example').dataTable({
fnInitComplete: function() {
$("#example th").each(function() {
var $th = $(this);
$th.html("<i class='fa fa-cube'></i>"+$th.text());
})
}
});
demo -> http://jsfiddle.net/2hLn31gp/
There should be no reason at all for manipulating the width of the headers programmatically. The widths is either
User defined widths, i.e aoColumns :[ { sWidth: "10%" }] etc
Calculated widths, where dataTables calculate the minimum width required by each column to show its content based on the table width as 100%. An attempt to increase width programmatically as above (by adding 50px to each) will increase the width to 100%+(50px*columnCount) - that is not what you want.
A combination of 1 and 2.
If you need to recalculate the width of the columns, simply recalculate them by using fnAdjustColumnSizing() :
table.fnAdjustColumnSizing();
or force the widths "manually" :
aoColumns: [
{ sWidth: "100px" },
{ sWidth: "50px" },
{ sWidth: "250px" }
]
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
};
This is what the popup looks like now:
I want to make the actual popup bigger as well as all of the text boxes inside.
Apparently, this changes the size of the actual popup and then centers it on the screen, the problem now is that I don't know how to resize the text boxes inside. It is executed on the EDIT event of the grid:
window.setTimeout(function () {
$(".k-edit-form-container").parent().width(800).height(400).data("kendoWindow").center();
}, 100);
Does anyone know how to do this?
Can you just use regular CSS? Like:
.k-edit-form-container .k-textbox,
.k-edit-form-container .k-widget
{
width: 600px;
}
You just have to make the selectors be a bit more specific that Kendo's built-in ones.
You can just delete the "parent"
window.setTimeout(function () {
$(".k-edit-form-container")
.width(800)
.height(400)
.data("kendoWindow")
.center();
}, 100);
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).
Please look at my jsFiddle posted:
http://jsfiddle.net/chugh97/w3Kzt/1/
I have a fixed width jqGrid with scroll enabled and shrinktofit: false. Now when I tab through the 4th field in the jqGrid filter textbox, the filter textboxes are misalinged with the jqGrid columns. How can this be fixed?
jqGrid has very restricted support of keyboard navigation. I agree that the problem which you describe exist in the current (v. 4.3.1) implementation of jqGrid. So +1 from me for the question.
To fix the problem I suggest the following
$('#grid').closest('.ui-jqgrid-view')
.find('.ui-jqgrid-htable .ui-search-toolbar .ui-th-column')
.find('input, select')
.focus(function (e) {
var $header = $(e.target).closest('.ui-jqgrid-hdiv'),
$body = $header.siblings('.ui-jqgrid-bdiv');
setTimeout(function () {
// we syncronize the scroll in the separate thread
// to be sure that the new scrolling value
// already set in the grid header
$body[0].scrollLeft = $header[0].scrollLeft;
}, 0);
});
The usage of setTimeout is required in the Google Chrome web browser for example.
See the demo here.