Forum Replies Created

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts

  • ghenne
    Participant

    Thank you – much appreciated. Your controls work well with NSB/AppStudio!


    ghenne
    Participant

    We need jQuery for the rest of the project, so removing it isn’t an option for us.


    ghenne
    Participant

    I think I have isolated the problem. It works fine with jquery-1.12.4.min.js, but not with the current jQuery. Here’s a simplified standalone page which has the problem. Change the version back to the old jQuery and it will work.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Scheduler</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet">
    <link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.classic.css" rel="stylesheet">
    <script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxdate.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxscheduler.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxscheduler.api.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxdatetimeinput.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxcalendar.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxtooltip.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxwindow.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxcheckbox.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxdropdownlist.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxnumberinput.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxradiobutton.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxinput.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/globalization/globalize.js"></script>
    
    </head>
    <body>
    <div id='Scheduler1'></div>
    
    <script>
    
    appointments = [];
                var appointment1 = {
                    id: "id1",
                    description: "George brings projector for presentations.",
                    location: "",
                    subject: "Quarterly Project Review Meeting",
                    calendar: "Room 1",
                    start: new Date(2017, 10, 23, 9, 0, 0),
                    end: new Date(2017, 10, 23, 16, 0, 0)
                }
    
                var appointment2 = {
                    id: "id2",
                    description: "",
                    location: "",
                    subject: "IT Group Mtg.",
                    calendar: "Room 2",
                    start: new Date(2017, 10, 24, 10, 0, 0),
                    end: new Date(2017, 10, 24, 15, 0, 0)
                }
    
                var appointment3 = {
                    id: "id3",
                    description: "",
                    location: "",
                    subject: "Course Social Media",
                    calendar: "Room 3",
                    start: new Date(2017, 10, 27, 11, 0, 0),
                    end: new Date(2017, 10, 27, 13, 0, 0)
                }
    
    appointments = [appointment1, appointment2, appointment3];
    
    source = {
      dataType: "array" ,  
      dataFields: [ 
        { name: "id" , type: "string" }, 
        { name: "description" , type: "string" }, 
        { name: "location" , type: "string" }, 
        { name: "subject" , type: "string" }, 
        { name: "calender" , type: "string" }, 
        { name: "Start" , type: "date" }, 
        { name: "End" , type: "date" }  
      ], 
      id: "id" ,
      localData: appointments
    };
    
    adapter = new $.jqx.dataAdapter(source);
    
    window.addEventListener('load', function() {
      $('#Scheduler1').jqxScheduler({
        date: new $.jqx.date(2017, 11, 23),
        width:600, 
        height:600,
        view: 'weekView', 
        views: ["dayView","weekView","monthView"], 
        showLegend:true,
        appointmentDataFields:
          {
            from: "Start",
            to: "End",
            id: "id",
            description: "description",
            location: "place",
            subject: "subject",
            resourceId: "calender",
          },
        source: adapter,
      });
      $("#Scheduler1").jqxScheduler("ensureAppointmentVisible" , "id3");
    }, false);
    </script>
    </body>
    </html>

    ghenne
    Participant

    I tried using percentages – but it did not make a difference. I simplified the code: here is the complete page.

    <!DOCTYPE HTML>
    <html manifest="OfflineApp.appcache">
    <head>
    <meta charset="utf-8">
    <title>Scheduler</title>
    <script src="nsb/library/jquery3.js"></script>
    <link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet">
    <link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.classic.css" rel="stylesheet">
    <script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxdate.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxscheduler.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxscheduler.api.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxdatetimeinput.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxcalendar.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxtooltip.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxwindow.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxcheckbox.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxdropdownlist.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxnumberinput.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxradiobutton.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxinput.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/globalization/globalize.js"></script>
    
    </head>
    <body>
    <div id="Form1" style="position:absolute; height: 100vh; top:0px; left:0px; width:100%; ">
      <div id='Scheduler1'></div>
    </div>
    
    <script>
    window.addEventListener('load', function() {
      $('#Scheduler1').jqxScheduler({theme:'classic', width:'80%', height:'90%',view:'monthView', views: ["dayView","weekView","monthView","agendaView"], showLegend:true,legendPosition:'bottom',legendHeight:34,showToolbar:true,dayNameFormat:'shortest',editDialogDateTimeFormatString:'dd.MM.yyyy hh:mm'});
      StartScheduler();
    }, false);
    function StartScheduler() {
    $("#Scheduler1").jqxScheduler({
    
      editDialogCreate: function (dialog, fields, editAppointment) {
                        fields.repeatContainer.hide();
                        fields.statusContainer.hide();
                        fields.timeZoneContainer.hide();
                        fields.colorContainer.hide();
                        fields.subjectLabel.html("Title");
                        fields.locationLabel.hide();
                        fields.location.hide();
                        fields.fromLabel.html("Von");
                        fields.toLabel.html("Bis");
                        fields.resourceLabel.html("calender");
                    },
    
      appointmentDataFields:
      {
          from: "Start",
          to: "End",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calender"
      },
      views:
        [
            'dayView',
            'weekView',
            'monthView',
            'agendaView'
        ]
    });
    appointments = [];
    appointments[0] = {id: "id1" , description: "Desc: ID 1a" , place: "ID 1" , subject: "Meet ID 1i" , calender: "Room 1" , Start: new Date("02/24/2016 09:00:00"), End: new Date("02/24/2016 09:00:00") };
    appointments[1] = {id: "id2" , description: "Desc: ID 2" , place: "ID 2" , subject: "Meet ID 2" , calender: "Room 2" , Start: new Date("02/23/2016 09:00:00"), End: new Date("02/23/2016 09:00:00") };
    appointments[2] = {id: "id3" , description: "Desc: ID 3" , place: "ID 3" , subject: "Meet ID 3" , calender: "Room 3" , Start: new Date("02/22/2016 09:00:00"), End: new Date("02/23/2016 17:00:00")};
    
    source = {dataType: "array" ,  dataFields: [ { name: "id" , type: "string" }, { name: "description" , type: "string" }, { name: "location" , type: "string" }, { name: "subject" , type: "string" }, { name: "calender" , type: "string" }, { name: "Start" , type: "date" }, { name: "End" , type: "date" }  ], id: "id" ,localData: appointments};
    
    adapter = new $.jqx.dataAdapter(source);
    $("#Scheduler1").jqxScheduler({source: adapter});
    
    datum1 = new $.jqx.date(2016,2,25,9,0,0);
    $("#Scheduler1").jqxScheduler({Date: datum1});
    
    $("#Scheduler1").jqxScheduler("ensureAppointmentVisible" , "id3");
    }
    </script>
    </body>
    </html>

    ghenne
    Participant

    What is the proper way to update the data on a jqxScheduler after it has been displayed already?

    Edit: I believe I have found the answer:

    adapter = new $.jqx.dataAdapter(source);
     $("#scheduler").jqxScheduler('source', adapter);
    • This reply was modified 1 year, 3 months ago by  ghenne.

    ghenne
    Participant

    The project is developed using NSB/AppStudio. Most of the other controls are Bootstrap 4.

    I’ll fix the date.

    Yes, it’s possible that the widget is being initialized more than once. I’ll fix that too, and report back if that does not fix the issue.

    in reply to: Refresh after rotate Refresh after rotate #101571

    ghenne
    Participant

    That worked nicely – thank you!

    in reply to: addWindow and columns addWindow and columns #67355

    ghenne
    Participant

    Got it – so the panel number is the column number.

    in reply to: addWindow and columns addWindow and columns #67349

    ghenne
    Participant

    I saw those parameters. How would I specify that I want a window added to the second column?


    ghenne
    Participant

    Ah! I was trying to drag. Yes, click does work.

    in reply to: ColorPicker, FastClick and iOS7 ColorPicker, FastClick and iOS7 #29861

    ghenne
    Participant

    Have you tried your jqxColorPicker sample on iOS 7?

    It does not work on the iPhone and iPad device I tested: it does not respond to clicks and drags.

    in reply to: Grid with Buttons on iOS Grid with Buttons on iOS #29146

    ghenne
    Participant

    That was it!

    Here’s the line of code to create a button in a column:

      Grid1_settings.columns = [
        { text: "Name", dataField: "Name", width: "auto" }, 
        { text: "", dataField: "B1", width: 45, columntype: "button", 
          cellsrenderer: function () {return "Stop"}, 
          buttonclick: function (row) {gridButton("Stop", row)}
        }
      ]
    
    Thanks also to RH for the tip!
    in reply to: Grid with Buttons on iOS Grid with Buttons on iOS #29131

    ghenne
    Participant

    Hi Peter,

    I’m not sure that’s it. I added some tracing to the code: jqxGrid() is definitely being called after jQuery’s document.ready. I’ve improved the sample at

    http://www.nsbasic.com/i/GridWithButtons

    If you run it with the Chrome Debugger window open, you can see the sequence of events:

    $(document).ready called 
    document.onready called
    Set up and call jqxGrid

    The buttons work fine on the desktop, but not on iOS.

    George

    • This reply was modified 6 years, 5 months ago by  ghenne.

    ghenne
    Participant

    Thank you!

Viewing 14 posts - 1 through 14 (of 14 total)