[mr_putersmitParticipant]

Hi Stanislav

Thanks very much for link.

[mr_putersmitParticipant]

Can someone confirm please. Thanks

[mr_putersmitParticipant]

Hi Stanislav
I am at a loss as to how to target dynamic elements in the grid. I have no id for the calendar icon because I am using showfilterrow: true, selectionmode: ‘multiplecellsextended’, which creates a dynamic input as far as i can see. How do I target the calender icon? I have also tried the attached script, which I believe should work, but dosen’t. I have a feeling that I am trying to run the code before the grid has loaded. How can I troubleshoot to see if this is the case. Thanks

$(window).load(function() {
    $('.jqx-icon-calendar').each(function(index, item) {
        $(this).one("click", function() {
            notif({
              type: "info",
              msg: "Test Message",
              width: 650,
              height: 99,
              multiline: true,
              position: "center",
              fade: true,
              //timeout: 3000,
              autohide: false,
              clickable: true
            });
        });
    });
});

[mr_putersmitParticipant]

Hi Stanislav
I’m not sure if this is the correct way to do it, but it works. Would appreciate your comments. Thanks

<script type="text/javascript">
	
    window.onload = function(){
    var calendaricons = document.getElementsByClassName('jqx-icon-calendar');
    for (var i = 0; i < calendaricons.length; i++) {
        calendaricons[i].addEventListener('click', function(){
           alert('clicked');
        });
    }
};
	
</script>

[mr_putersmitParticipant]

Hi Stanislav
This raises 2 questions. Firstly, if I remove url, how do I get data in the grid? Secondly, when I take the url out, the alert says ‘undefined’. What other options are there to trigger the calendar icon? Thanks

[mr_putersmitParticipant]

If I put alert before loop then it works ok. The alert displays ‘[object HTMLCollection]’. I have included amended code. Can someone shed some light on this. Thanks

var calendaricons = document.getElementsByClassName("jqx-icon-calendar");
alert(calendaricons); <--- ADDED ALERT
var i;
for (i = 0; i < calendaricons.length; i++) {
	calendaricons[i].addEventListener('click', () => {
		alert('text');
	});
};

[mr_putersmitParticipant]

Hi Stanislav
Thanks for reply. However, not working for me. All that happens is that the calendar drops down but no alert. I have posted my code and would be grateful if you could point out my error. Many thanks

<script type="text/javascript">
  $(document).ready(function() {

    var url = 'boxoutshow.php';
    var theme = 'ui-redmond';

    // prepare the data
    var source = {
      datatype: "json",
      datafields: [{
          name: 'Id'
        }, {
          name: 'intake_date',
          type: 'date',
          format: 'd'
        }, {
          name: 'customer'
        }, {
          name: 'department'
        }, {
          name: 'size'
        }, {
          name: 'authorisation'
        }, {
          name: 'custref',
          type: 'string'
        },

      ],
      id: 'Id',
      url: url,
      data: {
        featureClass: "P",
        style: "full",
        maxRows: 20

      }
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
      formatData: function(data) {
        //data.size_startsWith = $("#searchField").val();
        data.item_startsWith = $("#searchField").val();
        return data;
      }
    });

    $("#jqxgrid").jqxGrid({
      width: '99%',
      height: '464',
      source: dataAdapter,
      theme: theme,
      altrows: true,
      autorowheight: false,
      pageable: true,
      sortable: true,
      //editable: false,
      enabletooltips: true,
      //editmode: 'click',
      filterable: true,
      showfilterrow: true,
      selectionmode: 'multiplecellsextended',
      //filtermode: 'excel',
      autoheight: false,
      //showemptyrow: false,
      pagesize: 10,
      pagesizeoptions: ['15', '30', '50', '70', '100'],
      //selectionmode: 'singlecell',
      columnsResize: true,
      showemptyrow: true,
      columns: [{
          text: 'Id',
          datafield: 'Id',
          hidden: true,
          width: 70
        }, {
          text: 'Customer',
          datafield: 'customer',
          width: 180
        }, {
          text: 'Department',
          datafield: 'department',
          width: 188
        }, {
          text: 'Authorisation',
          datafield: 'authorisation',
          width: 207
        }, {
          text: 'Item',
          datafield: 'custref',
          width: 239
        }, {
          text: 'Size',
          datafield: 'size',
          width: 215
        }, {
          text: 'Date',
          datafield: 'intake_date',
          cellsformat: 'dd/MM/yyyy',
          filtertype: 'range',
          width: 230
        }, {
          text: 'Status',
          datafield: 'Status',
          type: 'string',
          width: 77,
          cellsrenderer: function() {

            return '<div style="text-align: left; margin-left: 5px; margin-top: 5px; color: green; font-size: 12px;">' + "Out" + '</div>';
          },
        }

      ],
      showtoolbar: true,
      rendertoolbar: function(toolbar) {
        var me = this;
        var container = $("<div style='margin: 5px;'></div>");
        var span = $("<span style='float: left; margin-bottom: 15px; margin-top: 5px; margin-right: 4px;'>Search for box: </span>" + "<span style='float: right; margin-top: 5px; margin-bottom: 15px; margin-right: 27px; font-weight: bold;'>Boxes Out Report For: " + '<?php echo $_SESSION['
          kt_name_usr ']; ?>' + "</span>");
        var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
        toolbar.append(container);
        container.append(span);
        container.append(input);

        if (theme != "") {
          input.addClass('jqx-widget-content-' + theme);
          input.addClass('jqx-rc-all-' + theme);
        }
        var oldVal = "";
        input.on('keyup', function(event) {
          if (input.val().length >= 2) {
            if (me.timer) {
              clearTimeout(me.timer);
            }
            if (oldVal != input.val()) {
              me.timer = setTimeout(function() {
                $("#jqxgrid").jqxGrid('updatebounddata');
              }, 1000);
              oldVal = input.val();

            }
          } else {
            $("#jqxgrid").jqxGrid('updatebounddata');
          }
        });
      },
      showstatusbar: true,
      renderstatusbar: function(statusbar) {
        // appends button to the status bar.
        var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
        var excelButton = $("#excelExport").jqxButton({
          theme: theme
        });
        var pdfButton = $("#pdfExport").jqxButton({
          theme: theme
        });
        var printButton = $("#print").jqxButton({
          theme: theme
        });

        container.append(excelButton);
        container.append(pdfButton);
        container.append(printButton);
        statusbar.append(container);
        //excelButton.jqxButton({ width: 120, height: 20, theme: theme });
      },
    });

    var calendaricons = document.getElementsByClassName("jqx-icon-calendar");

    var i;
    for (i = 0; i < calendaricons.length; i++) {

      calendaricons[i].addEventListener('click', () => {
        alert('text')
      });

    };

    //$("#excelExport").jqxButton({ theme: theme });
    $("#excelExport").click(function() {
      $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
    });

    $("#pdfExport").click(function() {
      $("#jqxgrid").jqxGrid('exportdata', 'pdf', 'jqxGrid');
    });

    $("#print").click(function() {
      var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
      var newWindow = window.open('', '', 'width=800, height=500, scrollbars=yes'),
        document = newWindow.document.open(),
        pageContent =
        '<!DOCTYPE html>\n' +
        '<html>\n' +
        '<head>\n' +
        '<meta charset="utf-8" />\n' +
        '<title>Logistor Box Retrieval Report</title>\n' +
        '</head>\n' +
        '<body>\n' + gridContent + '\n</body>\n</html>';
      document.write(pageContent);
      document.close();
      newWindow.print();
    });
  });
</script>

[mr_putersmitParticipant]

Any help with this please? Thanks

[mr_putersmitParticipant]

Peter
Do you have example of how code to code your reply please. Not sure how to code this. Thanks

[mr_putersmitParticipant]

Hi Stanislav
Couldn’t figure the problem either, so decided to go along another route. Thanks for your help.

[mr_putersmitParticipant]

Hi Peter. Updated to latest version and all good. Thanks for support

[mr_putersmitParticipant]

Thank you for support Hristo

[mr_putersmitParticipant]

Thanks for reply peter. However, if I code the input outside the grid it works as expected. Would that be consistent with what you quoted about my version? Is there a way that I can use the new version of jqxdatetimeinput without updating the rest of the widgets? Thanks

[mr_putersmitParticipant]

Hi
Thanks for reply Peter. However, I am confused as excel does not experience this behavior. Can you do example as to how this pdf export should work as I am slightly confused by your answer. Many thanks

[mr_putersmitParticipant]

Thanks Peter. Will check it out. I did initialy check the css files and could find no ref to .jqx-grid-cell-left-align.

[Author]

Posts