Use case: User initiate the search with the a search criteria and returned result displayed in GXT3 grid. Column sorting enabled in gxt3 grid so user could sort data by selecting column header and there is arrow to indicate the sort order in grid. if the user initiate search second time, I could be able to clear the user selected column and set default sorting but still sort arrow displayed in grid. How can I hide the sorting arrow in grid? Thanks for your time.
Clear sorting info:
PagingLoadConfig.getSortInfo().clear();
Example basic grid
UPDATE:
GXT Version : 3.0.6
if (loadConfig.getSortInfo() != null && !loadConfig.getSortInfo().isEmpty()) {
loadConfig.getSortInfo().clear();
view.getDataGridWidget().getGrid().getView().refresh(true);
}
You should call refresh at grid view object after clearing the sort info of your list store. Here is the example code:
listStore.getSortInfo().clear();
grid.getView().refresh(true); // must be true, to include the grid header in refresh operation
Hope this could help you.
Related
I am using tabulator 4.8.4. I have tabulator defined with customer sort using sorter function in column. Sorting is applied properly during first load. When i add new row custom sorting is not applied.
table.addData([{
orderNO: order.orderId,
},false]);
It will be either inserted in the top or bottom based on the boolean value passed. I have to call below method to apply sort for newly added row
table.setSort(table.getSorters());
Now the problem is when ever new row added table focus is moving to the top. Its very difficult to navigate rows mean while additional row is coming in. Every time row added foucs is moving to the top. I tried to get the current scroll position before adding new row
scrollVertical:function(top){
position = top;
console.log('position'+top);
}
But i did not find the way to set focus to this position after table redrwan. Please suggest and let me know am i doing anything wrong here
The addRow or addData functions are specifically designed not to re-sort the table when a new row is added as this would be a very jarring experience for the user.
If you need to do this then i suggest that you use the addRow function and then call the scrollTo function on the new row to scroll it into view after the sort is finished
table.addRow({orderNO: order.orderId})
.then((row) => {
table.setSort(table.getSorters());
row.scollTo();
});
Is it possible to force the user to select only one value from a filter ?
For a radio button filter as below, is it possible to remove the buttons all & none and make sure that only one Choice is selected ?
you cannot change the existing filter features or functionality without developing a custom extension for a new filter control.
that said, you can certainly emulate a filter using what's called a Property Control and a Data Limiting Expression. for single selection, you're stuck with either a Dropdown control or a Listbox (single select) control.
you would need to...
create a Text Area Visualization on the page somewhere
insert a Listbox or Dropdown Property Control into the Text Area Visualization
create a Document Property with the same data type as your filter column and associate it to the Property Control. you can set this to Unique Values in Column or write in your own Fixed values.
open the Properties dialog on the visualization you'd like to filter and navigate to the Data page
scroll down to Limit Data Using Expression and use an expression like [MyFilterColumn] = "${MyDocumentProperty}" (quotes are required for string values; if numeric then omit quotes)
Please add this CSS in the HTML page of the spotifre to remove all and none
.ColumnFilter .sf-element-filter-item:last-of-type { display:none; }
.ColumnFilter .sf-element-filter-item:first-of-type { display:none; }
Another way to force the users to select one option is to add a Show/Hide in the visualization like this: Hide if UniqueCount([Field]) is greater than 1
I have a working <kendo-grid> component with 10 visible rows over a data set of 34 rows (approx 4 pages). Sorting and selecting is working as expected.
<kendo-grid [data]="gridView"
[pageSize]="pageSize"
[skip]="skip"
[pageable]="true"
[height]="300"
(pageChange)="pageChange($event)"
[sortable]="{ mode: 'single' }"
[sort]="sort"
[selectable]="true"
(sortChange)="sortChange($event)"
(selectionChange)="selectionChange($event)">
Say I select second row. Then I sort the table and the selection stays on row two but of course it's highlighting a different record. It's always selecting the second row on the grid, which of course, it's what I want.
How do I clear the selected row in my (sortChange) event so at least the user isn't presented with a different selection that they one they already chose. I am open to some kind of data binding attribute for selected row that I could set to null or some property on gridView or even poking around inside #ViewChild .
Any help would be appreciated.
Normal Sort
Ascending Sort
Descending Sort
I had a similar question here: Select grid row item from code
Basically, you also need to select the grid row item from code without user interaction and this is currently not supported in the current beta build of the Kendo UI Angular2 controls.
In my application, I resort to triggering a click event on the row I want to select. :/
I do this in a case where I have 'up' and 'down' buttons to rearrange the grid and want to maintain my selection when I switch items.
var grid = document.getElementById('myGrid');
var rows = grid.getElementsByTagName('tr');
rows[idx].click(); // add one to the desired row index to skip the header row
Here's a (sloppy, minimal) Plunkr of this scenario: http://plnkr.co/edit/09dlqdl0Xchoy0e5zKRq
I'm having this categorized view displayed in a view panel where the category column itself is not shown. Instead I'm displaying a combobox above the viewPanel where users can select from all the categories available (see screenshot below). The combo is bound to a scopeVariable and is refreshing the viewPanel onChange. The viewPanel has a computed categoryFilter reading from the same scopeVar. That all works nicely.
Now I also have implemented an additional wildcard (*) value in the selection list which (if selected) programmatically sets the cat filter to NULL. This way I'm forcing the viewPanel to show all entries. Again, this works fine, but with the drawback that now the view is showing empty rows where the category entries would be shown normally (in the screenshot you see empty rows above each entry, with 2 entries for the category "edcom GmbH" obviously belonging to the same category; those aren't separated by an empty row):
One way to at least hide those empty rows would be through means of css coding. But I would prefer those rows not being rendered at all.
Can this be done at all using a viewPanel, and how? Or do I have to use other controls like a repeat or a dataTable maybe?
Thanks in advance,
Lothar
One "hack" (an ugly one I admit) would be to change your categorization column from Firma to Firma:"--All--" or Firma:"*" and then instead of setting the category filter to NULL you set it to "--All--" (or "*").
The double category hits the indexer, but should do what you need.
Obviously there's no easy way. So meanwhile I'll stick to this css-style solution:
In the view panel und All Properties - data I set var = "entry". Then, under All Properties - styling I set a programatic value for the rowClasses property:
if(entry.isCategory()){
return "rowStyleHidden";
}
return "";
The style class "rowStyleHidden" hides those rows using
display: none;
Don't know yet how this turns out performance-wise, I'll have to observe this once I implement it in a copy of the real database.
You can also switch to a none categorized view, by having the viewname calculated based on the value in combobox.
It seems there have been a few questions here regarding this subject, and they have some great answers, but it seems that my case is a little different. I need to filter the records displayed in a jqGrid, but entirely client-side.
For a number of reasons, the best way for me to populate my grid is with an array that's emitted directly into the JavaScript on the page. The grid itself doesn't interact with the server at all. I have some custom AJAX happening in various grid events, but that's it. (Basically, I'm integrating this with an existing set of available services which can't change significantly.)
What I'm looking to do is filter the grid based on a simple text input and button. My page has the text input, the button, and a table (which becomes the grid on document ready). I'd like to bind to the click event of the button (normal jQuery event binding, nothing special) and use the value from the text input as a display filter on the jqGrid.
By "filter" I mean to display only the records which contain a match (in any field) for the text in the input. Then, to display all records, just empty the input and click the button again. Additionally, the grid is multi-select and the selections need to persist through filtering. I just need to be able to hide the rows which don't match what's in the input.
Is this possible?
To filter local grid you should only fill filters property of the postData parameter of jqGrid and set additionally search:true.
To save selection of the grid you can use reloadGrid with additional parameter [{page:1,current:true}] (see here).
The corresponding code can be the following
$("#search").click(function() {
var searchFiler = $("#filter").val(), grid = $("#list"), f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData,{filters:""});
}
f = {groupOp:"OR",rules:[]};
f.rules.push({field:"name",op:"cn",data:searchFiler});
f.rules.push({field:"note",op:"cn",data:searchFiler});
grid[0].p.search = true;
$.extend(grid[0].p.postData,{filters:JSON.stringify(f)});
grid.trigger("reloadGrid",[{page:1,current:true}]);
});
I made the demo for you which filter for two columns 'Client' ('name') and 'Notes' ('note') you can extend the code to search in all columns which you need.
Depend on what you exactly mean with the saving row selection you can need to save the current selection from the selarrrow in a variable and restore the selected rows with respect of setSelection method.