[cpcodeMember]

Dimitar,

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

[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.

[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]

To onefortypoint6 or to the jqWidgets team:

is there a way to intercept the queryString that is being passed to the server when I call updatebounddata – or better yet, whenever a data request is sent to the server? I would like to use onefortypoint6’s solution for this problem, so I need a way to remember the queryString for the last request sent. I only need filter and sort info, but the whole Request.queryString is fine as well. This would be a big help, as it would be in the same format as the string that my server code (.Net) already receives and knows how to parse.

Is this possible?
Thank you

[Author]

Posts