Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Creating a custom FilterEditor

    Hi. I want to create a date range filter for one of my fields in a ListGrid. Based on some other posts, it appears the recommended way is to create a FormItem and a FormItemIcon. I am having trouble getting the icon for the field to show up neatly -- it always shows up vertically offset by a few pixels, and I am trying to make it look just like a DateItem filter (perhaps without the textbox to freely enter a value).

    If I set the icon up as a Picker, then the icon in the filter bar looks great, but it shows a picker window. If I remove the picker and use a FormItemIcon, then I have the offset problem that I can't seem to get around. Here is my code:
    Code:
    public class DateRangeItem extends FormItem
{
	private final ListGrid grid;
	public DateRangeItem(ListGrid listGrid)
	{
		super();
		setTitle("Select Date Range");
		this.grid = listGrid;
		addIconClickHandler(new IconClickHandler()
		{
			public void onIconClick(IconClickEvent event)
			{
				selectDate();
			}
		});
		FormItemIcon icon = new FormItemIcon();
		icon.setPrompt("Select date range");
		icon.setSrc("date_control.png");
		setIcons(icon);
		
        setIconHeight(18);
        setIconWidth(18);
        setIconVAlign(VerticalAlignment.CENTER);
//        setPickerIconWidth(16);
//        setPickerIconHeight(16);
//        setPickerIconSrc("date_control.png");
//        setShowPickerIcon(true);


	}

	public void selectDate()
	{
		DynamicForm form = new DynamicForm();
		DateItem startDate = new DateItem("startDate");
		startDate.setValue(new Date(System.currentTimeMillis() - ((long)1000 * 60 * 60 * 24 * 90)));	// Default to 90 days prior
		DateItem endDate = new DateItem("endDate");
		endDate.setValue(new Date());
		
		ButtonItem filterButton = new ButtonItem("filter");
		
		
		form.setItems(startDate, endDate, filterButton);
		
		Window popup = new Window();
		popup.setWidth(500);
		popup.setHeight(300);
		popup.centerInPage();
		popup.setIsModal(true);
		popup.addItem(form);
		popup.show();

	}
	
}
    Tags: None
    #2
    Hi. I haven't heard back yet, but I've got a couple more questions on doing this, please:

    1) What is the appropriate way to update the filter from the entered values? Is it to call
    Code:
    		filterButton.addClickHandler(new ClickHandler()
		{
			public void onClick(ClickEvent event)
			{
                Criteria criteria = grid.getFilterEditorCriteria();
                if (criteria == null) criteria = new Criteria();
                criteria.addCriteria(form.getValuesAsCriteria());
                grid.invalidateCache();
                grid.filterData(criteria);
                popup.hide();
			}
		});
    Or will I run into issues when additional filter criteria is entered by the user when they use the filtereditor on other columns?

    2) I looked at http://www.smartclient.com/#dynamicReporting as a template for a date range, but that creates 2 custom columns and adds an operationBinding whereClause. If the user doesn't use my DateRangeItem to filter on a date (but either filters on other columns or doesn't filter anything at all), the ListGrid throws an error because there is nothing in $criteria.startDate (the message is "Unknown column '$criteria.startReportDate' in 'where clause'").

    Thanks!

    -Ken

    Comment

      #3
      Hi, Isomorphic. Any thoughts on these items?

      Thanks!

      -Ken

      Comment

        #4
        Visual glitch: can you show the appearance you're seeing with a screenshot, and indicate what browser it's from, your version of SmartGWT, and what you're using as a DOCTYPE, if anything?

        On #2, just ensure a Date is always passed (eg new Date(0)).

        On #1, use the AdvancedCriteria constructors that can take another instance of AdvancedCriteria to combine the date range filter with the built-in filter.

        Comment

          #5
          re: Visual Glitch based on the source code above, attached is the screenshot. I am using SmartGWTEE 2.1. My index.html has a doctype of
          Code:
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
          Browser is the GWT hosted browser.
          Attached Files

          Comment

            #6
            re: #1 above, how do I get an advanced criteria from a ListGrid?

            Comment

              #7
              Hi,

              Does anybody know how to get values from advance criteria of ListGrid?

              thx
              taPe

              Comment

              Previous template Next
              Working...
              X