Is it possible to pre-populate the advanced filter dialog?
I am able to capture the values after the user clicks OK, but how would I pre-populate the dialog if the user was return to the page after closing the browser for example.
Thanks,
Paul
Hi Paul,
Filtering raises filterDialogOpening event. That event provides reference to dialog, which can be used to obtain title, strings, editors, etc. The filtering dialog uses igEditor widgets for column name and its value and it uses SELECT for filtering condition. It means that application may find those elements, get references to widgets and adjust their values. I wrote a sample for you, which changes title, finds column ("First Name"), ets initial filter-value and filter-condition for that column.
$('#grid1').igGrid({ dataSource: arrayOfJSONs, height: "400", columns: [ { headerText: 'ID', key: 'ID', dataType: 'number', width: "50" }, { headerText: 'First Name', key: 'firstName', dataType: 'string', width: "80" }, { headerText: 'Second Name', key: 'middleName', dataType: 'string', width: "80" } ], features: [ { name: 'Filtering', mode: 'advanced', filterDialogOpening: function (evt, ui) { var dialog = ui.dialog; // customize title of dialog var title = dialog.find('.ui-dialog-title'); if (title.length === 1) { title.html('My Search Dialog'); } // editors are located in TABLE: find TRs in that TABLE var trs = dialog.find('.ui-iggrid-filtertable').find('tr'), i = trs ? trs.length : 0; // go through all TRs while (i-- > 0) { var tr = $(trs[i]); // INPUT which represents igEditor with name of column var input = tr.find('td:nth-child(1)').find('input'); // reference to igEditor var col = (input.length === 1) ? input.data('igEditor') : null; // find column "First Name" if (col && col.value() === 'First Name') { // INPUT which represents igEditor with filtering value input = tr.find('td:nth-child(3)').find('input'); // reference to igEditor var val = (input.length === 1) ? input.data('igEditor') : null; // set filtering value if (val) { val.value('ok'); } // SELECT which represents filtering condition var select = tr.find('select'); // set "Contains" condition select.val('contains'); } } }, type:'local' }] });
Viktor,
Thank you this is exactly what I need. I appreciate the help.
Best Regards,
As a follow-up, is there a way to programmatically add another row to the advanced filter dialog? I guess what I am trying to do is fire the click event of the add button.
Once again you provide me with what I need. Thank you.
I looked at codes of filtering and found that add button is linked to _addFilterFromDialog method. I was not able to find any public functionality related to it. A call to that method should add row.I also looked at generated html and found where that button is located. It is possible to find reference to that button and trigger the mousedown which is used by igGridFiltering.
Note: similar features are not public and they can be used only on application's own risk. There is no support and no guarantee that it will work as expected or it will be available in future versions/updated.
Below is example for both cases:
<script type="text/javascript"> function _addFilterFromDialog() { var filtering = $('#grid1').data('igGridFiltering'); if (filtering) filtering._addFilterFromDialog(); } function addByTrigger() { var button = $('#grid1_container_dialog').find('.ui-iggrid-filterdialogaddbuttoncontainer').find('.ui-button'); button.trigger('mousedown'); }</script><table id="grid1"></table><input type="button" value="_addFilterFromDialog" onclick="_addFilterFromDialog()" /><input type="button" value="addByTrigger" onclick="addByTrigger()" />