Hello,
I am looking for how to add custom conditions in iggrid date filter and trigger calendar automatically when you choose any condition.
Date filter custom conditions I want to add are like below,
1) Greaterthanequalto
2) Lesserthanequalto
Also wants to trigger open calendar event on click of any date filter condition.
Hello Sameer,
You can set custom filter conditions, via the customConditions option in the columnSettings of igGridFiltering. In this option a filter function should be specified, filterFunc. For example:
{ name: "Filtering", columnSettings: [ { columnKey: "SellStartDate", customConditions: { labelText: "Lesser than/equal to", requireExpr: true, filterFunc: lesserOrEqual } }}...function lesserOrEqual(value, expression, datatype, ignoreCase, preciseDateFormat) { return value <= expression;}
To open the calendar after a condition is chosen you can do the following:
name: "Filtering",columnSettings: ...,dropDownClosed: function(evt, ui) { if((ui.dropDown)[0].id == "grid1_dd_SellStartDate") { $( $("td[aria-describedby='grid1_SellStartDate']").find("div[role='button']") ).click(); }}//where grid1 is the table's id and SellStartDate is the key of the date column
I have attached a sample, demonstrating how this can be done.
Please feel free to contact me if you have any questions.
Regards,Ivaylo HubenovEntry-level developer
Hello Ivaylo,
Solution given here to open a datepicker is not 100% correct. As we are capturing dropdownClosed events, its not necessary that dropdown is closed only filter condition is selected. While filter dropdown is open, if I click on anywhere else on page, and not on dropdown, still it is poping up datepicker.
Can i control this?? I want datepicker to be available only when I click one of the conditions from dropdown only.
Regards
Amrish S Kulkarni
I also have one more query regarding datepicker from igGrid. I have enabled year dropdown. By deafualt, it allows me to choose 20 years back from now. Can I increase this number to say 100?? I tried with yearRange option but it then restricts min and max year in dropdown. I dont want to restrict th min or max bounds, but instead want to show 100 yearse.g. 2017 to 1917 as default, when I click on 1917, it should show 1817 to 1917 in dropdown.
Hello Amrish,
Showing the datepicker only when the condition has been changed can be achieved by saving the condition when the dropDown has been opened and later on dropDownClosed check if the current value matches the old one. If the values match, no changes have happened in the dropDown, therefore it should not show the datepicker. For example:
dropDownClosed: function(evt, ui) {var currentCondition = $("#grid1").igGridFiltering("option", "columnSettings")[5].condition;if((ui.dropDown)[0].id == "grid1_dd_SellStartDate") { if(condition != currentCondition) { $( $("td[aria-describedby='grid1_SellStartDate']").find("div[role='button']") ).click(); }},dropDownOpened: function(evt, ui) { condition = $("#grid1").igGridFiltering("option", "columnSettings")[5].condition; if( $("#ui-datepicker-div").css("display") == "block" ) { $( $("td[aria-describedby='grid1_SellStartDate']").find("div[role='button']") ).click(); }}
The year range can be modified by doing the following:
$("#grid1").data("igGridFiltering")._editors[5].field().datepicker("option", "yearRange", "c-100:c+100" });
I am attaching a sample.
Please feel free to contact me if you need further assistance.
If I select same condition second time, it is not showing datepicker and I have to explicitly click on arrow button to get datepicker.
There is another way to show the datepicker when an item is selected from the dropdown. When the grid is rendered add a click event to the dropdown, that opens the datepicker:
rendered: function (evt, ui) { $( $("ul-ui-menu.ui-widget")[5] ).click(function() { $( $("td[aria-describedby='grid1_SellStartDate']").find("div[role='button']") ).click(); }}
This way the datepicker will show up every time the dropdown is clicked (when an item of the list is selected).
I don't think it is possible to change the height of the year dropdown.
I am attaching a sample, using the code above.
Hi there.Recently upgraded to 2018.2 version and the same functionality is not working.
The following error comes upon selecting a date:
Uncaught TypeError: Cannot read property 'day' of null at Class._findDateMatch (infragistics.core.js:376) at Class._findMatch (infragistics.core.js:376) at Class.filter (infragistics.core.js:375) at t.(anonymous function).(anonymous function)._filterDataSource (cdn-na.infragistics.com/.../infragistics.lob.js:245:11321) at t.(anonymous function).(anonymous function)._filterDataSource (code.jquery.com/.../jquery-ui.min.js:5:5028) at t.(anonymous function).(anonymous function)._filterInternal (cdn-na.infragistics.com/.../infragistics.lob.js:245:8436) at t.(anonymous function).(anonymous function)._filterInternal (code.jquery.com/.../jquery-ui.min.js:5:5028) at i (jquery-1.9.1.min.js:3)
The other configuration remains same as before.
PFA the sample for reference
igGridFiltering_configuring_datepicker.zip
Regards,
Abhishek Sinhal