In my dojo dataGrid if i select 7th and 8th rows for example in the first page and if i move to second page by using pagination feature. The rows(7th and 8th row which are selected in first page) are selected by default in the second page also.
Here is my grid:
var grid = new dojox.grid.EnhancedGrid({
id: 'linesGrid',
style: 'width:950px;height:250px;',
store: store,
structure: layout,
rowSelector: '20px',
plugins: {
indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"},
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'));
Set the grid to keepSelection : true. This will maintain the proper rows selected.
You need to do a yourGrid.selection.deselectAll(); before showing the next page.
EDIT:
Part of this question was also discussed here:
not able to call a function on pagination dojo enhancedGrid
Related
Using Tablulator (great product!), I am trying to keep the cursor from resetting to the first editable cell in the table after editing a cell. The replaceData function is updating the data element, and while the scroll position does not change, the cursor is reset. I'm not sure how to do this correctly. The documentation, while great, is silent about cursor position beyond the next(), etc methods, which I cannot quite get to work.
In my vue.js table definition component, I have a watch like this:
watch: {
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData);
},
deep: true,
}
},
and a cellEdited method inside mounted like this:
mounted() {
let self = this;
//todo Possibly validate that cater tips is less than total tips since cater tips is a portion of total tips
self.tabulator = new Tabulator(self.$refs.myTable, {
height: 380, // set height of table (in CSS or here)
placeholder: 'Click "Load Store Tips" to edit data',
data: self.tableData, //link data to table
reactiveData: true, //enable data reactivity
downloadConfig: {columnCalcs: false},
addRowPos:"bottom",
history:true,
layout: "fitDataFill",
initialSort:[
{column:"storeID", dir:"asc"},
],
//Define Table Columns
columns: [
{title: "Store ID", field: "storeID", sorter:"number"},
{title: "Store Tips", field: "inStore_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Cater Tips", field: "cater_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Client ID", field: "clientID"},
],
////////////////////////////////////////////////////////////////////////////
// When a cell is edited, write the data out to the server to ensure it is
// always in a saved state.
////////////////////////////////////////////////////////////////////////////
cellEdited: function (e, cell) {
//self.colPos = cell.getColumn(); //trying to save the cursor pos, but generating error
//self.rowPos = cell.getRow(); // generating error
self.PostTipsEventMethod();
}
});
Here is what I have tried:
Tried capturing the row and column position, and then setting that after the replaceData table render, and after the cellEdited method
Tried using the next() method to move the cursor to the next cell inside the cellEdited method, before and after the replaceData function.
Can someone guide me a bit further on this? I've searched through the tabulator element in the debugger trying to find the row and column numbers of the cell I'm editing, but so far, no joy. I guess I don't understand the lifecycle of the table rendering well enough.
Thank you!
I try reuse 1 table with different amount of data based on different button click, I able to populate data successfully, but the problem is, the header did not populate correctly, I had debug and see the correct amount of column pass into table, but why it still retain the design from the 1st click? the 1st data from the 1st click have 3 column, but in the 2nd click, it still retain the same 3 column instead of 8 column? how to make the header populate correctly?
I try to destroy and recreate, but the code not working well if declare before the table create, any idea?
//if ($.fn.DataTable.fnIsDataTable($(selector)[0])) {
// $(selector).dataTable.fnClearTable();
// $(selector).dataTable.fnDraw();
//}
var oDataTable = $(selector).dataTable({
"sDom": _sDom,
"sPaginationType": "bootstrap",
"bDestroy": true,
"bServerSide": true,
"bFilter": true,
"bStateSave": true,
"bSort": tools,
"bAutoWidth": false,
"sAjaxSource": source,
"fnServerParams": function (aoData) {
aoData.push({ "name": "sParams", "value": params });
},
"bProcessing": true,
"oLanguage": {
"sLengthMenu": _displayLen
},
"aoColumns": cols
});
1st button click
2nd button click
Ok, found the answer, after fndestroy, I still need to remove header from table before recreate a new set of header
$(selector).find('thead tr th').remove();
I am creating the dojo Grid as below and I am using the indirectSelection plugin for creating a checkbox, as below, but by default the checkboxes will come at the first column of the grid. How do I make it to come at the last column?
var grid = new dojox.grid.EnhancedGrid({
id: 'serialsGrid',
style: 'width:auto;height:250px;',
store: store,
structure: layout,
rowSelector: '20px',
plugins: {
indirectSelection: {name:'Requested',headerSelector:true, width:"40px", styles:"text-align: center;"},
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'));
/*append the new grid to the div*/
//var temp=grid.domNode;
dojo.byId("serialsGridDiv").appendChild(grid.domNode);
/*Call startup() to render the grid*/
serialsGridCopy=grid;
grid.startup();
});
The plugin itself has no capabilities of doing so as far as I know so I started looking at the functions the EnhancedGrid itself has and stumbled upon the function moveColumn() in grid.layout.
The documentation itself (here) was not really usefull, but I used it to move every column one position ahead so that the first column would become the last one.
I also made a working JSFiddle to demonstrate which you can see here. The code that is moving the columns can be found at the bottom of the code:
for (var i = 1;i < grid.layout.cells.length;i++) {
grid.layout.moveColumn(1, 1, i, i-1, grid.layout);
}
What it does is the following: it moves every column starting from index 1, so that means all columns except the indirectSelection column one step ahead (i-1).
I'm creating widget for IBM BusinessSpace, and I'm having some difficulties with paging.
Data are succesfully returned from database (using restlet) and displayed in a grid. Navigation is also displayed below the grid (next page, previous page, go to page, number of pages, etc).
If I, for example, have 3 pages, 5 rows per page, and want to navigate to second page, when I click on the page number 2, data reloads (it seems like restlet is called again), and first 5 rows (displayed on the first page) are showed on this one too. If I choose any other navigation option (next page, ...), same thing happeneds. Bottom line, every click results in first 5 rows from my database.
Any clue on how to resolve this issue?
Here's a code regarding this:
dojo.require("dojo.data.ObjectStore");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.store.JsonRest");
var restStore = new dojo.store.JsonRest({target:"https://localhost:9443/Application/hello"});
var dataStore = dojo.data.ObjectStore({objectStore: restStore});
dojo.ready(function(){
var grid = new dojox.grid.EnhancedGrid({
store: dataStore, <br>
structure: [
{name:"Value", field:"value", width: "auto"},
{name:"RequestID", field:"requestId", width: "auto"},
{name:"ID", field:"id", width: "auto"},
{name:"Name", field:"name", width: "auto"}
],
columnReordering: true,
clientSort: true,
rowSelector: '20px',
rowsPerPage: 5,
autoHeight: true,
plugins: {
pagination: {
pageSizes: ["5", "10", "15", "All"], // page length menu options
description: true, // display the current position
sizeSwitch: true, // display the page length menu
pageStepper: true, // display the page navigation choices
gotoButton: true, // go to page button
position: "bottom" // position of the pagination bar
}
}
}, "gridDiv");
grid.startup();
});
When using jsonRest in a grid, when you scroll the records not shown are not loaded yet, at this moment jsonRest makes a request for the data needed to show, for this pager to work as expected, in your rest implementation you have to consume a header that dojo creates (Range: 0-24), this one is sent by dojo so you know the offset and limit for the data needed, for the response, you have to return a header (Content-Range: items 0-24/66), the numbers tell dojo from where to where it should be showing and how much total record are.
This is an example in php (assuming that db and response are actual objects):
$range = $request->headers->get('Range');
preg_match_all ('/.*?(\d+).*?(\d+)/is', $range, $matches);
$limit = $matches[2][0];
$offset = $matches[1][0];
$sql = "SELECT SQL_CALC_FOUND_ROWS * FROM table LIMIT {$limit} OFFSET {$offset}";
$result = $db->execute($sql);
$sql2 = "SELECT FOUND_ROWS()";
$count = $db->execute($sql2);
$response->setContent($result);
$response->headers->set('Content-Range', "items $offset-$limit/{$count}");
In jsonRest documentation there is some information.
I'm trying to get a Dojo datagrid working - I have replicated the first example on the documentation page (http://docs.dojocampus.org/dojox/grid/DataGrid) & it works just fine.
However, when I try to display the grid inside another div (i.e. putting 'gridContainer4' from the example inside any other div) nothing displays...
Any help would be much appreciated - can't find anything about this anywhere online!
Finally figured it out:
The example text creates the new dojox.grid.DataGrid and applies it to "document.createElement('div')" - changing this to the ID of an existing div fixed the problem (rather than appendChild-ing it to another div)
Original code:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, document.createElement('div'));
changes to:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, "gridContainer4");