My jqGrid code is as below. The pagination grid shows up, but all 500 records are displayed in a single page. I need 10 records per page.
jQuery("#Mygrid").jqGrid({
datatype: "local",
height: 250,
autowidth: true,
page: 1,
total:10,
records: 15,
viewrecords: true,
pager: '#MyGridPager',
colNames: [some col names],
colModel: some col
});
To specify the page size one have to use You should use rowNum parameter: rowNum: 10 (see here).
Related
I was wondering if we could change the numbers of the pages ?
Let say I'v got 10K lines rendered by 1000 lines on each page. so we've got 10 pages and I've set 5 buttons so I've got pages 1, 2, 3, 4, 5 and the navigation buttons.
I'd like to insert for exemple "..." instead of the last page button (5 in our case) when I've got more than 5 pages.
Thank you for any help !
const defaultOptions = {
// Datas
columns: tableColumns,
ajaxURL: props.ajaxURL,
// Layout
pagination: 'remote',
ajaxFiltering: true,
ajaxSorting: true,
paginationButtonCount:5,
paginationSize: 50,
paginationSizeSelector: [10, 50, 250, 1000],
layout: "fitColumns", // fitColumns, fitDataTable, fitDataStretch, fitDataFill, fitData,
responsiveLayout: "collapse",
height: '100%',
keybindings: true,
cellVertAlign: 'middle'
}
If you want to change the text of the "last" page button to be "..." you can do this in the localisation options:
const defaultOptions = {
langs:{
default:{
pagination:{
last:"...",
}
}
}
}
Full details can be found in the Localization Documentation
I'm trying to setup an editable grid in Tabulator where I want to click on a cell to select it and then use arrow keys to move around the grid.
Then, if a key is pressed such as Enter, the value is able to be edited.
The current behaviour that I can't seem to disable is that as soon as you click on an editable cell it immediately opens the editor. Depending on the type of editor, the arrow keys might move to the adjacent cell or they might just interact with the editor (e.g. for a select editor, the up and down just moves up and down the list of options). If I hit Esc in the cell then editing stops as expected but the cell is not selected in any way so there is no way to move to an adjacent cell.
A very simple setup for the table is,
{
data: gridData,
layout: "fitColumns",
columns: [
{ title: 'Name', width: 100, field: 'name', editor: 'input', },
{ title: 'Age', width: 60, field: 'age', editor: 'number', },
{ title: 'Colour', width: 100, field: 'colour', editor: 'select', editorParams: {
values: ['red', 'green', 'blue']}
},
{ title: 'Progress', width: 80, field: 'progress', editor: 'number', },
],
pagination: "local",
paginationSize: 25,
paginationSizeSelector: true,
}
You can navigate inside your tabulator table with the following code:
keybindings:{"navUp" :"38","navDown" :"40","navLeft" :"37","navRight" :"39"},
Moreover you can asign double click inside column declaration in order to change your data.
{title:"Name", field:"name", cellDblClick:function(e, cell){
//e - the click event object
//cell - cell component
},
}
To prevent enter data with one click, just leave empty the corresponding callback.
Also take a look at this helpful documentation: Tabulator Key Bindings
and Tabulator Click events
Problem: scroll to a specific location in a jQuery dialog
I have a datepicker inline on my site which shows the present month calendar.
If the user clicks on any of the dates I am showing a list of calendar events coming from a Feed.
The code is as below:
<div id="datepicker" style="font: 80% 'Trebuchet MS', sans-serif;"></div>
<script type="text/javascript">
var caldate;
$("#datepicker").datepicker();
$("#datepicker").change(function() {
caldate = $(this).val();
$("#dialog").dialog({
bgiframe: true,
maxHeight: 450,
width: 600,
modal: true,
draggable: true,
resizable: false,
position: 'center',
show: { effect: "fade", duration: 600 },
hide: { effect: "fade", duration: 600 }
});
});
</script>
<div id="dialog" title="Calendar Events">DisplayFeed("Calendar Events")</div>
DisplayFeed retrieves data from a html helper class and the data is show properly.
Now the hurdle is when the user selects a particular date in datepicker inline.
I need to scroll to the events occurring on a selected date from the list in dialog.
I tried to get the html inside the div dialog. Where as I am getting the error as undefined when I try document.getElementByID("#dialog").innerHTML to compare the dater with caldate captured during the selection.
Any idea's to put me in the correct direction would be of a great help.
Thank you.
Solved the issue by adding a special div ID generated by event date (Convert date to Linux time stamp and added to div as ID), For each event.
Then scrolling to the event occurring on the selected date, by converting the selected date to Linux time stamp and using document.getElementById(linuxtimestamp.toString()).scrollIntoView() in javascript.
I'm working with this scroller
http://coolcarousels.frebsite.nl/c/2/
I have this setup below.
My issue is I have it set to visible: 4 and I have 4 images, so it doesn't scroll. If I set it to visible: 3 then it works as expected. But I want to show all 4 images in one screen when you open the browser full width on a 1920px wide resolution. So the issue seems to be. If I set visible to the amount of images I have then it stops working.
Is there a way to have all 4 images on screen at one time then still scroll through them?
$(function() {
$('#carousel').carouFredSel({
width: '100%',
align: 'left',
items: {
visible: 4,
start: 0,
},
scroll: {
items: 1,
queue : true,
fx: "scroll",
easing: "swing",
duration: 1000,
timeoutDuration: 3000
},
prev: '.prev',
next: '.next',
auto: {
easing: "quadratic",
button: '.play',
pauseOnEvent: 'resume',
pauseOnHover: true
}
}).find(".slide .plusNav").hover(
function() { $(this).find("div").slideDown(); },
function() { $(this).find("div").slideUp(); }
);
});
try this
items: {
minimum: 0,
},
I have resolved this issue by setting minimum to 0.
items: {
minimum: 0,
Actually, setting the minimum attribute to zero forces the scroll bar to be displayed always irrespective of number of items currently displayed.
This was required for me because, automatic enabling of scroll bars was not working on certain screen resolutions- I had to add 2 more items to make the scroll bar visible which was not the expected behavior.
As a work around, I set minimum: 0 - it resolved the issue.
I was able to do this by editing the source :/
If you comment out this lines 554 & 556 in jquery.carouFredSel-6.2.0.js like this...
// not enough items
var minimum = (is_number(opts.items.minimum)) ? opts.items.minimum : opts.items.visible + 1;
if (minimum > itms.total)
{
// e.stopImmediatePropagation();
// return debug(conf, 'Not enough items ('+itms.total+' total, '+minimum+' needed): Not scrolling.');
}
...it worked for me.
Access the wrapper and set its height (assuming all children have the same height):
var carousel = [your_carousel],
carousel_wrapper = carousel.parent();
carousel_wrapper.height(function(){
return (carousel.children('[child_selector]').length) * [child_height];
});
The thing here is, there will be a weird behavior when the carousel animates. This is because the maximum height was done ((n-1) * child_height) intentionally as a mask, along with an overflow: hidden.
Another option would be to duplicate one of the children, but that isn't semantic.
I have a grid with data, contained in a panel which also hold a title and a smaller summary grid.
the panel has layout fit and therefore the title and first grid, which is the summary grid, are displayed just fine. But the grid in question has more records than can be shown on the screen and its component height is not adjusted to the size of the panel which always fits with the height of the browser window.
What I would like to have is that the grid component's height, like the panel, is adjusted to its parent so that the scrollbar inside the grid body will show up.
My code is similar to this (initComponent is of an extension to Ext.panel.Panel):
(header in this code means the summary grid)
initComponent: function (config) {
var config = {
border: false,
hidden: false,
hideMode: "display",
padding: '5',
layout: "fit"
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
title = Ext.create("Ext.panel.Panel", {
html: '<h2>title</h2>',
padding: '5',
border: false
});
// the stores for the grids are created here
var storeHdr = DataStoreFactory.CreateStore("GetHeaderP", DataStoreFactory.fieldsCollection.Default);
var storeBdy = DataStoreFactory.CreateStore("GetBodyP", DataStoreFactory.fieldsCollection.Default);
var grdHeader = Ext.create("Ext.grid.Panel", {
store: storeHdr,
columns: getHeaderColumns(),
columnLines: true,
autoHeight: false,
autoWidth: false,
enableHdMenu: false,
enableColumnMove: false,
enableColumnResize: false,
disableSelection: true,
trackMouseOver: false,
sortable: false
});
var grdBody = Ext.create("Ext.grid.Panel", {
id: id,
store: storeBdy,
columns: getBodyColumns(),
columnLines: true,
autoHeight: false,
autoWidth: false,
autoScroll: true,
scroll: "vertical",
enableColumnMove: false,
enableColumnResize: false,
enableHdMenu: false,
trackMouseOver: false,
disableSelection: true
});
},
var headerGridContainer = Ext.create("Ext.panel.Panel", {
layout: "fit",
border: false,
items: [grdHeader]
});
var bodyGridContainer = Ext.create("Ext.panel.Panel", {
layout: "fit",
border: false,
items: [grdBody]
});
this.add(title);
this.add(headerGridContainer);
this.add(bodyGridContainer);
storeHdr.load();
storeBdy.load();
this.doLayout();
}
I hope someone can help me with this. Thanks in advance
edit - screenshots how it is and how it should be. Realtime Data is removed or blotted out, since it is private and doesn't matter for the problem.
this is how it is
this is how it should be
You're using layouts in a wrong way. First, your main container has layout 'fit' which supposed to be used when you have single item inside - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Fit - and you have few items.
Second, try to avoid over-nesting. You're wrapping your grids into panels and then put these panels inside container. Is there a reason for that?
Please post a screenshot of what you have and what you want to have and we will help you figure out layouts that you need to use for this.
Update:
Try to use layout: 'hbox' in your main container. And specify flex: 1 for the main (bottom) grid if you want it to fill the rest of the screen. Son basically you would have something simliar to this (in you main container):
{
layout: 'hbox',
..
items: [{
xtype: 'panel', // header
height: 100,
},
{
xtype: 'grid', // first grid
height: 200
},
{
xtype: 'grid', // second grid
flex: 1
}]
}