Custom filter with specific id

[GoogleCodeExporter]

I'm trying to add the Date Range Picker
(http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquer
y_ui_css_framework/)
to a filter so I can just click the filter, and the Date Range Picker
appears.  The Date Range Picker requires an input text field, with a
specific id.  I can get it to populate, but the formatting is all screwy.

What steps will reproduce the problem?
1. Custom build a Filter:
        table.getRow().getColumn("date").getFilterRenderer().setFilterEditor(new
FilterEditor(){
  public Object getValue(){
    String div = new String("<div class=\"dynFilter\" style=\"overflow:
hidden; width: 57px;\"><div id=\"dynFilterDiv\">");
    String input = new String("<input class=\"dynFilter\" type=\"text\"
id=\"dateRange\" style=\"width: 137px; height: 15px\" />");
    String endDiv = new String("</div>");
    String html = div + input + endDiv + endDiv;
    return html;
  }
});

2. Open the page.  

What is the expected output? What do you see instead?
The input box should be displayed, but it's only like half of the <td>.  I
can't figure out how to make it fill the entire <td>

What version of the product are you using? On what operating system?
2.4.3 on Windows XP

Please provide any additional information below.

Original issue reported on code.google.com by ryan.hen...@gmail.com on 31 Aug 2009 at 8:01

[GoogleCodeExporter]

You are going to have to do something similar to what the current filters are 
doing.
Take a look at the JMesa JavaScript...it for sure is not trivial to get it to 
look
nice across browsers and such. You should be able to do something similar to 
what the
default filter is doing though.

Original comment by jeff.johnston.mn@gmail.com on 2 Sep 2009 at 6:03

[GoogleCodeExporter]

I've tried adding a function I called "createDateRangeFilter" to the 
jquery.jmesa.js
filterapi var.  I've also added the function to jmesa.jar, copying the
"createDynFilter" function.  The function is identical to the "createDynFilter"
function.  I've tried calling it using the FilterEditor:

HtmlBuilder html = new HtmlBuilder();                   
html.div().styleClass("dynFilter").onclick("jQuery.jmesa.createDateRangeFilter(t
his,
'bankTransactions', 'date')").divEnd();
return html.toString();

Nothing happens.  When I replace "createDateRangeFilter" with "createDynFilter" 
in
the div, it behaves just like all the other filters.  Am I missing a step here?

Original comment by ryan.hen...@gmail.com on 4 Sep 2009 at 8:18

[GoogleCodeExporter]

Do you get any JavaScript errors? Do you use Firebug with Firefox to work with
JavaScript?

Original comment by jeff.johnston.mn@gmail.com on 8 Sep 2009 at 10:52

[GoogleCodeExporter]

Original comment by jeff.johnston.mn@gmail.com on 20 Oct 2009 at 8:18

• Changed state: Invalid

[GoogleCodeExporter]

I have tried to implement and it works. Here is the link
http://blog.ketankhairnar.com/2009/11/adding-jquery-datepicker-to-jmesa-grid.htm
l

Original comment by ketan.kh...@gmail.com on 26 Nov 2009 at 12:22

[GoogleCodeExporter]

I'm very interesting in your article, but the URL has expired :(

Original comment by andyned...@gmail.com on 22 Apr 2010 at 9:52

[GoogleCodeExporter]

Ketan was kind enough to send me the code to use Datepicker with JMesa:

In JSP:
entry for the jmesa table as follows

<jmesa:tableFacade
        id="worksheet" 
        editable="false"
        items="${items}"
        maxRows="25"
        exportTypes=""
        maxRowsIncrements="25,50,100"
        stateAttr="restore"
        toolbar="com.xx.portal.util.jmesa.CustomToolbar"
        filterMatcherMap="com.xx.portal.util.jmesa.PDADateFilterMatcherMap"
        var="pdaCycleInfo">
        ......

        <jmesa:htmlColumn property="importDateTime" title="Import Date"
editable="false"  width="150px"  
        pattern="yyyy-MM-dd" cellEditor="org.jmesa.view.editor.DateCellEditor" 
        filterEditor="com.xx.portal.util.jmesa.DateRangeFilterEditor" 
        />

.............

public class PDADateFilterMatcherMap implements FilterMatcherMap
{

    public Map<MatcherKey, FilterMatcher> getFilterMatchers()
    {
        Map<MatcherKey, FilterMatcher> filterMatcherMap = new HashMap<MatcherKey,
FilterMatcher>();
        filterMatcherMap.put(new MatcherKey(Date.class, "importDateTime"), new
DateFilterMatcher("yyyy-MM-dd"));
        return filterMatcherMap;
    }
}
.............

public class DateRangeFilterEditor extends AbstractFilterEditor
{
    @Override
    public HtmlColumn getColumn()
    {
        return (HtmlColumn)super.getColumn();
    }

    public Object getValue()
    {
        HtmlBuilder html = new HtmlBuilder();

        Limit limit = getCoreContext().getLimit();
        HtmlColumn column = getColumn();
        String property = column.getProperty();
        Filter filter = limit.getFilterSet().getFilter(property);

        String filterValue = "";
        if (filter != null)
        {
            filterValue = filter.getValue();
        }

        html.div().styleClass("dynFilter");
        html.onclick("jQuery.jmesa.createDynDateFilter(this, '" + limit.getId() +
"','" + column.getProperty() + "')");
        html.close();
        html.append(escapeHtml(filterValue));
        html.divEnd();

        return html.toString();
    }
}
--------------

Add following to jquery.jmesa js in filter section

createDynDateFilter : function(filter, id, property) {
    if (dynDateFilter) {
        return;
    }

    dynDateFilter = new classes.DynFilter(filter, id, property);

    var cell = $(filter);
    var width = cell.width();
    var originalValue = cell.text();

    /* Enforce the width with a style. */
    cell.width(width);
    cell.parent().width(width);
    cell.css('overflow', 'visible');

    cell.html('<div id="dynFilterDateDiv"><input id="dynFilterDateInput"
name="filter" style="width:' + (width + 2) + 'px" value="" /></div>');

    var input = $('#dynFilterDateInput');
    $("#dynFilterDateInput").datepicker({  
        duration: '', 
        dateFormat: 'yy-mm-dd',
        showTime: false,  
        constrainInput: false  
     });
    input.val(originalValue);
    input.focus();

    $(input).keypress(function(event) {
        if (event.keyCode == 13) { /* Press the enter key. */
            var changedValue = input.val();
            cell.text('');
            cell.css('overflow', 'hidden');
            cell.text(changedValue);
            $.jmesa.addFilterToLimit(dynDateFilter.id, dynDateFilter.property,
changedValue);
            $.jmesa.onInvokeAction(dynDateFilter.id, 'filter');
            dynDateFilter = null;
        }
    });

    $(input).change(function() {
        var changedValue = input.val();
        cell.text('');
        cell.css('overflow', 'hidden');
        cell.text(changedValue);
        $.jmesa.addFilterToLimit(dynDateFilter.id, dynDateFilter.property, changedValue);
        $.jmesa.onInvokeAction(dynDateFilter.id, 'filter');
        dynDateFilter = null;
    });     
},

Original comment by andyned...@gmail.com on 26 Apr 2010 at 6:44