Calendar widget in jqxgrid filter bar not showing Today button

[cpcodeMember]

Hello,

I am seeing a difference between the Grid filtering Calendar widget in the online examples and my application. In this example from your site:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filterrow.htm?shinyblack

The calendar widget from the Date filter shows the Today and Clear buttons. In my application, using the same exact code and same exact browser, I don’t see the Today and Clear buttons.

I initially looked at using ‘createfilterwidget’ to set the ‘showFooter’ property of the calendar widget to true (assuming that the footer is where those two buttons are), but I was not successful. Also, the example page above does not seem to have ANY code that turns on the Today and Clear buttons.

Here is my code defining the first column in my table, which is the date column:

columns: [
{ text: ‘Date/time’, datafield: ‘EventDate’, filtertype: ‘date’, width: “15%”, cellsformat: ‘d’ },

What could cause this discrepancy, and how can I fix/debug it?

Thank you,

[DimitarParticipant]

Hello cpcode,

Please make sure you use the latest version of jQWidgets (as of now, it is 2.8.3). If updating does not fix your issue, please post a larger code sample so that we may contemplate on the cause of the reported behaviour.

Best Regards,
Dimitar

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

[cpcodeMember]

Hello Dimitar,

Thank you for your reply. I am using v. 2.8.3, I downloaded it less than a week ago. I investigated the issue a bit more, here is what I found:

– The Today and Clear buttons are present in the HTML but they are not visible. The reason (as far as I can tell) is that one of the ancestor div elements has a height value that is too short.

– Here is my page code

<script type="text/javascript">
$(document).ready(function () {
      selectTab(10);
      var theme = getTheme();
      var source =
      {
         datatype: "json",
         datafields: [{ name: 'EventDate', type: 'date' },
                        { name: 'User', type: 'string' },
                        { name: 'Event', type: 'string' },
                        { name: 'EventDetails', type: 'string' },
                        { name: 'Patient', type: 'string' },
                        { name: 'MRN', type: 'string' },
                        { name: 'AccessionNo', type: 'string' },
                        { name: 'ServiceID', type: 'string' }
                        ],
         url: '@Url.Action("AuditLogContents","Admin")',
         root: "Rows",
         beforeprocessing: function (data) {
            source.totalrecords = data.TotalRows;
         },
         // update the grid and send a request to the server.
         filter: function (data) {
            $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
         },
         // update the grid and send a request to the server.
         sort: function () {
            $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
         }
      };
      var dataAdapter = new $.jqx.dataAdapter(source);
      $("#jqxgrid").jqxGrid(
      {
         width: "100%",
         height: "100%",
         columnsresize: true,
         columnsreorder: true,
         filterable: true,
         showfilterrow: true,
         showfiltercolumnbackground: false,
         sortable: true,
         pageable: true,
         pagesize: 100,
         pagesizeoptions: [50, 100, 200],
         virtualmode: true,
         rendergridrows: function (obj) {
            return obj.data;
         },
         theme: theme,
         source: dataAdapter,
         columns: [
              { text: 'Date/time', datafield: 'EventDate', filtertype: 'date', width: "15%", cellsformat: 'd'}, 
              {text: 'User name', datafield: 'User', filtertype: 'textbox', filtercondition: 'contains', width: "10%" },
              { text: 'Event', datafield: 'Event', filtertype: 'checkedlist', width: "15%" },
              { text: 'Event details', datafield: 'EventDetails', sortable: false, width: "20%" },
              { text: 'Patient', datafield: 'Patient', width: "10%" },
              { text: 'MRN', datafield: 'MRN', width: "10%" },
              { text: 'Accession #', datafield: 'AccessionNo', width: "10%" },
              { text: 'Service ID', datafield: 'ServiceID', width: "10%" }
          ]
      });
      $('#btnExport').jqxButton({ width: '100', theme: theme });
      $('#btnClearFilters').jqxButton({ width: '100', theme: theme });
   });
   function exportCurrent()
   {
      var url = '@Url.Action("DownloadAuditLog","Admin", new {sortInfo = "--sortInfo--", filterInfo = "--filterInfo--"})';
      url = url.replace("--sortInfo--", JSON.stringify($('#jqxgrid').jqxGrid('getsortinformation')))
               .replace("--filterInfo--", JSON.stringify($('#jqxgrid').jqxGrid('getfilterinformation')[0]));
      // Send request
      location.href = url;
   }
   function clearAllFilters() {
      $("#jqxgrid").jqxGrid('clearfilters');
   }
</script>
   <div>
      <span>Export</span>
      <span>Clear all filters</span>
   </div>
   <div>
   </div>

The rest of the code is in a layout page (master page), with the and tags needed by jqWidgets

– Here is what I see using the IE9 F12 tools (similar to Firebug):

– Root div for the calendar:

<div style="width: 230px;height: 230px;overflow: hidden;background-color: transparent"></div>

==> This div appears to have the right width and height, but some pixels at the bottom and right are not visible

– Div nested inside the above:

<div style="width: 205px;height: 205px;margin-top: -207px">

==> This div looks like it is causing the problem. Note that the height and width are smaller by 25 pixels.

– This is the last div child of the above div:

<div style="margin: 0px;height: 20px"><a href="#">Today</a><a href="#">Clear</a></div>

==> You can see the Today and Clear buttons are part of the HTML, they are just not shown.

– This does not seem to be an IE-only issue: I opened the same page in FF 20.0.1 and have the exact same problem.

I may be wrong, this is just what I saw so far. If you need any more information, please let me know.

EDIT: Sorry, a lot of the HTML I posted was eaten. I think there’s enough left, but let me know if you need more

[cpcodeMember]

Dimitar,

In the above post, the last div in the page code has id=”jqxgrid” – this was also removed by the editor before I figured out about the ‘code’ button. I can no longer edit that post…
Thank you.

[DimitarParticipant]

Hi cpcode,

The issue may be caused by a CSS conflict. Please check your styles for any changes made to table elements.

Best Regards,
Dimitar

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

[cpcodeMember]

Dimitar,

Good catch! that was the issue, I eliminated those styles and now see the Today and Clear buttons.
Thanks,

[Author]

Posts