I have tried a lot but didn't find the way to change page size of telerik grid on client side
Till now I have this on my grid
.Pageable(pager => pager.PageSize(25, new int[] { 25, 50, 100 })
.Style(GridPagerStyles.NextPreviousAndNumeric | GridPagerStyles.PageSizeDropDown))
It works fine but I want to bind page change event with one of my dropdowns.
I didn't find any event that telerik grid's page dropdown call that I can use to call with my dropdown change.
Is it possible to achieve this?
Found the way to do this
function pageSizeChanged(pageSize) {
if (pageSize == '#')
return true;
var grid = $('#StudentGrid').data('tGrid');
grid.pageSize = pageSize;
grid.rebind();
}
This works like a charm! :)
Related
I have set 'enableTextSelectionOnCells' option to true to select text in slickgrid but I can only select text in IE and chrome but not in firefox. I know this is bug in slickgrid and it had been fixed in slickgrid 2.2 but I am using slickgrid V2.1 and don't want to upgrade to V2.2. Is there any way to select text in firefox using slickgrid 2.1
I had the same problem as you have and I finally found the solution from a pull request made by the user icoxfog417 (thanks mate), the pull request is not yet approved (hopefully soon) but I tried it and it works on all 3 browsers which I tried (in my case FF27, IE8, Chrome31). You do have to modify 1 of the core file slick.grid.js but it's worth it :) The pull request is this one: Pull Request #746: fix issue#739
The code change is simple and looks like this:
Modify the file slick.grid.js at line 2236, replace the code with this:
// if this click resulted in some cell child node getting focus,
// don't steal it back - keyboard events will still bubble up
// IE9+ seems to default DIVs to tabIndex=0 instead of -1, so check for cell clicks directly.
if (e.target != document.activeElement || $(e.target).hasClass("slick-cell")) {
var selection = getTextSelection(); //store text-selection and restore it after
setFocus();
setTextSelection(selection);
}
then insert at line 2418 (after the setFocus() function), insert this new code:
//This get/set methods are used for keeping text-selection. These don't consider IE because they don't loose text-selection.
function getTextSelection(){
var textSelection = null;
if (window.getSelection) {
var selection = window.getSelection();
if (selection.rangeCount > 0) {
textSelection = selection.getRangeAt(0);
}
}
return textSelection;
}
function setTextSelection(selection){
if (window.getSelection && selection) {
var target = window.getSelection();
target.removeAllRanges();
target.addRange(selection);
}
}
Voilà!!! Quite happy about it :)
I am building a website using slickgrid and I have these two problems:
I want to select the entire column whenever the user clicks on the column header. I have been able to change the style of the cells as given in this example. I have not been able to figure out how to change the style of the column header
How to get to know when the end of scroll has happened in slickgrid. I am currently doing
$(".slick-viewport").scroll(function () {
if ($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight()) {
handle_end_of_scroll()
}
})
But I am dependent on the css class name of the slick grid body and I might have issues if I end up updating slickgrid later to a newer version. I might have to update this part of the code if the implementation of slickgrid changes.
Change the style of a header
You could force an update to a header which would trigger a onHeaderCellRendered event in which you could then change the class on the header. Pretty messy, though.
grid.onHeaderCellRendered.subscribe(function (e, args) {
var headerCell = args.node;
});
grid.updateColumnHeader('columnID');
Check if scrolled to end
Binding to scroll events directly is always bad. You should subscribe the the onViewportChanged event and getViewport method to check if you have reached the end.
grid.onViewportChanged.subscribe(function () {
var lastRow = grid.getViewport().bottom;
if (lastRow >= grid.getDataLength() - 1) {
console.log('at bottom');
}
});
How can you navigate to the last page of a telerik grid using javascript. My scenario is that I want to go to the last page of the grid in which the new record was added. I know I can use the 'pageTo' method in the Telerik Client API but I am not able to figure out how to count the number of pages a grid has. I was looking up if somebody was doing the same thing that I want to do and stumbled across this piece of code
var lastPage = ticketsGrid.totalPages(ticketsGrid.total);
But the value of the variable lastPage is infinity which is not possible as I only have 1 page in that grid.
Any suggestions anyone?
You can use the OnDataBound event.
You need to use a boolean flag which checks if this is the first load.
var firstTimeLoad = true;
function onDataBound(e) {
if (firstTimeLoad) {
firstTimeLoad = false;
var grid = $('#Grid').data('tGrid');
grid.pageTo(grid.totalPages());
}
}
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.
How can i maintain scroll position on postback after sorting a grid table that uses MvcContrib framework?
The usual way is to use some javascript to set the current scroll position to a hidden field, then restore that position on page load (usually in a jquery ready event).
However, that's really just a side effect. You should be doing some kind of ajax command to update the grid rather than a postback, then no scrolling required.
Use jQuery and client side cookie.
$(function(){
var posName = location.href + "_top";
$(window).unload(function() {
var top = $(document).scrollTop();
$.cookie(posName, top);
});
var goTop = parseInt($.cookie(posName));
if (goTop) {
$(document).scrollTop(goTop);
$.cookie(posName, "");
}
});
Hope this code.
A useful solution is posted here : http://www.experts-exchange.com/Hardware/Servers/Q_28082177.html
$(function(){
var top = parseInt($.cookie("top"));
if(top) $(document).scrollTop(top);
$(document).scroll(function() {
var top = $(document).scrollTop();
$.cookie("top", top);
})
});
This is a very old thread but I have posted this for developer who will be searching for this kind of issue, may help.