i have a req of displaying pagination in the dojox.datagrid i tried searching but no luck. Wanted to know whether pagination is possible in dojox.datagrid Can some one confirm this please.
you have to use
dojo.require("dojox.grid.enhanced.plugins.Pagination");
In your grid
var grid = new dojox.grid.EnhancedGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px',
plugins: {
pagination: {
pageSizes: ["25", "50", "100", "All"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 4,
/*position of the pagination bar*/
position: "bottom"
}
}
}, document.createElement('div'));
Related
I have 2 questions:
Anyone knows how to make the search bar and label in one line? (red circle) Currently its 2 lines.
Preferably using the dom attribute, if possible. Or any other simple and quick method.
How to remove the space between table header and body? (yellow space). css, js methods are welcomed!
Here's my datatables initialization:
table = $('#serviceItemList').DataTable({
processing: true,
serverSide: true,
scrollResize: false,
scrollY: 300,
scrollCollapse: true,
paging: false,
info: false,
createdRow: function (row, data, dataIndex) {
$(row).attr('data-id', data.id);
},
dom: 'Bfrtip',
ajax: {
'url': "/serviceitem/list",
'type': "POST",
'data': function (data) {
data.zone = zone;
}
},
columns: [
{ data: 'checkbox', name: 'items[]' },
{ data: 'DT_RowIndex', name: 'DT_RowIndex' },
{ data: 'zone', name: 'zone', orderable: true, },
{ data: 'code', name: 'code', orderable: true, },
{ data: 'description', name: 'description', searchable: true },
],
select: {
style: 'multi',
selector: 'td:first-child'
},
});
you can try it by inspecting the element and look for its class name and then you can set the display property to none
and for the search bar do the same and set the float property to left
Im using datatables (server side randering) with checkbox plugin from Gyrocode.
var dTable2 = $('table.contracts-search-results').dataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "${someURL}",
"type": "POST",
"data": function (d) {
d.returnEmptyResult = '${returnEmptyResult}';
},
},
searching: false,
"dom": '<"top"iplB<"clear">>rt<"bottom"iplB<"clear">>',
paging: true,
pageLength: 0,
displayStart: 50,
"pagingType": "input",
info: true,
"buttons": [],
"order": [],
"columnDefs":
{"targets": 7,
"width": "75px",
checkboxes: {
"selectRow": true,
"selectAll": false
},
"stateSave": true,
'createdCell': function (td, cellData, rowData, row, col){
var $this = this;
var selectedCon = '${con}';
var arrayOfCon = selectedCon.replace(/[\[\]\s']+/g, '').split(",");
$.map(arrayOfSelectedCon, function(conId, index) {
if(cellData == conId) {
$this.api().cell(td).checkboxes.select();
}
});
},
},
{
"targets": [14, 15, 16],
"visible": false
},
],
"select": {
"style": "multi",
},
"language": {
"decimal": ",",
"thousands": ".",
"url": themeUrl+"js/libs/dataTable/lang/german.json"
},
}
}) ;
I have to pages. On first one I have datatables with configuration posted above. Second page I have another datatables with similar configuration. When user get to second page and choose some rows using checkboxes Im creating list od Ids and when user go back to first page I send Ids from second page to first one and select checkboxes on first page based on Ids from secound page.
The problem is that its working fine If all rows were on the same table page, but when user on secound page used pagination it doesnt work.
use statesave: false as given,
"stateSave": false,
The set-up:
DataTables is using remote data with pagination (AJAX-based)
YADCF is using a Select2 that's grabbing options using AJAX call
Selecting Select2 option triggers grid refresh and filtering (everything is correct)
The problem:
Right after DataTables pulls the updated rowset, YADCF re-runs its intialization routine and Select2 loses its state (i.e. the selected option is no longer selected and is not in the DOM anymore).
This:
becomes this after grid reloads (select2 control re-initialized and lost all options pulled via AJAX, including the one that was selected):
How can I avoid YADCF re-initialization in such case?
Having debugged the problem for a while I found that function appendFilters(...) is called after each grid refresh from this YADCF line:
https://github.com/vedmack/yadcf/blob/master/jquery.dataTables.yadcf.js#L3332
which, in turn is fired by DataTables' draw event.
Thanks!
EDIT:
DataTables config array:
var dataTableConfig = {
"autoWidth": false,
"deferLoading": 220,
"pageLength": 5,
"searchDelay": 0,
"searching": true,
"placeholder": null,
"ordering": true,
"paging": true,
"info": true,
"columns": [
{
"name": "company",
"data": {
"_": "company",
"filter": "company",
"display": "company"
},
"visible": true,
"searchable": true,
"orderable": true,
"className": "column_Company"
}
],
"showGlobalSearch": true,
"enableColumnFilter": true,
"columnFilterPosition": "table",
"resetPaging": true,
"select": {
"style": "single"
},
"serverSide": true,
"ajax": {
"url": "/datasource/",
"type": "post"
}
};
YADCF INIT:
colCfg = [
{
"column_number": 2,
"filter_type": "select",
"data": [],
"filter_default_label": "(select..)",
"enable_auto_complete": false,
"sort_as": "alpha",
"sort_order": "asc",
"filter_match_mode": "contains",
"exclude_label": "exclude",
"select_type": "select2",
"select_type_options": {
"width": "300",
ajax: {
url: '/datasource/',
dataType: 'json',
method: 'post',
delay: 750,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.results,
pagination: {
more: (params.page * 20) < data.total_count
}
};
},
cache: true
},
minimumInputLength: 1,
templateResult: formatItem,
templateSelection: formatItemSelection,
escapeMarkup: function(v) {return v;}
},
"case_insensitive": true,
"filter_delay": 500
}
];
yadcf.init(dataTable, colCfg);
I was using ExtJS 3.2 and to make the tree panel work I have taken reference from below link and was able to get that done.
https://www.assembla.com/code/yamt/subversion/nodes/trunk/web/js/extjs/examples/ux/XmlTreeLoader.js?rev=9
Now I have to migrate that code in ExtJS 4.1, where I am geeting errors for this code, because Ext.tree.TreeLoader is not working there. So what would be the minimal changes in the same code to make the things work in ExtJS 4.1.
Try the following code.This code is taken from Sencha API.
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
Refer API for more details.
I understood that by calling MyDetailView.Update(record.data) I send record.data to MyDetailView and can access them in the xtemplate:
tpl:'<h1>{title}></h1>'
Additionally I want to use record.data in an item of xtype 'map':
items: [
{
xtype: 'map',
getLocation: true,
padding: '20 0 0 0',
mapOptions: {
center : new google.maps.LatLng(lng, lat), // <-- here record.data.lat
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
]
How can I access the data in MyDetailView?
Thanks
----------------EDIT------------------
I add my complete code. In the list view I call an AppDetailcard.update(record.data).
var AppDetailcard = new Ext.Panel ({
id: 'detailcard',
styleHtmlContent: false,
tpl: 'my {lat}', //<-- here it works
fullscreen: true,
dockedItems: [AppDetailcardToolbar],
items : [
{
xtype: 'map',
getLocation: true,
mapOptions: {
center : new google.maps.LatLng(data.lat, data.lng), //<-- here it does not
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
]
You have to also push the new record into your items array.
this.down('map').setMapCenter({
latitude: newRecord.data.latitude,
longitude: newRecord.data.longitude
});
I usually push records, not data, into the view and then use the updateRecord event to accept that record and push it further down the items array.
Look at the navigationview example on the Sencha site, in the Show.js view file, where they do exactly that.