Trigger alert when calendar icon clicked

[mr_putersmitParticipant]

Hellp
Is there a way to to trigger and alert when the calendar icon is clicked? I have looked at the css and have tried various class names but nothing works. What I am trying to do is to trigger an alert to a user when they click the calendar icon becuase I am using the date range mode and it is not very clear what they need to do. Many thanks

jqwidgets 4.5.2

[mr_putersmitParticipant]

Any help with this please? Thanks

[StanislavParticipant]

Hello putersmit,

Here is a fiddle of a working example.

Best Regards,
Stanislav

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

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

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');
	});
};

[StanislavParticipant]

Hello mr_putersmit,

The last code you posted will work only the first time the grid is loaded, so it’s not a valid option(in my opinion). I found that the syntax I provided you with, works but only if you use real data. Remove the url: url, and it will work.

Best Regards,
Stanislav

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

[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

[StanislavParticipant]

Hi Putersmit,

1: There are a couple of ways to get data. In out documentation we have listed and explained that for jqxGrid.

2: I couldn’t find any other way to get an alert. I see that the code is the same as the one I provided, for me it works as intended.

2.5: If you have an ID for the calendar icon, you could use the DateTimeInput widget that we have which has an inbuilt event for your case. But without the items ID, it cannot be used.

Best Regards,
Stanislav

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

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

Can someone confirm please. Thanks

[StanislavParticipant]

Hello mr_putersmit,

It is true that the Dynamic Elements do not have an ID. Using the document.getElementsByClassName works fine for us. You could try to set a timeout on the whole block to be sure that the grid and all its elements are fully initialized, before doing anything with them.

We also had an update, consider updating your project, that might help.(I saw that you mentioned that you use version:4.5.2, the new one is version:4.5.3)

Best Regards,
Stanislav

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

[Author]

Posts