Smartgwt Listgrid Filter Issues - smartgwt

I am facing a ListGrid filter issues. The problem i am facing is when i apply any filter on the ListGrid to edit any ListGridRecord that edited records just get removed as soon as i removed filtered text from the filter of the listgrid.
When i try to get the records from the listgrid after removing filter manually as well as automatically by using listgrid.clearCriteria(). then, all my changes get removed.
Hope i am able to make sense. This is the heck i am facing for while a time. If u need to know any further detail then please let me know. Thanks in Advance

I Found out the solution to this problem. actually when i remove the filtered text from the listgrid then listgrid tries to fetch the data from the server by default. by setting property setDataFetchMode(FetchMode.LOCAL) prevent the listgrid fetching the data from the server when u removed the filtered text. Thanks to all who provide assistance to me.

About records disappearing, see this question in the SmartGWT FAQ:
http://forums.smartclient.com/showthread.php?t=8159#aGrid
On clearCriteria() and changes going away, it's not clear how you're making those changes, but the changes might go away if the changes were incorrectly applied and clearCriteria() is just loading new records from the server. See the Grid Editing Overview to understand how Records and their edits ("edit values") are stored:
http://www.smartclient.com/smartgwtee/javadoc/com/smartgwt/client/docs/Editing.html

smartgwt 6 , i saw better way of doing this, you can refer the showcase
if you are using smartgwt 3 or 4 you can try the following
Grid.java:
this.addFilterEditorSubmitHandler(new FilterEditorSubmitHandler(){
#Override
public void onFilterEditorSubmit(FilterEditorSubmitEvent event) {
filterByEditor(event.getCriteria());
//cancel the event to avoid the server side fetch
event.cancel();
}
});
DataSource.java
after fetch data, call to set the initial set of records. zzzzzDataSrc.setCacheData(gridRecs);
public void filterByEditor(Criteria cr ) {
AdvancedCriteria criteria =
new AdvancedCriteria(FLD_NM, OperatorId.STARTS_WITH, cr.getAttributeAsString(FLD_NM)) ;
//initialize with the complete set of rows
this.setData(this.getDataSource().getCacheData());
//filter using the criteria
this.setData(this.getDataAsRecordList().findAll(criteria));
}

Related

Vaadin Grid (Multiselect): restore selection after refresh

A Vaadin grid shows data which is constantly updated by a background process. A user might select one or more rows to carry out various functions. The user might refresh the data from the backend (which updates rows shown in the grid).
The application needs to restore the selected items after a grid refresh.
grid.getSelectedItems() has to return the current instance of the selected items.
Refresh is implemented as follows:
void refresh() {
final var beanSet = grid.getSelectedItems();
dataProvider.refreshAll(); // refresh from backend
grid.asMultiSelect().select(beanSet); // restore previously selected items
}
Updating the grid works fine, but the selection is only partly restored: the "selected" checkbox is checked for the items in beanSet but querying grid.getSelectedItems() still returns the old instances.
Reproducer: https://github.com/skiedrowski/vaadin-grid-restore-selection, package com.example.application.views.idstyle -> check the notification after clicking "Update selected".
What is the correct way to update the selected items?
Context:
Vaadin Flow 23, Grid Pro in multiselect mode
grid items implement equals and hashCode based on an immutable id
grid data provider is a ConfigurableFilterDataProvider fetching paged data from backend
I believe the problem in your sample project is that you're always recycling a set of selected objects which contain the "old" data. You read out a reference to the old items in var beanSet = grid.getSelectedItems(); and store them back into the selection with grid.asMultiSelect().select(beanSet);
A lazy-loading Grid can't know if the programmatically set selection is a collection of objects that are available in the backend - it would need to fetch the entire backing dataset to do that. So when the selection is updated from the server, it could be any objects of the correct type, whether they actually exist in the data set or not.
What could do yourself is pass the selection set to the backend, update the items and then pass them back to the Grid's selection.
An open question that remains is whether Grid should update the selection when a fetch returns items that are equal to items in the selection. I can't immediately tell if that is
a) possible, or
b) a sensible thing to do
This is how we solve this in our application:
A]
fresh items are retrieved lazily
the only time when refreshed selection is needed is when we want to operate with the selected items (such as edit or another action, otherwise obsolete selected items don't matter)
the backend is able to return fresh item by ID
there is no need to update the selection on fetch() (which could introduce inconsistencies if a part of the selection is already updated but the rest haven't been fetched yet)
B]
we have some data providers which just hold wrappers for actual items
so any interaction with the items fetches fresh data under the hood
for the record, this was not done to solve this problem but mitigates it as a sideeffect

How do you get the column order for the Grid in Vaadin 14?

In Vaadin 8 you could just do the following for example to get a list of the columns in the order displayed on the screen.
String columnOrderPreference = ((List<Grid.Column>)grid.getColumns()).stream()
.map(Grid.Column::getId)
.collect(Collectors.joining(VALUE_SEPARATOR));
This was especially handy because you could then save that string and then call:
grid.setColumnOrder(columnOrderPreference.split(VALUE_SEPARATOR));
In Vaadin 14 (ignoring that getId() should now use getKey()) this is no longer possible because the getColumns() list is now always returned in the order they were added and not the order in which they are ordered. You can still call setColumnOrder(...) (with different parameters - list of grid.getColumnByKey(columnKey)) but I cannot figure out how to get the list of columns in the order they are displayed.
This is especially useful for trying to save the column order the user has set/changed when they come back to the same page (with the Grid).
You can listen for
ColumnReorderEvent
on the grid.
Registration addColumnReorderListener(ComponentEventListener<ColumnReorderEvent<T>> listener)
The event holds:
/* Gets the new order of the columns. */
List<Grid.Column<T>> getColumns()
Unfortunately in Vaadin 14 getColumns does not return the columns in the right order. You can get the order when with the event GridReorderEvent as said before and you need to store it. There is a feature request here ( that will give you some technical reasons if you're interested): https://github.com/vaadin/flow-components/issues/1315
You can add a comment or vote for it, because it makes the migration from Vaadin 8 harder.

paper-menu with multiple selections, howto deselect all

I use paper-menu with multiple selections (multi). Everything works fine so fare, but with a deselect all method things seems more complicated.
With html
<paper-menu multi selected-values="{{selectedValues}}">...
Dart
#property
List<String> selectedValues = [];...
Things got binded, and every iron-select/iron-deselect event results in a correct update of the selectedValues list in dart.
With clear('selectedValues') the list empties and the logic behaves like no selection is done, but in Dartium the items that previous was
selected remains marked as selected.
I have also tried with the selectedItems List or with the foreach deselect with the select method to PaperMenu, but still not successful update
in Dartium.
Anyone with ideas how to implement this?
Found a workaround for the issue with the select method. The menu with selected values can be replaced with a new similar element created with the Dom api. One drawback is the bindings can't be set up, so these needs to be hacked with get and set methods at the element. Otherwise this seems to work ok. The calls to the Dom api are shown below.
ParticipantMenu oldPm = $$('#id_filterselection') as ParticipantMenu;
ParticipantMenu newPm = document.createElement('participant-menu');
Polymer.dom(parentNode).insertBefore(newPm, oldPm);
Polymer.dom(parentNode).removeChild(oldPm);
PolymerDom.flush();

PrimeFaces: How do I declare and bind an AJAX "rowEdit" event to p:dataTable programmatically?

I'm still developing my data table UI application, and finally I'm about the final stage of the development of this component: inline cell editing.
First of all, the data table is built fully dynamically at the Java side, and no facelet declarations are used to describe the table. If I'd have a static table declaration, the editing could be specified like this (see the In-Cell Editing chapter):
<p:dataTable>
...
<p:ajax event="rowEdit" listener="#{tableBean.onEdit}"/>
...
</p:dataTable>
I can easily specify the data table editable with dataTable.setEditable(true) in the Java code - and it works, please note, the editing Save/Cancel icons are working nice but have no effect at the back end. Since I cannot it declare in the way specified at the PF ShowCase Labs page (must I always use the listeners there?) because of the data tables are rendered dynamically, I'm trying to use the following:
public static AjaxBehavior createAjaxBehavior(MethodExpression expression) {
final AjaxBehavior behavior = new AjaxBehavior();
behavior.addAjaxBehaviorListener(new AjaxBehaviorListenerImpl(expression));
return behavior;
}
...
dataTable.addClientBehavior("rowEdit", createAjaxBehavior(createMethodExpression(TableBean.class, "onEdit", void.class, new Class<?>[] {RowEditEvent.class})));
But as soon as I add the rowEdit listener, like I'm trying to do above, and wow I suddenly got: mojarra is not defined and no Save/Cancel row edit buttons are working. Ok, I've found a similar problem described and resolved here, included the necessary script manually, and now the client-side JavaScript error is gone, however I still cannot exit the row editing mode, and the row is still not updated.
I wasted all day trying to figure out what's going on, and I'm blind to see the correct way. Do I simply miss something behind (like identifying a certain row, or probably specifying something else somewhere -- but my Java code does not generate anything more than specified in the PF example), or anything whatever?
Thanks in advance.
Well, I've just figured out the real reason in the following method:
public static AjaxBehavior createAjaxBehavior(MethodExpression expression) {
final AjaxBehavior behavior = new AjaxBehavior();
behavior.addAjaxBehaviorListener(new AjaxBehaviorListenerImpl(expression));
return behavior;
}
In fact, the method actually returned javax.faces.component.behavior.AjaxBehavior (h:ajax?) instead of org.primefaces.component.behavior.ajax.AjaxBehavior (p:ajax) -- this happened because of quick auto-complete so I simply missed that fact.
I'm frustrated that the PrimeFaces library didn't reply any error.
Just to complete the Q & A:
Mojarra 2.1.7
PrimeFaces 3.2
Should now (at least for PF 6.0) be org.primefaces.behavior.ajax.AjaxBehavior.

Dynamically Loading LI's in JQueryMobile 1.0

I've just updated my project from jquerymobile 1.0a1 to version 1.0.
I've encountered a problem with dynamic content. Based on an ajax search I populate an unordered list with list items. Previous the following code refreshed the list so that all the styling appeared correctly:
$('#myContent').find("ul").listview();
$('#myContent').find("ul").listview('refresh');
However as of 1.0 this no longer seems to work.
The list appears but the styling is all wrong and the data-theme on all the elements gets ignored.
Has anyone come across a similar issue with updating and come across the solution.
Updating lists If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create
any nested lists that are added. For example:
$('#mylist').listview('refresh');
Note that the refresh() method only affects new nodes appended to a
list. This is done for performance reasons. Any list items already
enhanced will be ignored by the refresh process. This means that if
you change the contents or attributes on an already enhanced list
item, these won't be reflected. If you want a list item to be updated,
replace it with fresh markup before calling refresh.
http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html
if #myContent is the listview you can do this:
$('#myContent').listview('refresh');
if #myContent is the page you can do something like this:
$('#myContent').trigger('create');
Create vs. refresh: An important distinction Note that there is an important difference between the create event and refresh method
that some widgets have. The create event is suited for enhancing raw
markup that contains one or more widgets. The refresh method should be
used on existing (already enhanced) widgets that have been manipulated
programmatically and need the UI be updated to match.
For example, if you had a page where you dynamically appended a new
unordered list with data-role=listview attribute after page creation,
triggering create on a parent element of that list would transform it
into a listview styled widget. If more list items were then
programmatically added, calling the listview’s refresh method would
update just those new list items to the enhanced state and leave the
existing list items untouched.
http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
What you want can be achieved by replacing your 2 lines of code with the following:
$('#myContent ul').listview('create');
Hope this helps...
I've had this issue. The reason you are getting things all messed up is you are initalizing and refreshing the element multiple times. I noticed I had 2 different functions running that would call .listview('refresh') on the same element. After I took one out the themes and data went back to looking normal. Also are you getting any JS errors?
EDIT:
To be more specific you are calling .listview() somewhere in your code 2 times which is initializing it twice. I would wait to before you page is loaded to run the refresh so you only call it once.
Another thing you could do is check if the element is initialized already or not so you don't do it twice. Just check the element or in some cases the parent to see if the class ui-listview is present.
var element = $('#myContent').find('ul');
if ($(element).hasClass('ui-listview')) {
//Element is already initialized
$(element).listview('refresh');
} else {
//Element has not been initiliazed
$(element).listview().listview('refresh');
}
Just an FYI you can chain those events to look like $('#myContent').find('ul').listview().listview('refresh');
It cand be achived through.
$('#myContent').listview('refresh');
The below snippet shows you to load data from xml and dynamically create a list view.
function loadData()
{
$.ajax({
url:"BirthdayInvitations.xml",
dataType: "xml",
success: function(xml)
{
$(xml).find("event").each(function()
{
$("#mymenu").append('<li>' + this.textContent + ' </li>');
});
$("#mymenu").listview('refresh');
}
});
}
See if this is related to ur question http://www.amitpatil.me/demos/jquery-mobile-twitter-app/ and this one also http://www.amitpatil.me/demos/ipad-online-dictionary-app/
In first example i am using listview('refresh'); method and in second example i am using
$(document).page("destroy").page();

Resources