by setting [rows]='10' and [paginator] = 'true' I can get what I want. But now I want to control p-datatable by using p-paginator in order to use onPageChange() to get the pageNumber. So how can I associate these two tags.
enter image description here
You need to set
...
[paginator]="true"
[rows]="10"
[rowsPerPageOptions]="[10,20,50]"
[totalRecords]="dataset?.length"
(onPage)="fn($event)"
...
In this way you can calculate actual page.
fn(event:any){
let pageNumber = Math.ceil(event.first/event.rows);
}
Related
Using Ext Js 4.1.
I have multiple checkboxes in panel with ids and itemIds: 'chA104', 'chA204', 'chB111' etc.
And I want to get all checkboxes that starts with id (or itemId) = 'chA' to make them disabled.
How to do that?
Tryed to use this:
this.query('*[id^=chA]');
But get an array with multiple elements: table, td, input etc.
When doing this:
Ext.query('input[id^=chA]')[0]
I get an html input element. But when trying to do:
Ext.query('input[id^=chA]')[0].disable();
Ext.query('input[id^=chA]')[0].setDisabled(true);
I get an error.
So how to get all checkboxes, starting with a string id (or itemId) and make them enabled/disabled?
If you are using extjs checkboxes, you could do it like this:
//enable/disable
Ext.ComponentQuery.query('checkboxfield{id.search("chA")!=-1}')[0].disable();
//check/uncheck
Ext.ComponentQuery.query('checkboxfield{id.search("chA")!=-1}')[0].setValue(true);
if is pure html just use:
//enable/disable
Ext.query('input[id^=chA]')[0].disabled = true;
//check/Uncheck
Ext.query('input[id^=chA]')[0].checked = true;
I am working on a project using Angular 4 and PrimeNG where I need to be able to double click on a cell, selected it and open a dialog to do some modifications on the cell's underlying data.
As far as I can see from the documentation, currently there is no way to accomplish this. What is the best way to handle this situation?
Thanks.
So after some playing around I came up with a solution, which being far from perfect serves the purpose while we wait for the folks from PrimeNG (which I love, btw) to include this functionality.
The first issue was to determine which cell the user double-clicked on. I did that by having all column's templates in a div which I can get a reference to:
<p-dataTable #grd [value]="view"
(onRowDblclick)="editTemplate($event)"
(onRowClick)="clearSelection($event)">
<p-column field="SomeFieldName" header="Header" [editable]="false">
<ng-template let-col let-data="rowData" pTemplate="body">
<div [id]="col.field" class="cell-content">
<div [innerHTML]="data[col.field]" class="center-parent-screen"></div>
</div>
</ng-template>
</p-column>
All columns I am interested in handling on double click are wrapped in the div with class cell-content. Also notice the id attribute. It is set to match the field. Then in the onRowDblclick event:
editTemplate(e: any) {
let target = e.originalEvent.toElement.closest('div.cell-content');
if (target && target.id) {
let td = target.closest('td');
if (td) {
td.style.backgroundColor = 'darkorange';
td.style.color = 'white';
}
let fieldValue = e.data[target.id];
//do something with this data
}
}
The key here is the id attribute. Once we have that now we know which cell was clicked and we can proceed to do what we need to do. Also notice that I get a reference of the parent TD element and set the background and the color of the cell. Once you are finished working with it, you can clear the formatting to go back to normal.
You can also use the onRowClick event to clear the selection like so:
clearSelection(e: any) {
let target = e.originalEvent.toElement.closest('div.cell-content');
if (target && target.id) {
let td = target.closest('td');
if (td) {
td.style.backgroundColor = 'white';
td.style.color = 'black';
}
}
}
I know manipulating the DOM directly is not the way to go, but until we get the new version of PrimeNG that includes this functionality, this will do, at least for me.
Please let me know if you have a better way of doing this.
i need to reset paging toolbar parameters as "page", "start", "limit" when i click on a search button to re-load grid store with different parametres!
how can i do it?
the problem is that when i am on the next page, and i do a new search, i have the parameters page=2, start=25, limit=25 dirty, instead i need to reset this parametres.
my code:
listeners: {
click: function(){
Ext.getCmp('GrlGio').getStore().removeAll();
Ext.getCmp('GrlGio').store.load({
params:{
mode: "RIC",
DataRicerca: dd,
Pit: Ext.getCmp('cmbPiattaforma').getValue()
}
});
}
}
thanks!
In Ext 4, I found loadPage() worked pretty well for resetting the data store and making the paging toolbar go back to the first page. Example:
store.loadPage(1) // note: 1-based, not 0-based
Guys currentPage=1 did the trick for me
before loading the store every time call the below
By the way i am getting 500 results and loading in cache
Pagination is for local, any way you can try this before any new search
var store = Ext.getStore('MyStoreS');
store.proxy.extraParams = { employeeId : searchStr};
store.currentPage = 1;
store.load();
you can manualy reset the params
Ext.getCmp('GrlGio').getStore().getProxy().pageParam =1;
Ext.getCmp('GrlGio').getStore().getProxy().startParam =0;
and then do the store load. I know it looks hardcoded but it's the only solution i found...
Try this -
pagingToolbar.moveFirst();
Define following function "resetStartParam" , by overriding ext.data.store:
Ext.override(Ext.data.Store, {
resetStartParam:function(){
//get the latest store options
var storeOptions=this.lastOptions;
if(storeOptions!=undefined){
//get the param names
var pn = this.paramNames;
//get the params from options
var params=storeOptions.params;
//change the param start value to zero
params[pn.start] = 0;
//reset options params with this new params
storeOptions.params=params;
//apply this new options to store options
this.storeOptions(storeOptions);
}
}
});
Now call this function on click of your search button:
Ext.getCmp('GrlGio').getStore().resetStartParam();
Thats it.It should work.
I know that this is an old post but I thought I'd add in my pennies work. I'm using EXTJS 4 and had a similar problem. When I did a new search the page number etc did not reset. The solution I found, which appears to work with the nav bar automatically is using the currentPage attribute of the store. I do have a slight odd setup but doing this.currentPage = 1 when I do a new search works fine for me
try this in your handler
Ext.getCmp('gridpanel').getStore().removeAll();
Ext.getCmp('PagingToolbar').moveFirst();
after this, put your search query and load the store accordingly
Ext.getCmp('gridpanel').getStore().load({params : { start : 0, limit : maxRecords, searchText : _searchText } });
hope it helps
just call pagingToolbar.onLoad() after removeAll(). Plain and simple.
Here is how I achieved search with paging. It only does 1 request and it refreshes the paging data.
onExecuteSearch: function(){
var params = this.getSearchForm().getForm().getFieldValues()
, proxy = this.getSomeGrid().getStore().getProxy();
proxy.extraParams = params;
this.getPagingToolbar().moveFirst();
}
getFieldValues() documentation: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-getFieldValues
For more about the proxy "extraParams" look here: ExtJs4 - Store baseParams config property?
This work fine (refresh correctly the paging info):
myStore.removeAll();
myStore.fireEvent('load', myStore, [], {});
Had to change the page size to 500 for printing the WHOLE store/grid, and once printed, restore the grid to the original page size of 25.
// 500 records are now in the store and on the grid
ux.core.grid.Printer.print(this.getOrderList());
store.pageSize = this.displaySize; // new page size is 25
this.getPagingToolbar().doRefresh(); // equivalent of pressing a refresh button on the toolbar
does the trick - reloads store with the same sorters/filters/currentPage
I am trying to disable couple of fields and make them readonly via hook_page_alter(). I was able to do check if user is viewing the page edit section (the form edit)
$page['content']['system_main']['#node_edit_form'] == TRUE)
then when I tried to disable couple of fields, I found that select list can be disabled by this code:
$page['content']['system_main']['field_my_field_name_a_select_list']['und']['#attributes']['disabled'] = TRUE;
but if I use the following code it doesn't work:
$page['content']['system_main']['field_my_field_name_a_select_list']['und']['#disabled'] = TRUE;
I also found that I can not use the same code to disable a text area field:
$page['content']['system_main']['field_my_text_area']['und']['#attributes']['disabled'] = TRUE;
The above code doesn't disable the text area, but the same code can disable the select list!
Then I tried hook_form_alter() to do the same thing, and I was able to disable fields and when I checked the rendered array from $page array, I saw that it shows:
$page['content']['system_main']['field_my_field_name_a_select_list']['und']['#disabled'] = TRUE;
but when I set the same code in hook_page_alter(), it didn't work. Looks like something else will override it, I thought that hook_page_alter() is the last place to change markup.
Any idea what is the best way to disable/readonly any kind of field, inside hook_page_alter() in drupal 7?
Thank you
It works for text fields^
$form['field_secured_title']['und']['0']['value']['#attributes']['disabled'] = TRUE;
Like it said in the docs
You can use attributes :
$form['#attributes'] = array('disabled' => TRUE);
When adding a rows to a grid, and then clicking on it, it gets selected (and highlighted). Then, clicking elsewhere but the new row remains highlighted (so now there are to highlighted rows).
Please, does anyone know what the problem could be? How to make it behave normally, i.e. clicking a row deselects (de-highlights) the other one?
After I reload the page (so the new row is not new anymore), everything works as expected.
Edit: Here's the code for adding rows:
var rec = new store.recordType({
test: 'test'
});
store.add(rec);
Edit 2: The problem seems to be listful: true. If false, it works! But I need it to be true so I'm looking at this further... It looks like as if the IDs went somehow wrong... If the ID would change (I first create the record and then the server returns proper ID, that would also confuse the row selector, no?)
(Note, correct as ExtJS 3.3.1)
First of all, this is my quick and dirty hack. Coincidentally I have my CheckboxSelectionModel extended in my system:-
Kore.ux.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.CheckboxSelectionModel, {
clearSelections : function(fast){
if(this.isLocked()){
return;
}
if(fast !== true){
var ds = this.grid.store,
s = this.selections;
s.each(function(r){
//Hack, ds.indexOfId(r.id) is not correct.
//Inherited problem from Store.reader.realize function
this.deselectRow(ds.indexOf(r));
//this.deselectRow(ds.indexOfId(r.id));
}, this);
s.clear();
}else{
this.selections.clear();
}
this.last = false;
}
});
And this is the place where the clearSelections fails. They try to deselect rows by using ds.indexOfId(r.id) and it will returns -1 because we do not have the index defined remapped.
And this is why we can't find the id:-
http://imageshack.us/photo/my-images/864/ssstore.gif/
Note that the first item in the image is not properly "remapped". This is because we have a problem in the "reMap" function in our Ext.data.Store, read as follow:-
// remap record ids in MixedCollection after records have been realized. #see Store#onCreateRecords, #see DataReader#realize
reMap : function(record) {
if (Ext.isArray(record)) {
for (var i = 0, len = record.length; i < len; i++) {
this.reMap(record[i]);
}
} else {
delete this.data.map[record._phid];
this.data.map[record.id] = record;
var index = this.data.keys.indexOf(record._phid);
this.data.keys.splice(index, 1, record.id);
delete record._phid;
}
}
Apparently, this method fails to get fired (or buggy). Traced further up, this method is called by Ext.data.Store.onCreateRecords
....
this.reader.realize(rs, data);
this.reMap(rs);
....
It does look fine on the first look, but when I trace rs and data, these data magically set to undefined after this.reader.realize function, and hence reMap could not map the phantom record back to the normal record.
I don't know what is wrong with this function, and I don't know how should I overwrite this function in my JsonReader. If any of you happen to be free, do help us trace up further for the culprit that causes this problem
Cheers
Lionel
Looks like to have multi select enabled for you grid. You can configure the selection model of the grid by using the Ext.grid.RowSelectionModel.
Set your selection model to single select by configuring the sm (selection model) in grid panel as show below:
sm: new Ext.grid.RowSelectionModel({singleSelect:true})
Update:
Try reloading the grid using the load method or loadData method of the grid's store. Are you updating the grid on the client side? then maybe you can use loadData method. If you are using to get data from remote.. you can use load method. I use load method to update my grid with new records (after some user actions like add,refresh etc). Or you could simply reload as follows:
grid.getStore().reload();