Filtering grid with separate start and end date

[rishisahiParticipant]

Hi,

I am trying to filter grid with two different date fields, Start and end date but don’t see how to pass them as a range in grid filter function. Here is my design,

$("#jqxExpander").jqxExpander({
       width: 850,
       expanded: false, 
         initContent: function () {
           $("#jqxStDtWidget").jqxDateTimeInput({width: '100px', formatString: "dd/MMM/yyyy"});
           $("#jqxEnDtWidget").jqxDateTimeInput({width: '100px', formatString: "dd/MMM/yyyy"});
           $("#jqxL3Button").jqxButton({width: '100px'});
           $("#jqxL12Button").jqxButton({width: '100px'});
           $("#jqxYearToDateButton").jqxButton({width: '100px'});
           $("#jqxApplyFilterButton").jqxButton({width: '80px'});
           $("#jqxClearFilterButton").jqxButton({width: '80px'});
       }
   });

<div id='jqxExpander'>
			<div>Date filter</div>
			   <div>
				<table border="0" >
				   <tr>
				          <td><b>Start date : </b></td>
				          <td id="jqxStDtWidget"></td>
				          <td><b>End date :</b></td>
				          <td id="jqxEnDtWidget"></td>
				          <td>&nbsp;</td>
				          <td><input type="button" id='jqxL3Button' value="Last 3 Months" /></td>
				          <td><input type="button" id='jqxL12Button' value="Last 12 Months" /></td>
				          <td><input type="button" id='jqxYearToDateButton' value="Year-to-Date" /></td>
				          <td>&nbsp;</td>
				          <td>&nbsp;</td>
				          <td><input type="button" id='jqxApplyFilterButton' value="Apply filter" /></td>
				          <td><input type="button" id='jqxClearFilterButton' value="Clear filter" /></td>
				   </tr>
				</table>
			   </div>
		</div>

[Peter StoevKeymaster]

Hi rishisahi,

Please, look at: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-filtering.htm. From the help topic you will learn how to create and apply filters through API.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[rishisahiParticipant]

Thanks Peter, I am able to do it. One more thing wanted to check I don’t find my post which was regarding different behavior of grid on IE and Firefox. It was under general discussions.

Could you please help me to investigate why grid is not looking good on IE as it’s looking on Firefox/Chrome ?

[Peter StoevKeymaster]

Hi rishisahi,

IE has multiple versions. If the version which you use does not support CSS3, then you will not see rounded corners, gradients, CSS3 things like that. So, there is no different behavior. The Grid looks good in IE7, IE8, IE9, IE10 and IE11. In some of these it has rounded corners and gradients in others it does not. If the Browser does not support styling features, what can we do? I would suggest you to read more about what web browsers support on Internet.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[rishisahiParticipant]

Hi Peter,

I am using IE9, Here is the screen shot,

(link :http://tinypic.com/r/11uj91u/8)

[rishisahiParticipant]

Other than rounded corner, Exapander behaves abnormally. You may see expander neither display properly nor expand.

[Peter StoevKeymaster]

Hi rishisahi,

So you don’t have rounded corners. There is also no expander on the image you posted. I suggest you to look at the Demos and Getting Started help topics in order to learn how to use these widgets.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts