My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 213: Custom filter with specific id
1 person starred this issue and may be notified of changes. Back to list
Status:  Invalid
Owner:  ----
Closed:  Oct 2009


 
Reported by ryan.hen...@gmail.com, Aug 31, 2009
I'm trying to add the Date Range Picker
(http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_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.


Sep 2, 2009
Project Member #1 jeff.johnston.mn@gmail.com
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.
Sep 4, 2009
#2 ryan.hen...@gmail.com
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(this,
'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?
Sep 8, 2009
Project Member #3 jeff.johnston.mn@gmail.com
Do you get any JavaScript errors? Do you use Firebug with Firefox to work with
JavaScript?
Oct 20, 2009
Project Member #4 jeff.johnston.mn@gmail.com
(No comment was entered for this change.)
Status: Invalid
Nov 26, 2009
#5 ketan.kh...@gmail.com
I have tried to implement and it works. Here is the link
http://blog.ketankhairnar.com/2009/11/adding-jquery-datepicker-to-jmesa-grid.html
Apr 22, 2010
#6 andyned...@gmail.com
I'm very interesting in your article, but the URL has expired :(
Apr 25, 2010
#7 andyned...@gmail.com
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;
    });		
},

Powered by Google Project Hosting