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());
}
}
Related
I'm using Kendo UI Grid with server paging and sorting. When sort is changed, grid refreshes the data, but current page remains the same.
How to catch sort event and move to first page?
P.S. I've read this thread, but there discussed another case...
Consider the following approach:
use the change event of the Kendo UI DataSource to save the current sort state in some variable.
use the requestStart event to compare the previous sort state with the new sort state.
if the sort state has changed, prevent the request with e.preventDefault()
use the page method to navigate to first page
you will also need a flag variable to prevent an endless loop in the requestStart handler, as changing the page will trigger a new requestStart event
Here is a demo:
http://dojo.telerik.com/OXoYu
var sortState;
var resetPageFlag = false;
// ...
requestStart: function(e) {
//console.log(e.sender.sort(), sortState);
if (!resetPageFlag &&
JSON.stringify(e.sender.sort()) != JSON.stringify(sortState)) {
//console.log(e.sender.sort(), sortState);
e.preventDefault();
resetPageFlag = true;
e.sender.page(1);
} else {
resetPageFlag = false;
}
},
change: function(e) {
sortState = e.sender.sort();
}
// ...
How can I get the current screen I'm working on? For example, I have a slidedrawer containing buttons to navigate to another page. When I'm on a certain page(About Page) and when I tap the button to navigate to the About Page, I want to just close the slidedrawer if it is on the same page.
My idea is that to get the current page and just compare it but I dont know how.
Note: The slidedrawer content menu is a custom component.
There are several ways to solve this problem. The easiest is to install the nativescript-dom plugin and then you can do this really simply:
// This will return an array of elements that are SlideDrawer's.
var slideDrawers = getElementsByTagName('SlideDrawer');
or even better is if you have assigned your SlideDrawer an id, you can do
<!-- Declarative XML -->
<SlideDrawer id="myId">...</SlideDrawer>
// JS: Will return a single element that matching the id.
var mySlideDrawer = getElementById('myId');
However, if you just want to not use any helpers and you want to get direct access to the currentPage the method is to do:
var frame = require('ui/frame');
var myPage = frame.topmost().currentPage;
Please note; the currentPage will reflect the old page while navigation is taking effect until the navigatedTo event is fired, at that point the currentPage is actually updated to be the currentPage. However, if you are looking for the current page during any of the navigation events (NavigatingTo, NavigatedTo, Loaded, Unloaded) each of those events are transferred a parameter with the current page as part of the object.
exports.onNavigatedTo = function(args) {
var page = args.object;
// do what you want with the current page variable
}
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! :)
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.
I have replaced the traditional select/option form elements with a nifty little popup window when a triggering image is clicked. The page is for accounting purposes and so multiple line items are to be expected. I've written the javascript that will dynamically generate new line item select/option elements. When the page loads, the initial set of choices loads and the user can click on them, get a pop up with some choices, choose one and then the box closes. The move to the next choice and so on and so forth. I've added livequery to my code for those dynamic elements. However... the livequery("click"...) seems to fire no matter where the user clicks on the page. Very frustrating.
I've read on here how great "live()" is in jQuery 1.3, but I am not able to upgrade fully to jquery 1.3 because a custom JS file depends on 1.2, so using live() is out of the question, however I have invoked the livequery() plugin and I really need to understand if I'm using it correctly.
I will post partial code. There's just way too much to post all of it.
Basically, I'm searching for divs starting with "bubble" and then a number afterwards. Then run the event on each them. Only bubble1 is static, 2 and up are dynamic. Am I missing the whole usage of livequery?
>$jb('div[id^="bubble"]').each(function () {
> var divid = $jb('div[id^="bubble"]').filter(":first").attr("id");
>var pref = "bubble";
>var i = divid.substring((pref.length));
>var trigger = $jb('#trigger' + i, this);
>var popup = $jb('#pop'+ i, this).css('opacity', 0);
>var selectedoption = $jb('selectedOption' + i, this);
>var selectedtext = $jb('selectedOptionText' + i, this);
>$jb([trigger.get(0), popup.get(0)]).livequery("click",
> function () {
>//alert(i);
// code removed for brevity (just the contents of the popups)
>});
Live works by using event delegation. A click event is attached to the body, and anytime something is clicked the selector is tested against the target. If it passes the selector test it calls the function (thus simulating a click event).
You probably want something like this:
$('div[id^="bubble"]').livequery("click", function() {
var divId = $(this).attr("id");
var i = divId.substring("bubble".length);
var trigger = $("#trigger" + i, this);
var popup = $("#pop" + i, this).css("opacity", 0);
// alert(i);
}