I am using jqgrid in my cshtml page. The problem is that the area for grid is narrow, and so I want the page number field in the pager of grid to appear somewhere else in the page near the grid. I need relocating the page number field only, not the pager itself.
The page number field is a part of the pager itself and so cannot be separated from the same. But there is a workaround for this. You can set the variable pginput to false as given on the link . It determines if the input box, where the user can change the number of the requested page, should be available. So on setting false it will not appear to the user. Using the code given below, you can get the current page number of the grid and set into any text box defined by you on the page.
$('#your_grid').getGridParam('page'); // get current page
When user changes the page number, all you need to do is set the page number using code below.
$('#your_grid').setGridParam({page:value}).trigger('reloadGrid'); // set page to grid and reload. value is the page number to be set
This code should be handled within keydown function of the text box defined by you to hold the page number.
Related
I have a form which filters through different cars, and it's working perfect.
When a user selects a "Make" the correct sibling "Models" are populated into the next dropdown, so on and so forth.
The problem is that once a user has performed a search, if they click the browser's back button, the select values which are dynamically populated - are back to default!
I am not using ajax to dynamically populate the select fields, but only javascript where I am reading a JSON file and updating the models/series/etc like that.
I have looked at this post: Preserve dynamically changed HTML on back button
And I do not understand how this works, I have also heard about localstorage - what would be the best avenue for me to travel down? Thanks.
Using localStorage for this can be a bit unwieldy (when and how should I clear this value?) and there are security related considerations that may make it an infeasible solution.
Another option is to use a hidden textbox which makes use of the browser's default behaviour.
When a page is loaded after clicking the back button, browsers appear to populate textboxes based on the value contained in it when the user left the page (even if that value was dynamically changed). Note, this is different to how hidden inputs are handled, where dynamic changes are ignored, so you must use a textbox.
<select></select>
<input type="text" style="display:none" />
<script>
// store the dropdown's value in a hidden textbox which is persisted and
// used to populate the dropdown when the back button is used to get here
$('select').on('change', function() {
$('input').val($(this).val());
});
// example showing dynamic population of dropdown
$.ajax({
url: 'api/get-dropdown-options',
success: function(data) {
// dynamically populate the dropdown
$('select').html(data);
// update the dropdown's value based on the persistent value
// retained in the hidden textbox
$('select').val($('input').val());
}
});
</script>
Because the data is dynamically loaded, the browser will not be able to repopulate the previously selected entries when the user goes back to the previous page.
I suggest you make use of the browser's localStorage to store the latest selections and retrieve them when the user goes back. To accomplish that it's as simple as setting a new variable to the localStorage object and later retrieving it like so:
localStorage.make = "BMW";
alert(localStorage.make);
Also here's a more useful example:
select = document.getElementById("make");
if (localStorage.make) {
select.options[localStorage.make].selected = true;
}
am having few check boxes on my web page and related data (few products) according to the selection of check boxes and basically products data is result of ajax call from these check boxes and i am changing the url of browser by attaching query string params using window.history.pushState. it's working fine but the problem is when i tried clicking back / front button of browser. selection of check boxes still showing latest selected ones not the previous selection
state-1: First selection url:http://localhost:1234/Brands?Color=Peach
and corresponding filter img below
state-2: Second selection url:http://localhost:1234/Brands?Color=Peach%2CPink%2FWhite and corresponding filter img below
now when i click browser back button i am getting url changes to state 1 but my filter selection is remain same like
state-3: (back button click on browser) url:http://localhost:1234/Brands?Color=Peach
how to get the previous state, again i need to find all query params in url and do uncheck operation or else any way is there is to do it ??
I'm using jqGrid to get back some data. The grid get's rendered with data and when it's loaded I add a filter and reload the grid. This basically removes certain files from the view upon first page load.
I have a checkbox on the page which toggles between two filters (including this data & excluding this data), each time it applies the filter then reloads the grid.
If I click the search button, the search popup displays my filter that I've just added.
If I then close it, change the filter through clicking this checkbox (it changes the data), then open the search popup again, my newly applied and obviously working filter is not displayed, only the previous filter!? No matter how many times I toggle the filter with the check box (which every time works to change the data), the filter in the popup does not change to what the current filter really is. Any ideas please?
I've found the solution...
"use strict";
/*global xmlJsonClass, jQuery, $ */
var rp_ge = {};
$.jgrid.extend({
searchGrid : function (p) {
p = $.extend({
recreateFilter: false,
drag: true,
sField:'searchField',
sValue:'searchString',
sOper: 'searchOper',
sFilter: 'filters',
recreateFilter was being set to false from within the library JS file on every 'reload' of the grid. So every time I added a new filter this was being reset to NOT recreate the filters in the popup.
Setting this to true solved the problem.
i am designing a form in Livecycle es4 designer, the form is saved as .xdp and we have a .xml as input, based on the data stream the form extends to n number of pages, i need to end my form on an even page always,
if there are 3 pages based on the data, i need to show an blank page as the 4th page. if there are 4 pages based on data stream we need not show the extra blank page.
i have added a blank page in my designer made it hidden from layout, , wrapped in a sub form and in the layout editor :ready i have written the following script
var pageCount = xfa.layout.pageCount();
if(pageCount%2==0){Blank.presence = "hidden";}
{Blank.presence = "visible";}
but my form now which is 3 pages does not append the blank page, any direction will be very helpful.
Thanks in advance
CW
Firstly, layout:ready event fires every time the form changes. For example:
initialy 3 pages -> script adds one more -> form changed -> script fires again and removes 4th page...
Secondly, is the Blank(empty page) visible or hidden from the start? Depending on that the Blank will be included or not in the page count at the first script run.
You could set Blank as visible from the start and per script remove it if the condition is true. You won't need else-part in this case.
I have a page which is having 2 tabs.
On first tab i have a table which contains some 'n' rows.
Each row is having a text box and depending on value entered in that text box, values in other cells for that row are calculated using JavaScript.
Now the problem is whenever i am moving to second tab after updating the text boxes and again coming back to first tab, then the values which are calculated using JavaScript are not retained whereas values entered in text box are retained.
How to retain those calculated values?
I would either re-trigger the javascript that does these calculations in an onblur event handler, or store the calculated values in cookies/session.
You could store this data in a cookie - this type of thing is exactly what they're for.