i have 100000 data in my grid at first request it showing only 10 after clicking on the page selecter it showing next data............plz answer why enhanced grid displaying only 10 rows at first time
require([ "dojo/_base/lang","dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/Pagination","dojo/data/ItemFileReadStore",
"dijit/form/Button","dojo/request/xhr", "dojo/dom",
"dojo/dom-construct", "dojo/json", "dojo/on", "dojox/grid/cells/dijit",
"dojo/domReady!" ],
function(lang,EnhancedGrid,Pagination,ItemFileReadStore,Button,xhr, dom, domConst, JSON, on) {
xhr("myservernameaddress/GridExample/string", {
handleAs : "json"
}).then(
function(dataa) {
/* domConst.place("<p>response: <code>"
+ JSON.stringify(dataa) + "</code></p>",
"output"); */
/* domConst.place("<p>response: <code>"
+ JSON.stringify(dataa) + "</code></p>",
"output"); */
var mydata=dataa;
var yourStore = new dojo.data.ItemFileReadStore({
data: {
identifier: "sno",
/* items: mydata.aa */
items:mydata
}
});
grid = new EnhancedGrid({
store : yourStore,
selectable:true,
query : {
sno : "*"
},
structure : [ {
name : "SNO",
field : "sno",
width : "100px"
},{
name : "SNAME",
field : "sname",
width : "100px",
editable:true
},{
name : "SALARY",
field : "salary",
width : "200px",
editable:true
} ],
rowSelector: '20px',
plugins: {
pagination: {
pageSizes: ["25","50","100"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 2,
position: "bottom",
search:true
}
}
});
grid.placeAt("myGrid");
grid.startup();
}, function(err) {
alert("error");
}, function(evt) {
});
});
can avoid enhanced grid default 10 rows size by this please check it
defaultPageSize: 50,.
use this in pagination plugin...
I think this might help you out:
When you define your grid you can set autoHeight
I've copied this from dojo:
autoHeight
If true, automatically expand grid’s height to fit data. If numeric,
defines the maximum rows of data displayed (if the grid contains
less than autoHeight rows, it will be shrunk).
For more informations have a look : http://dojotoolkit.org/reference-guide/1.7/dojox/grid/DataGrid.html#datagrid-options
Update1
Maybe this former Post makes it clearer: DataGrid's rowsPerPage attribute not working
Regards, Miriam
Related
if number of rows of detail grid are more, it is tedious to scroll through all rows,
Is it possible to add pagination at Master and Detail independently?
I have gone through the below link of ag-grid documentation but did not find a way or mention of pagination.
https://www.ag-grid.com/javascript-grid-master-detail/
You just need to add pagination related properties pagination : true to the detail grid options. Here is what your detailGridOptions would look like -
this.detailCellRendererParams = {
detailGridOptions: {
columnDefs: [
{ field: 'callId' },
{ field: 'direction' },
{
field: 'number',
minWidth: 150,
},
{
field: 'duration',
valueFormatter: "x.toLocaleString() + 's'",
},
{
field: 'switchCode',
minWidth: 150,
},
],
defaultColDef: { flex: 1 },
pagination : true, //set pagination to true
paginationPageSize: 5 // define page size, default is 100
},
getDetailRowData: function(params) {
params.successCallback(params.data.callRecords);
},
};
}
Attaching the example screenshot -
Used this example
Here is my JS code for JS Grid
$(function() {
$.ajax({
type : "GET",
url : "/Final/Reports?value=2016-03-03&value2=2017-03-03"
}).done(function() {
$("#jsGrid").jsGrid({
height : "auto",
width : "100%",
filtering: true,
sorting : true,
paging : true,
autoload : true,
pageSize : 3,
controller : {
loadData : function(filter) {
return $.ajax({
type : "GET",
url : "/Final/Reports?value=2016-03-03&value2=2017-03-03",
data : filter
});
},
},
fields : [ {
name : "patientId",
type : "text",
width : 150
}, {
name : "patientName",
type : "text",
width : 150
}, {
name : "genderId",
type : "number",
width : 150
}, {
name : "mobile",
type : "number",
width : 150
}, {
type : "control"
} ]
});
});
});
I am new to JS grid and I fetched the data using servlet and it is shown in the grid. But I don't know how to filter the data.
Any ideas?
Client-side filtering and server-side filtering are completely on
shoulders of developer. Client-side filtering implemented in loadData
method of controller. Server-side apparently implemented with server
script that receives filtering parameters, and uses them to fetch
data, and pass to client.
That's why you can use client-side and
server-side filtering at the same time. Here is how your
controller.loadData method could look like in this case:
loadData: function(filter) {
var d = $.Deferred();
// server-side filtering
$.ajax({
type: "GET",
url: "/items",
data: filter,
dataType: "json"
}).done(function(result) {
// client-side filtering
result = $.grep(result, function(item) {
return item.SomeField === filter.SomeField;
});
d.resolve(result);
})
return d.promise();
}
The source issue: https://github.com/tabalinas/jsgrid/issues/32
I've created a form using ExtJs library. Here is my code;
form1 = new Ext.form.FormPanel({
bodyStyle : {
"background-color" : "#000000"
},
items : [ {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Vehicle Registration Number',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Device ID',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Default Rep',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Driver',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Assistant',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Porter 1',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Porter 2',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Porter 3',
editable : false,
},
],
buttons : [ {
text : 'Delete',
handler : function() {
}
}, {
text : 'View',
handler : function() {
}
}, {
text : 'New',
handler : function() {
}
}, {
text : 'Exit',
handler : function() {
win1.hide();
}
} ]
});
win1 = new Ext.Window({
title: 'Vehicle Assigning',
layout: 'fit',
autoScroll: true,
y: 120,
width: 600,
height: 500,
modal: true,
plain:true,
bodyStyle:'padding:8px;',
buttonAlign:'center',
closeAction: 'hide',
floating: true,
closable : true,
items: [form1]
});
win1.show();
It pop ups a new window successfully, but there is a problem. All the text fields(Vehicle Registration Number, Device ID, and so on) are not showing correctly. The form looks like following:
Why these text fields are not showing correctly ? Another thing that I want to know is how should I center the whole form within the window. I've tried following code but no luck.
layout: {
pack: 'center',
type: 'hbox'
},
Any suggestions are appreciated.
Thank you
1) Looks like your border is overlapping your labels. You can add some padding to the label if you want to move them over slightly. (see below)
2) You have to set the layout on the form, not on the window, if you want the form's contents to be centered.
The code below applies a label width of 200 to each label, adds 25px of padding to the left hand side, and centers the labels and fields in the form.
var form1 = new Ext.form.FormPanel({
bodyStyle : {
"background-color" : "#000000"
},
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
labelWidth: 200,
padding: '0 0 0 25'
},
...
i am using extjs 3.4 add add this code for add /remove key value pair in field set but is not working fine it is add the field dynamically but when we remove this browser given the infinite loop error and after some time field is also given the following error:
TypeError: this.dom is undefined
here is my code :
//This js for test only
Ext.onReady(function(){
Ext.QuickTips.init();
function addressCounter(incr) {
if (!this.no) {
this.no = 0;
} else {
this.no = this.no + 1;
};
};
var counter = new addressCounter();
console.log(counter.no);
var roomPanel = new Ext.form.FormPanel({
renderTo:"sid",
id: "roomFP",
baseCls: 'x-plain',
labelWidth: 120,
defaultType: 'textfield',
monitorValid:true,
bodyStyle: ' padding: 15px; background-color: #ffffff' ,
items:[
{
xtype: 'fieldset',
title: 'Room Properties',
collapsible: true,
id:'roompropertiesId',
items:[new Ext.Button({
text:'Add Property',
handler: function(item){
var fieldset = Ext.getCmp('roompropertiesId');
if(fieldset.items.length >5){
Ext.MessageBox.alert('Add Property','only five fields has been added');
return;
}
counter.no = counter.no + 1;
var a = fieldset.add({
xtype : 'compositefield'
,
id : 'compositefieldId'+counter.no
,
name : 'name'+counter.no
,
height : 22
,
autoDestroy : true
,
items : [{
name : 'key'+counter.no
,
fieldLabel : "Key",
id : 'keyFieldId'+counter.no
,
xtype : 'textfield'
,
width : 50
,
height : 22
,
allowBlank : true
},{
name : 'value'+counter.no
,
xtype : 'textfield',
id : 'valueFieldId'+counter.no
,
fieldLabel : 'Value'
,
width : 50
,
allowBlank : true
},{
xtype : 'displayfield',
id:'removeFieldId'+counter.no,
html : '<div class="img-delete" onclick="removeFormFields(\''+counter.no+'\');">Remove</div>'
,
height : 16
}]
});
fieldset.doLayout();
removeFormFields = function(id) {
Ext.getCmp('compositefieldId'+id).destroy();
}
}
})]
}
],
listeners : {
render : function(form){
}
},
});
});
It looks like it is bug in Ext JS.
When you put normal Container instead of CompositeField then it works properly.
I figured out that CompositeField subfields are added to BasicForm (FormPanel.getForm) on CompositeField creation, but aren't removed. This causes that, for example, BasicForm validation refers to destroyed fields, and causes error.
IMO you can freely switch from CompositeField to Container.
Call formPanel.getForm().cleanDestroyed() after composite component is destroyed.
Call function drawTable when I zoom on main chart, but don't call when I zoom on bottom navigation bar.
Example:
http://jsfiddle.net/gh/get/jquery/1.6/highslide-software/highcharts.com/tree/master/samples/stock/chart/events-selection/
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container',
zoomType: 'x',
events: {
selection: function(event) {
if (event.xAxis) {
drawTable(event.xAxis[0].min, event.xAxis[0].max);
} else {
$('#table').html('Selection reset');
}
}
}
},
rangeSelector : {
selected : 1
},
title : {
text : 'Total Traf'
},
xAxis : {
maxZoom : 14 * 24 * 3600000 // fourteen days
},
series : [{
name : 'TT',
data : data,
tooltip: {
yDecimals: 2
}
}]
});
});
I think this is some what in the direction of what you are looking for:
http://jsfiddle.net/7VgJM/3/
I was not quite sure what you were asking, but made an educated guess.