JqGrid, add clear button in the toolbar search column

Question

I have a JqGrid with the toolbar search enable. One of my column is a datetime column and the search field is a jquery datepicker. The problem with a datepicker is that you cannot have an empty value, but as this field is a filter it can be empty. So what id'like to do is to add a little button near the datepicker which will clear the field. Is there a way to do this, or to be able to clear the datepicker from client side.

enter image description here

Here is the code for the column

{ name: 'Period', index: 'Period', align: 'center', formatter: 'date', formatoptions: { newformat: 'F, Y' }, width: '70px', search: true,
                        searchoptions: {
                            dataInit: function (el) {
                                $(el).datepicker({
                                    yearRange: "-5:+1",
                                    changeMonth: true,
                                    changeYear: true,
                                    showButtonPanel: true,
                                    dateFormat: 'MM, yy',
                                    onClose: function (dateText, inst) {
                                        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                                        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                                        $(this).datepicker('disable');
                                        $(this).datepicker('setDate', new Date(year, month, 1));
                                        $(this).datepicker('enable');
                                        $("#jqgCompLine")[0].triggerToolbar();
                                    },
                                    beforeShow: function (input, inst) {
                                        if ((datestr = $(this).val()).length > 0) {
                                            year = datestr.substring(datestr.length - 4, datestr.length);
                                            month = jQuery.inArray(datestr.substring(0, datestr.length - 6), $(this).datepicker('option', 'monthNames'));
                                            $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                                            $(this).datepicker('setDate', new Date(year, month, 1));
                                        }
                                    }
                                });
                            }
                        },

Thanks in advance for your help!

score 1 · Answer 1 · answered Jan 18 '12 at 12:29

1

The datepicker have no problem with empty fields. I suppose it's the problem with your customization.

I don't know which data you have as the date values in the grid. The format 'F, Y' (and 'MM, yy' for the datepicker) seems me a little strange because the searching will be done by full date, but you display only the mouth and year. Probably all will work correct with your data probably not.

I created the demo to demonstrate that searching with the datepicker. During creating of the demo I used the 'j, F, Y' format (for the datepicker the 'd, MM, yy' format) and found two bugs in the parseDate method used by jqGrid internally.

The first problem are in the lines where date[k] value will be correct calculated, but not assigned to tsp.m. One should insert in both if statements the assignment tsp.m = date[k];. So both 'F' and 'M' formats works incorrect in the current code of jqGrid. Because you use 'F' format it could be important for you.

The next problem is that the 'j' format for the day will be processed in the wrong way. During the parsing of the date the tsp.j will be correctly assigned, but the tsp.d, which will be used in the line, will be not modified and stay equal to 1. To fix the code I suggest to add the line

if(tsp.j !== undefined) { tsp.d = tsp.j; }

somewhere after the for loop. The demo used the modified version jquery.jqGrid.src-parseDate.js of the jquery.jqGrid.src.js of jqGrid 4.3.1.

I will report the bug and my fix to trirand later.

answered Jan 18 '12 at 12:29

Oleg

220,925
34
403
798

Hi Oleg, Thanks for your answer. For the date picker format I've got inspired by this [post](http://stackoverflow.com/questions/2208480/jquery-date-picker-to-show-month-year-only). – LotuX Jan 23 '12 at 14:31
@LotuX: You are welcome! I didn't say that it's wrong way. The most problem is that the input data **must** have 1 as the day. If you would have any date having not 1 as the day the user will don't see any differences and the searching will also failed. Are your problem solved now after applying the bug fix? – Oleg Jan 23 '12 at 14:46
In fact, for the search with the datePicker, what I do is to retrieve the month and year from the datepicker and after create a select query with the entire month as the interval, this works fine. I have to admit I don't know how your datepicker can be empty because I don't know what in my datpicker forces a value. – LotuX Jan 23 '12 at 14:49
@LotuX: I suppose that you have problems with empty cells because of your current `beforeShow` implementation. In the default implementation of datepicker there are no such problem. What is your current problem? Do you tried my suggestions? Which `datatype` you use? Do you use `loadonce: true` option? – Oleg Jan 23 '12 at 14:58
My only problem is that I cannot make the period field empty. So I didn't tried your suggestion because if I understand well it will only help for the search ans currently the surch works fine. My datatype is json, and I don't use loadonce so I guess it's false by default. I think the main problem comes from `$(this).datepicker('setDate', new Date(year, month, 1));` which is triggered on closing the datepicker and so it cannnot be empty, but I have no idea how to by pass this. – LotuX Jan 23 '12 at 15:19

JqGrid, add clear button in the toolbar search column

1 Answers1