Hello,
I implemented enter key support based on this forum post:
http://www.infragistics.com/community/forums/t/72196.aspx
It works for a single column but not for multiple columns.
So I changed the code based on the combobox filter sample from:
http://www.infragistics.com/community/forums/p/77913/394333.aspx#394333
$(".ui-iggrid-filterrow.ui-widget").delegate("span.ui-igedit.ui-state-default.ui-widget.ui-corner-all.ui-igedit-container", "igeditorkeydown", function (evt, ui) { if (ui.key === 13) { var $grid = $(gridSelector); var $gridFiltering = $grid.data("igGridFiltering"); var filtering = $grid.data("igGrid").dataSource.settings.filtering; var expressions = filtering.expressions; filtering.expressions = []; var newExpressions = []; // First delete all expressions for this column var colKey = $(this).data("colKey"); for (var i = 0; i < expressions.length; i++) { if (expressions[i].fieldName !== colKey) newExpressions.push(expressions[i]); } // Set a new filter expression var searchValue = $(this).data("igEditor").value(); if (searchValue) { var colIndex = $(this).data("colIndex"); var condition = $gridFiltering.options.columnSettings[colIndex].condition; newExpressions.push({ fieldName: colKey, expr: searchValue, cond: condition }); } $grid.igGridFiltering("filter", newExpressions); //$gridFiltering.filter([], true); // Finally cancel the built-in filtering by using the private _timeoutId handle clearTimeout($gridFiltering._timeoutId); } });
Now I can set filters on multiple columns but I have to press the Enter key in each which is neither intuitive nor practical.
I have the following requirement:
- I need to use editor fields and comboboxes in the filter row
- The user should be able to enter a filter value and then use the Tab key or the mouse to switch to another filter cell
- When done, the user presses the Enter key and the grid displays the records based on all filters
(Filtering is remote using oData. Filtering can take some time and therefore auto-filtering after a delay does not work and makes a bad user experience.)
I cannot see how I can extend and combine Infragistic's samples to achive this? (Filter on multiple columns, use lookup comboboxes in filter row and only press the Enter key once to start filtering.)
Please help...
Thanks!
Best regards,
Joern
Hello Joern,
Thank you for contacting Infragistics.
I am currently looking into if this behavior may be achieved. I will continue to look into this matter and will give you a progress update by the end of the day Friday.
Thank you for your patience. I have done some further looking into this matter and have the following information. The filter method you are currently using to filter can take an array of expressions. So what you can do in in your key down event you can also check for the tab key as well as handling the mouse click event. Once you have done this you can get the filter options from column and you will want to reset the delay for the timeout so it does not auto filter. Then when you press enter you will be able to pass the array you have been building to the filter method.
I am following up to see if the information provided has resolved this matter.
Please let me know if I may be of further assistance with this matter.
Hello Mike,
unfortunately, I am not convinced that this is the best solution.
You wrote: "... to pass the array you have been building to the filter method"
I guess that you mean that I should build the array with filter expressions while the user tabs through the filter row, right? - It would probably work, but it is kind of error prone, because I would have to implement a little state machine, because the user might use the tab-key or the mouse to switch between filter columns, he might press the enter key in one row, then later add an additional condition by clicking in another filter column and pressing enter-key again, etc.
I looked in the Ignite UI source code and the filter row implementation goes through all columns and creates the filters when the timeout is reached.
That would make more sense in this case as well.
When the user presses the enter-key, go through all columns, get the filter condition, the filter value (from the text field or dropdown column box), and set all filters at once. That would seem like a more straightforward solution.
Do you have any idea how this could be done?
I thought about the following, without trying or testing:
- Instead of completly replacing the text field with the combo box, just hide the text field and copy the combo box selection into it.
- Then, when the user presses the Enter-key, call an (internal) function of the grid, to start the normal filter row processing. (The same function that would be used with the timeout.)
- Because I copied the combobox selection value into the text field, the normal filter row implementation should (hopefully) be able to use it although the field is hidden.
What do you think?
Thank you for the update. The recommended way to achieve this is as I described before by building an array of filter settings either as you tab though the columns or when you press the enter key. Then pass that array to the filter method. The method you mention at the bottom of your post isn’t recommended or supported as it would rely on an internal method. The reason for this is the internal method could change and then any of the code you wrote using it would be non-functional.