| Issue 213: | Custom filter with specific id | |
| 1 person starred this issue and may be notified of changes. | Back to list |
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
Sep 4, 2009
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
Do you get any JavaScript errors? Do you use Firebug with Firefox to work with JavaScript?
Oct 20, 2009
(No comment was entered for this change.)
Status:
Invalid
Nov 26, 2009
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
I'm very interesting in your article, but the URL has expired :(
Apr 25, 2010
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;
});
},
|