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.
Thanks for the response. I will try out this snippet today. In year dropdown, I can see 20 items at a time, how can I set it to show only 10 items?
You can set the year dropdown to show a custom number of years by adding the following code:
$("#grid1").data("igGridFiltering")._editors[5].field().datepicker("option", "yearRange", "c-10:c+10" });//where "c" is the current year, which means "c-10:c+10" will show 10 years before and 10 years after the current year.
Feel free to contact me if you have further questions.
I think I wasnt clear with my question. Setting year range is fine, it works as expectd. I am willing to limit height of year dropdown to show only 10 items instead of 20.