0

I have to get my filtered rows in my jqgrid by filtering dates through DateRangePicker element.

I do not want any filter window.

This is the my jsfiddle jqgrid code for the same. Its working for one only one date but not for date range. 

<script type="text/javascript">
//<![CDATA[
    jQuery(document).ready(function () {
        var mydata = [
            {id:"1", invdate:"2015-10-01",name:"test",  note:"note",  amount:"200.00",tax:"10.00",total:"210.00"},
            {id:"2", invdate:"2015-10-02",name:"test2", note:"note2", amount:"300.00",tax:"20.00",total:"320.00"},
            {id:"3", invdate:"2015-09-01",name:"test3", note:"note3", amount:"400.00",tax:"30.00",total:"430.00"},
            {id:"4", invdate:"2015-10-04",name:"test4", note:"note4", amount:"200.00",tax:"10.00",total:"210.00"},
            {id:"5", invdate:"2015-10-05",name:"test5", note:"note5", amount:"300.00",tax:"20.00",total:"320.00"},
            {id:"6", invdate:"2015-09-06",name:"test6", note:"note6", amount:"400.00",tax:"30.00",total:"430.00"},
            {id:"7", invdate:"2015-10-04",name:"Test7", note:"note7", amount:"200.00",tax:"10.00",total:"210.00"},
            {id:"8", invdate:"2015-10-03",name:"test8", note:"note8", amount:"300.00",tax:"20.00",total:"320.00"},
            {id:"9", invdate:"2015-09-01",name:"test9", note:"note9", amount:"400.00",tax:"30.00",total:"430.00"},
            {id:"10",invdate:"2015-09-08",name:"test10",note:"note10",amount:"500.00",tax:"30.00",total:"530.00"},
            {id:"11",invdate:"2015-09-08",name:"Test11",note:"note11",amount:"500.00",tax:"30.00",total:"530.00"},
            {id:"12",invdate:"2015-09-10",name:"test12",note:"note12",amount:"500.00",tax:"30.00",total:"530.00"}
        ];

var myGrid = $("#list");
myGrid.jqGrid({
datatype: "local",
data: mydata,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
      {name:'id',index:'id', width:65, sorttype: 'int'},
      {name:'invdate',index:'invdate', width:120, align:'center', sorttype:'date',
         formatter:'date', formatoptions: {newformat:'m/d/Y'},
         searchoptions: {
            sopt: ['eq','ne'],
            dataInit : function (elem) {
                   $(elem).daterangepicker({ 
                    dateFormat:'m/d/y', 
                    onClose: function(event) {
                           //$("#list")[0].triggerToolbar();
                           $('#list').trigger('reloadGrid');
                    }                                               
         });  
}}},
   {name:'name',index:'name', width:90},
                    {name:'amount',index:'amount', width:70, formatter:'number', align:"right"},
                    {name:'tax',index:'tax', width:60, formatter:'number', align:"right"},
                    {name:'total',index:'total', width:60, formatter:'number',align:"right"},
                    {name:'note',index:'note', width:100, sortable:false}
                ],
                rowNum:10,
                rowList:[5,10,20],
                pager: '#pager',
                ignoreCase:true,
                sortname: 'invdate',
                viewrecords: true,
                sortorder: "desc",
                caption:"Sorting and paging of local data",
                height: "100%"
            }).jqGrid('navGrid','#pager',{add:false,edit:false,del:false});
            myGrid.filterToolbar();
        });
    //]]>
    </script>
</head>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"/>
</body>

I also noticed in my jsfiddle, after we select values in datearangepicker calendar, I have to press Enter to filter the values in grid. Though we have some code in my onClose method of daterangepicker like below 

 dataInit : function (elem) {
         $(elem).daterangepicker({ 
             dateFormat:'m/d/y', 
              onClose: function(event) {
                   $('#list').trigger("reloadGrid",[{page:1}]);
              }
         });
 }

1) onclick of filter inputbox for Date, I am seeing calendar and able to select daterange. i.e. 10/1/15 - 10/10/15. But with this input only one row is appearing of Date 10/1/15. The result is not appearing between 10/1 - 10/10.

2) After selecting dates, grid is not refreshing tried with below code. 

$("#list")[0].triggerToolbar();
$('#list').trigger('reloadGrid');

Can anyone assist pls. Thanks

Jaikrat
  • 1,124
  • 3
  • 24
  • 45
  • 2
    Your fiddle is not working? can't see any daterangepicker or the toolbar icons. Do you have them? – Jai Oct 09 '15 at 09:01
  • It does not come next to date input box but at the bottom of the page. Below grid. – Jaikrat Oct 09 '15 at 09:50
  • Yeah, I checked on other machine. Its not working. I am able to open file [datepickerjs](https://www.filamentgroup.com/examples/daterangepicker/daterangepicker.jQuery.js) in my machine not on other machine it saying `forbidden` – Jaikrat Oct 09 '15 at 09:56
  • When you try in your jsfiddle could you please try removing datepicker.js from my code and add this one. "https://www.filamentgroup.com/examples/daterangepicker/daterangepicker.jQuery.js" – Jaikrat Oct 09 '15 at 09:59
  • What you means with "What!!! No one?". Stackoverflow don't pay any cent to answering the questions. If somebody in the world helps you spending his private time that you should don't make pressure on the people. You should don't expect that people will start immediately solving your problem directly after publishing your question. The more I post answers about jqGrid the more people see that I have to answer every question and spend my time for making his job. You event not spend your time in controlling of URLs which you post. Some URLs from demo `"` which makes URL incorrect. – Oleg Oct 09 '15 at 11:21
  • You should not use `reloadGrid` inside of processing of `onClose`. Instead of that I would recommend you to use trigger `"change"` on the `elem` or to call `triggerToolbar` method (`$("#grid")[0].triggerToolbar();`) in the same way like in [the answer](http://stackoverflow.com/a/6876951/315935) for example – Oleg Oct 09 '15 at 11:21
  • triggerToolbar is my second issue. 1st is comparing dates in Range. – Jaikrat Oct 09 '15 at 11:25
  • please use "@Oleg" prefix in comments if more as one person wrote comments to you. What you mean with "my second issue" and with "comparing dates in Range". Please express more clear what you need to implement. You can call `clearToolbar` to clear the filter and to reload the grid or you can call `triggerToolbar` to apply the current filter. What you need? – Oleg Oct 09 '15 at 11:38
  • @Oleg, I have updated my post. Added full code since I dont know why my jsfiddle is not working for other people. Please tell me, if there is anything you want. I was stuck with some other work that's why could not reply on time. Sorry for that. – Jaikrat Oct 09 '15 at 13:10
  • I posted you that http://jsfiddle.net/jaikratsingh/s2khufqr/ don't work because you used `"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/redmond/jquery-ui.css` (with `"` at the beginning). Moreover you use retro version of jQuery (1.4.4), jQuery UI (1.8.9) and jqGrid (3.8.2). Are the old versions really required? The fsfiddle code set `postData.filters`. It should set `search: true` additionally and trigger `reloadGrid` instead of `triggerToolbar` (because you set `search:true` and `postData.filters` before **manually**). – Oleg Oct 09 '15 at 15:39

0 Answers0