I have a paged GridPanel and don't know how to go about adding server side sorting. Do I add a listener for the sortChange() event? Do I override it? Or is there another event that I should work with.
Any help would be appreciated.
No. In the definition for your store just set
remoteSort: true, // to enable sorting
sortInfo: { // the default sort
field: 'someField',
direction: 'ASC' | 'DESC'
}
And on the server side you will now be getting a sort and dir request parameters specifying the sort field and direction. When the columns are clicked the store will update sorted by the column and direction you pick.
Related
The requirement as follows; The data from backend is stored in row data and passed to ag-grid. The numeric fields in the row data needs to be rounded to 2 digits or more based on the business need. I need to provide numeric filter that needs to filter based on rounded values.
I have attached a sample code in plunker https://plnkr.co/edit/zlNhlPmmFC2GfLfS.
{ field: 'exp',
filter: "agNumberColumnFilter",
cellRenderer: params => {
if (params.value) {
return Number(parseFloat(params.value).toFixed(2)).toLocaleString("en");
}},
filterValueGetter: params => {
if (params.data.exp) {
return Number(parseFloat(params.data.exp).toFixed(2)).toLocaleString("en");
}}
},
For example, the experience column is received as 3.765. It needs to be displayed as 3.77. I have used cellRenderer to achieve the same. It is working fine. The next step is filter needs to work when the user type in 3.77. But it is working when the user is typing the original value 3.765. So I am trying to achieve this using filterValueGetter and round the values. It is not working. I have tried options with valuegetter and filter api and it is not working. Appreciate a solution without modifying the actual json and format it in the grid using the available API
First of all, I am learning yii2.
I want to redirect to the particular URL with adding a "desc" "sort" (descending order sorting)
I have a grid view with 4 columns in it.
I want to redirect with adding a sorting by default in the URL.
I have added the URL
return $this->redirect(array('city/index','UserCitySearch[citytype]' => 54));
I need to add sorting of "added_time" in descending order in the above redirect.
Can anyone help me how should i can add this sorting in the redirect url.
It depends on what component you are using for sorting and how it's configured.
If you are using standard yii\data\Sort with default values the parameter that you need to set is sort and the descending order is done by prefixing the column name with -.
return $this->redirect(array(
'city/index',
'UserCitySearch[citytype]' => 54,
'sort' => '-added_time',
));
The param name depends on yii\data\Sort::$sortParam property.
I have a grid with filter header in every columns. When the user type something in a filter, the datasource send a request to the server to get the data. This is fine when is only one column filter. The problem is when the user after obtain the filtered results needs to filter by another column, and without to remove the previous filter type something in other column filter. In this second situation i need to send all filter values and not only the second filter.
You don't mention what language you use. I assume you do it with javascript.
So you can use the code below.
var grid = $('#ClientsGrid').data("kendoGrid");
grid.dataSource.filter({
field: "client_status",
operator: "eq",
value: "2"
If you need to clear all filters, you can use
var grid =('#ClientsGrid').data("kendoGrid");
grid.dataSource.filter({});
I am trying to clear the sort applied on a table from the code by using the active and direction fields but with no success:
#ViewChild(MatSort) sort: MatSort;
private clearSort() {
// Reset the sort column
this.sort.active = "";
// Reset the sort direction
this.sort.direction = "";
}
I looked into the Sort Header Documentation but I didn't find any native method that helps to clear an applied sort on a given table.
Any advice would be appreciated.
You can set a default sort option and use sort function on the MatSort api to set that default option.
defaultSort: MatSortable = {
id: 'defColumnName',
start: 'asc',
disableClear: true
};
then use sort function on MatSort directive:
this.sort.sort(this.defaultSort);
//default sort direction
this.sort.direction = 'asc';
Beware that the above code will trigger the sortChange event subscription.
In general, the way to clear a sort is to re-apply the original sort order.
If the original sort order does not have a natural key, you may need to introduce an original order field in your data so you can sort by that field to "clear" any sorting that has occurred since the data loaded.
I haven't used MatSort, but in the absence of someone confirming otherwise, I would assume that to clear the sorting, you need to apply sorting as described above.
If the library supplied a reset, it would have to maintain the data in the original order in memory somewhere, which is why most libraries don't do this.
I have a buffered grid on which I've implemented a local sort function (client side). I would like to remove the sort indication (darker background and little arrow) on the column header when the store reloads.
Does anyone know how to accomplish this in 4.1?
To make this clearer:
I want my columns to be sortable. I do not want them to initialize with sorting disabled. Users should be able to click the header and sort it all they want. But, what I want is to be able to turn off the sort programmatically. I.e., remove any sort classes that were applied from user clicks (things like the darker background and the little sort direction arrow).
The reason I would do this is because I am using a modified buffered store which allows me to do local sorting (client-side) with all of the buffered data (not just the chunk that is displayed). Normally, using a buffered store will make local sorting disabled because it would only sort the data that is displayed in the grid - not all of the data in memory, so the guys at Sencha made any grid that has a buffered store automatically disable local sorting - only remote sorting works. Well, as I said, mine is modified so it will work - but then when this buffered store reloads with new data from the database it does not enjoy the handy sortOnLoad feature normal grids get as a matter of course. In my use-case it is more logical to remove the sort state than it is to override the sortOnLoading functionality and make it apply the same sort to the new data, hence, this question.
I do have it worked out now, I'll post an answer shortly along with my implementation of a buffered store with local sorting, in case anyone is interested and for my own future reference.
I should also point out that I am very aware of the client-side performance penalties that come with local sorting on a store that would need to be buffered (as opposed to just using remote sorting of the data on the server). I am aware that this is probably why Sencha does not support local sorting on their buffered stores. I have assessed all of the pros and cons to this and in my specific use-case it is the most sensible thing for me to do.
Buried deep in the dom there is a setSortState function on the Ext.grid.header.Container class and on the Ext.grid.column.Column class. These don't show up anywhere in the 4.1.0 docs but they're in the code nevertheless.
You can look at these functions yourself to get a complete concept of what they do, but the gist of both them is a switch statement that looks for either a 'DESC', 'ASC' or a null in the first argument, e.g.:
setSortState(`DESC`);
setSortState(`ASC`);
setSortState(null);
Calling either the header version or the column version of this function with a single null argument will remove the sort classes on a column. The only real difference is that the header version looks at the grid's store to find the active sorter in the store's sorters property and then uses that data to determine which column to call this function on - the column version simply runs off the column object that it is called from.
In my use-case I don't add a sorter to the store sorters property so I am using the column version (i.e. calling setSortState from an Ext.grid.column.Column object).
First, here is an example of my implementation of a buffered store that allows local (client-side) sorting:
Ext.define('MyApp.store.TheBufferedStoreWithLocalSorting', {
extend: 'Ext.data.Store',
requires: [
'Ext.ux.data.PagingMemoryProxy',
'Ext.util.MixedCollection'
],
model: 'MyApp.model.SomeModel',
buffered: true,
pageSize: 100,
remoteSort: true, // this just keeps sorting from being disabled
proxy: {
type: 'pagingmemory',
reader: 'json'
},
/*
* Custom sort function that overrides the normal store sort function.
* Basically this pulls all the buffered data into a MixedCollection
* and applies the sort to that, then it puts the SORTED data back
* into the buffered store.
*/
sort: function(sorters) {
var collection = new Ext.util.MixedCollection();
collection.addAll(this.proxy.data);
collection.sort(sorters);
this.pageMap.clear();
this.getProxy().data = collection.getRange();
this.load();
}
});
Now, to answer my question, to remove the sorter classes whenever the store reloads I just need to do this:
Ext.each(myGrid.columns, function(column, index) {
if (column.hasCls('x-column-header-sort-ASC') ||
column.hasCls('x-column-header-sort-DESC')) {
myGrid.columns[index].setSortState(null);
return false;
}
});
When the store is reloaded you could add the following to the store's load event handler:
Ext.create("Ext.data.Store", {
listeners: {
load: {
fn: function () {
grid.addCls("no-sort-icon");
}
}
}
};
Then modify your css to hide the icon when element is child of "no-sort-icon" (this would be on the grid)
.no-sort-icon .x-column-header-text {
background-image: none;
}
.no-sort-icon .x-column-header {
background-color: #C5C5C5;
}
If I understand you correctly, setting this config on the specified column should solve your problem
columns: [
{text: 'First Name', dataIndex:'firstname', sortable: false},
{text: 'Last Name', dataIndex:'lastname'},
]
more details here http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column-cfg-sortable
This is a configuration option, so it would disable the sortability of a column when the grid is first rendered.
Here is a jsfiddle demo
* Note that I use Ext. 4.0.7, you can switch to 4.1.0, but for some reason an unrelated display bug with the dropdown pops out