ListGrid: confirm on delete

[pboysen]

Is there a way to display a confirmation message before a record is removed? Seems like that should be the default behavior. I have tried overriding removeData but that doesn't seem to be called when the remove icon is clicked.

[chandrajeet]

You can do something like below: -

 
SC.confirm("Are you sure to delete your xxx?", new BooleanCallback() {
                    public void execute(Boolean value) {
                        if (value != null && value) {
                            //proceed with delete
                        } else {
                            //Cancel
                        }
                    }
                });

[pboysen]

Confirm on delete

Sure, but where do you call it from. Just clicking on the X delete doesn't give an option to intercept the delete before it happens.

[Isomorphic]

Overriding removeData() would work if you did it via JSNI. But the functionality is actually very simple to reproduce, just use a field of type "icon" and call removeData(record) from the recordClick event on that specific ListGridField.

[jzaruba]

Using ListGridFieldType.ICON means the field will feature a header-context menu, which (above the removal-column) looks kinda odd to me, so I would like to avoid that...

Is it possible to handle (and conditionally cancel) the removal when using ListGrid.setCanRemoveRecords(true) (and ListGridField.setIsRemoveField(true))?
It seems like the ListGrid removes the record straight away, but maybe there's hope...?

[jzaruba]

If you are using your own DataSource insert the confirmation prompt somewhere into your version of executeRemove method...

if(!Window.confirm(yourConfirmationMessage))
{
	// best way of saying 'operation did not proceed' i know of {
	response.setStatus(-1);
	response.setData(new Record[0]);
	processResponse(requestId, response);
	// }

	return;
}

// tell server to delete the record ...

[tleveque]

Overriding removeData() would work if you did it via JSNI. But the functionality is actually very simple to reproduce, just use a field of type "icon" and call removeData(record) from the recordClick event on that specific ListGridField.

I just tried that and it does not work well. When I click on my icon the removeData method is called, the values in the rows are removed, but the row stay in the grid! With the icon at the end!

Any idea?

[Isomorphic]

Read the FAQ about grids not updating.

[markok]

Overriding removeData() would work if you did it via JSNI.

Could you please post a simple example how exactly this override is done ? I'm having a bit of hard time getting this to work. Thanks a lot!

[hopey_dishwasher]

I wanted to have some generic way of having a confirmation dialog attached to a list grid field that removes a record. If there was a one-liner that achieves it I missed it, instead I implemented this:

public class ListGridHelper {
	private ListGridHelper(){}; //no constructor
	
	private static String removeConfirmation = "Are you sure you wish for this record to be removed?";
	private static RecordClickHandler removeClickHandler = new RecordClickHandler(){
		@Override
		public void onRecordClick(final RecordClickEvent event) {
			//if(event.getField() != removeField) return; //Somehow the ListGridFields we get back out are not the ones we put in :(
			if(!event.getField().getName().equals(removeField.getName())) return;
			
			SC.ask(removeConfirmation, new BooleanCallback() {
				@Override
				public void execute(Boolean value) {
					if(value) event.getViewer().removeData(event.getRecord());
				}
			});
		}
	};
	private static ListGridField removeField = new ListGridField("_removeRecord", "Remove Record"){{
		setType(ListGridFieldType.ICON);
		setIcon(""); //Set to your remove icon, e.g. actions/remove.png
		setCanEdit(false);
		setCanFilter(false);
		setCanSort(false);
		setCanGroupBy(false);
		setCanFreeze(false);
		setWidth(25);
	}};
	
	private static Map<ListGrid, HandlerRegistration> removeHandlers = new HashMap<ListGrid, HandlerRegistration>();
	
	//TODO: Somehow override lg.setFields to always reinclude the remove row?
	public static void setCanRemoveRecords(ListGrid lg, boolean canRemove){
		List<ListGridField> lgfs = new ArrayList<ListGridField>(Arrays.asList(lg.getFields()));
		if(lgfs.size() == 0) throw new RuntimeException("You must call setFields on your ListGrid prior to adding the remove handler."); 
		
		if(canRemove){
			if(!lgfs.contains(removeField)) lgfs.add(removeField);
			if(!removeHandlers.containsKey(lg)) removeHandlers.put(lg, lg.addRecordClickHandler(removeClickHandler));
			
		}else{
			//lgfs.remove(removeField); //Somehow the ListGridFields we get back out are not the ones we put in :(
			ListGridField fieldToRemove = null;
			for(ListGridField lgf : lgfs){
				if(lgf.getName().equals(removeField.getName())){
					fieldToRemove = lgf;
					continue;
				}
			}
			lgfs.remove(fieldToRemove);
			
			if(removeHandlers.containsKey(lg)) removeHandlers.remove(lg).removeHandler();
		}
		
		lg.setFields(lgfs.toArray(new ListGridField[lgfs.size()]));
	}
}

Usage:

ListGrid lg = new ListGrid();
lg.setFields(...);
ListGridHelper.setCanRemoveRecords(lg, true);

Seems to work,
Bye

EDIT: This causes problems if you use it on multiple list grids on the same page, I changed it so that it makes a new instance of a ListGridField on each call but haven't updated the code here.

[fitterman]

I did this by adding this element to the isc.ListGrid.create() call:

  removeData: function () {
    if (confirm('Do you want to DELETE this record?'))
    {
      return this.Super("removeData", arguments);
    }
  },

This overrides the removeData() method, shows a confirmation dialog and if the user indicates they want to do the deletion, it calls the overridden method.


This is running on SmartClient 8.1 with Chrome.