I have these five fields ID, Name, Address, Phone and Fax displaying on the datatable. I am using Column Visibility Feature and by default, I am displaying first four columns. Suppose, I make Fax column Visible and Phone Column Invisible. Now, if I refresh the page, I see the same four columns again. My question is, can we Retain this visibility / invisibility ?
Thanks.
Refresh the page? Do you mean redraw the datatables page? (e.g. by clicking a column header to sort or clicking 'next' in the datatable?)
If so, are you using javascript/jquery to modify the visibility of your elements?
Doing so will work initially - but because datatables doesn't 'know' that jquery has modified the element, when it redraws the table (in a new order, or on a new page or whatever) it will revert your changes to whatever state it understands the table to be in.
To make your changes persist over redraws, you need to use the datatables api - so that datatables knows what you're doing. like this:
var mytable= $('#mytable').DataTable();
mytable.column( 0 ).visible( false );
however IF you want these changes to persist between refreshes of the webpage in the browser, then you need to set up sessions, or store these configurations in a database.
Then every time the page in requested, you check that data, and you can decide dynamically onload how to initialise your datatable:
$(document).ready( function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ userHiddenColumn ] }
] } );
} );
Related
We have a table of data with columns like CaseId, name.. etc. Here Case Id is an hyper link. we are using the Jquery DataTables to display data. Here Issue is, If I am in page number 3 and clicking on any CaseId link here, It will redirect to cases page. Here if I click on back button it should display the page 3 data and it will select page number 3. But In my case it is going to page 1. I had handled the data level which is displaying page 3 data but here it's selecting the page number as 1. How to fix this... Can any one help me on this.
You can use the 'stateSave' option to save the state of your dataTable.
$(document).ready(function() {
$('#example').DataTable( {
stateSave: true
} );
} );
DataTables has the option of being able to save the state of a table
(its paging position, ordering state etc) so that is can be restored
when the user reloads a page, or comes back to the page after visiting
a sub-page. This state saving ability is enabled by the stateSave
option.
See https://datatables.net/examples/basic_init/state_save.html for more info.
I have to refresh an Enhanced List as i have a "quick search" input field
that should update the list while you type. It does work fine, until I select one of the result rows. Then I move back to the input field and start typing but at that moment, the focus is lost and after every letter I have to click back to the input field.
Any method I found refreshing the grid sets the focus to the first header
cell. This means of course that my input field
looses focus. I cannot type more than 1 char without refocusing the field
:-(
Any idea how to re-render a grid (or enhanced grid) without changing focus?
gridtoc = new dojox.grid.EnhancedGrid({
id: 'gridtocsearch',
store: storetoc,
structure: layout,
class: 'grid',
align: 'center',
keepSelection: true,
plugins: {
filter: true
}
});
Thanks a lot, Monika
can you try like
keepSelection:false
official document says
keepSelection
Defined by dojox.grid.EnhancedGrid
Whether keep selection after sort, filter, pagination etc.
***************** updated answer*****************
take a look at this jsfiddle
http://jsfiddle.net/bnqkodup/520/
I have two buttons(Apply, Submit) on my website. I select a row(Page 1) and navigate to another page(Page 2) via grid pagination then select another row. I make few changes on the row and click 'Apply'. Changes get applied on the current page(page 2) but when I navigate to page 1 changes does not reflect. When I submit it sends both the affected row with changed values. Which means it changes the values on both rows but not reflecting it on UI. Is this the problem with cache or something else?
You can subscribe for complete event and refresh your datasource. I think it will work for you. Example :
create: {
url: "http://mycreate.json",
type: "POST",
complete: function(e) {
$("#grid").data("kendoGrid").dataSource.read();
}
},
I wrapped my gridview with Pjax widget like this
\yii\widgets\Pjax::begin();
gridview
\yii\widgets\Pjax::end();
in order to make the gridview make ajax request when I click on each pagination.
I also use ['class' => 'yii\grid\CheckboxColumn'], in column as well.
and I find that when I'm on first pagination I checked some rows and then go to second page and check some rows but when I go back to first page what I've checked is gone.
My question is how can I keep all checkedrow for all pagination
With current conditions (Pjax, multiple pages, yii\grid\CheckboxColumn) it's impossible because of the way it works.
When you click on the pagination links all GridView html content is replaced by new one that comes from the AJAX response.
So obviously all selected checkboxes on the previous page are gone.
Few possible ways to solve that:
1) Write custom javascript and server side logic.
As one of the options, you can send AJAX request to server with parameter meaning that user has chosen to select all data for the bulk delete operation (or use separate controller action for bulk deletion). In this case actually we don't need to get the selected data from user, because we can simply get them from database (credits - Seng).
2) Increase number of displayed rows per page.
3) Use infinite scroll extension, for example this.
4) Break desired action in several iterations:
select needed rows on first page, do action (for example, delete).
repeat this again for other pages.
You can get selected rows like that:
$('#your-grid-view').yiiGridView('getSelectedRows');
[infinite scroll] : http://kop.github.io/yii2-scroll-pager/ will work good if you do not have any pjax filters. If you have filters also in play, do not use this plugin as it does not support pjax filters with it. For rest of the applications it is perfect to use.
Update1 : it seems to be straight forward than expected, here is the how I accomplished it
Add following lines to the checkbox column
'checkboxOptions' => function($data){
return ['id' => $data->id, 'onClick' => 'selectedRow(this)'];
}
Now add following JS to the common js file you will have in your project of the page where this datagrid resides
var selectedItems=[]; //global variable
/**
* Store the value of the selected row or delete it if it is unselected
*
* #param {checkbox} ele
*/
function selectedRow(ele){
if($(ele).is(':checked')) {
//push the element
if(!selectedItems.includes($(ele).attr('id'))) {
selectedItems.push($(ele).attr('id'));
}
} else {
//pop the element
if(selectedItems.includes($(ele).attr('id'))) {
selectedItems.pop($(ele).attr('id'));
}
}
}
Above function will store the selected row ids in the global variable array
Now add following lines to pjax:end event handler
$(document).on('pjax:end', function () {
//Select the already selected items on the grid view
if(!empty(selectedItems)){
$.each(selectedItems, function (index,value) {
$("#"+value).attr('checked',true);
});
}
});
Hope it helps.
I just solved this problem and it works properly with Pjax.
You may use my CheckboxColumn. I hope this can help. The checked items are recorded with cookies.
You can read the part with //add by hezll to understand how to fix it, because I didn't provide a complete general one.
Hope it works for you.
https://owncloud.xiwangkt.com/index.php/s/dGH3fezC5MGCx4H
I'm getting frustrated because my store keeps getting filtered whenever I use it to back a combofield. Is there any way I can disable this?
The Scenario
I have a Store with a data field on it; an array of objects loaded when the store is instantiated. I use this store to drive a bunch of combo's in different areas of my app. Unfortunately, my combos are applying filters on the store, causing other combos using the same store to only display the filtered values later on, not the whole list.
Workarounds
My goofy workaround is to call combo.getStore().clearFilter() after I'm done with the combo, but that's going to get old very quick, and probably introduce a bug somewhere, I'm sure.
If I remove queryMode:'local' from my combo's config, all is well, except that now the handy type-ahead feature no longer works; I'm just shown a list of items in a drop-down that I can't even navigate around my typing letters of matching items. That's worse than a regular html select tag!
Any ideas?
Thanks!
You can't do that since the filtering is applied not on the combo but on the store. You could try creating multiple instances of the same store and work with that. Though I don't know if it'll work.
Ext.create('combo', {
//other config
store : Ext.create('my.store')
});
It'll work if you make the combo non-editable since no filtering can be applied then. But, as you say, you need the type ahead feature, you'll need to create multiple instances of the store.
In light of the fact that combos will add filters on the backing store, hence affecting all combos that use the store within my application, I've opted to add an override to the combo class so it will clear the filter on the store when the combo box is destroyed.
Ext.define('MAP.override.Combo', {
override : 'Ext.form.field.ComboBox',
initComponent : function()
{
this.callParent(arguments);
this.on('beforedestroy',function(combo){
if(combo.leaveFilter === true) return;
console.log('clearing filter on store');
combo.getStore().clearFilter();
});
}
});
it's a bit of a hack, but I do allow for the escape hatch of indicating not to clear the filters, too.
The simplest way I have found to handle this solution is to add the following listener to the combo:
listeners: {
beforequery: function(queryPlan){
queryPlan.query = true;
}
}
by default queryPlan.query is the text currently in the combo field which is used for filtering. Setting it to false cancels the query, but setting it to true allows the query to go through without a filter value, therefore keeping all values in the drop down list for all combo fields.
I've had similar problem with ExtJS 4.2 and combo. Store kept being filtered but I couldn't use clearFilter() because after that combo was unusable. My solution, which worked, is this listener on combo:
listeners: {
blur: function(combo) {
if (combo.queryFilter) {
combo.queryFilter.setValue('');
combo.getStore().filter();
}
}
}