jQuery UI Widgets Forums Scheduler Draging event from jqxListbox doesnt work in angular

This topic contains 9 replies, has 2 voices, and was last updated by  Todor 3 years, 1 month ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author

  • Lucky_1110
    Participant

    Hii… I have used these codes to Drag event from outside and create appoinment, This logic works fine in Jquery but in Typescript.
    targetDateString is null as shown in debugger.
    no Date value in target property.

    app.component.html

    <jqxListBox #myListBox

    [allowDrag]=”true”
    [source]=”Lsource”
    [width]=”270″
    [height]=”‘105%'”
    [theme]=”energyblue”
    [dragEnd]=”dragEnd”
    (onDragEnd)=”DragEnd($event)”
    >
    </jqxListBox>

    <jqxScheduler #myScheduler
    [date]=”date”
    [width]=”1150″
    [height]=”600″
    [source]=”dataAdapter”
    [showLegend]=”true”
    [view]=”‘monthView'”
    [appointmentDataFields]=”appointmentDataFields”
    [editDialogCreate]=”editDialogCreate”
    [resources]=”resources”
    [views]=”views”

    >
    </jqxScheduler>

    app.component.ts
    DragEnd(event:any):void
    {

    let args = event.args;
    let label = args.label;
    let value = args.value;
    let originalEvent = args.originalEvent;
    let target = originalEvent.target;
    let targetDateString = target.getAttribute(“data-date”);
    let targetDate = new Date(targetDateString);
    let targetDateEnd = new Date(targetDateString);
    targetDateEnd.setMinutes(targetDate.getMinutes() + 30);

    var newAppointment = {
    description: “”,
    location: “”,
    subject: label,
    calendar: “Engineer 1”,
    start: targetDate,
    end: targetDateEnd
    };

    this.myScheduler.addAppointment(newAppointment);
    let Lvalue = this.myListBox.getSelectedItem();
    this.myListBox.disableItem(Lvalue);
    debugger;
    }

    Thanks in Advance..

    • This topic was modified 3 years, 1 month ago by  Lucky_1110.

    Lucky_1110
    Participant

    Its..reallly urgent..any comments


    Todor
    Participant

    Hello Priya_bhushansingh,

    Please, share a stackblitz/codesandbox example with your code which demonstrates the issue then we would be able to properly investigate it.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com


    Lucky_1110
    Participant

    app.component.html
    <app-header></app-header>
    <div class=”row”>
    <div class=”col-xs-4″ style=”display: flex;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);font-weight: 800;margin-right:80px;border:1px outset #e6e8e99a;font-family: Arial, Helvetica, sans-serif;
    “>
    <jqxListBox #myListBox

    [allowDrag]=”true”
    [source]=”Lsource”
    [width]=”270″
    [height]=”‘105%'”
    [theme]=”energyblue”
    [dragEnd]=”dragEnd”
    (onDragEnd)=”DragEnd($event)”
    >
    </jqxListBox>
    </div>
    <div class=”col-xs-8″>
    <jqxScheduler #myScheduler style=” margin-top: 20px;
    /* border:1px outset #647279; */
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(89, 93, 94, 0.2), 0 6px 20px 0 rgba(61, 80, 99, 0.19);

    [date]=”date”
    [width]=”1150″
    [height]=”600″
    [source]=”dataAdapter”
    [showLegend]=”true”
    [view]=”‘monthView'”
    [appointmentDataFields]=”appointmentDataFields”
    [editDialogCreate]=”editDialogCreate”
    [resources]=”resources”
    [views]=”views”
    (onCellClick)=”CellClick($event)”

    >
    </jqxScheduler>
    </div>

    </div>

    app.component.ts

    import { Component, ViewChild, AfterViewInit } from ‘@angular/core’;
    import { jqxListBoxComponent } from “jqwidgets-scripts/jqwidgets-ts/angular_jqxlistbox”;
    import { DirectiveRegistryValuesIndex } from ‘@angular/core/src/render3/interfaces/styling’;
    import { jqxSchedulerComponent } from ‘jqwidgets-scripts/jqwidgets-ts/angular_jqxscheduler’;

    @Component({
    selector: ‘app-root’,
    templateUrl: ‘./app.component.html’,
    styleUrls: [‘./app.component.css’]
    })
    export class AppComponent implements AfterViewInit{

    @ViewChild(‘myScheduler’) myScheduler: jqxSchedulerComponent;
    @ViewChild(‘myListBox’) myListBox: jqxListBoxComponent;

    ngAfterViewInit(): void
    {

    }
    generateAppointments(): any
    {
    let appointments = new Array();

    let appointment1 = {
    id: “id1”,
    description: “Interviews for IT/DT”,
    location: “”,
    subject: “Interview with James”,
    calendar: “Engineer 1”,
    start: new Date(2019, 4, 23, 9, 0, 0),
    end: new Date(2019, 4, 23, 12, 0, 0)
    };
    let appointment2 = {
    id: “id2”, description: “”,
    location: “”, subject: “IT Group Mtg.”, calendar: “Engineer 2”,
    start: new Date(2019, 4, 24, 8, 0, 0),
    end: new Date(2019, 4, 24, 10, 0, 0)
    };
    let appointment3 = {
    id: “id3”, description: “”,
    location: “”, subject: “Team Meet”, calendar: “Engineer 3”,
    start: new Date(2019, 4, 23, 10, 0, 0),
    end: new Date(2019, 4, 23, 15, 0, 0)
    };
    let appointment4 = {
    id: “id4”, description: “”,
    location: “”, subject: “COC Meet”, calendar: “Engineer 3”,
    start: new Date(2019, 4, 15, 10, 0, 0),
    end: new Date(2019, 4, 15, 15, 0, 0)
    };
    let appointment5 = {
    id: “id5”, description: “”,
    location: “”, subject: “All Hands Meet”, calendar: “Engineer 2”,
    start: new Date(2019, 4, 2, 10, 0, 0),
    end: new Date(2019, 4, 2, 12, 0, 0)
    };

    let appointment6 = {
    id: “id6”, description: “”,
    location: “”, subject: “Certification”,
    calendar: “Certification”,
    start: new Date(2019, 4, 7, 10, 0, 0),
    end: new Date(2019, 4, 7, 12, 0, 0),
    background: “red”,
    allDay:”true”
    };

    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    appointments.push(appointment4);
    appointments.push(appointment5);
    appointments.push(appointment6);

    return appointments;
    }

    source: any =
    {
    dataType: “array”,
    dataFields: [
    { name: ‘id’, type: ‘string’ },
    { name: ‘description’, type: ‘string’ },
    { name: ‘location’, type: ‘string’ },
    { name: ‘subject’, type: ‘string’ },
    { name: ‘calendar’, type: ‘string’ },
    { name: ‘start’, type: ‘date’ },
    { name: ‘end’, type: ‘date’ },
    { name: ‘style’, type: ‘string’ },
    { name: ‘color’, type: ‘string’ },
    {name: ‘Certification’, type:’Boolean’}

    ],
    id: ‘id’,
    localData: this.generateAppointments()
    }

    dataAdapter: any = new jqx.dataAdapter(this.source);
    // date:any=new Date(2019, 4, 7, 12, 0, 0);

    printButton: any = null;

    appointmentDataFields: any =
    {
    from: “start”,
    to: “end”,
    id: “id”,
    description: “description”,
    location: “location”,
    subject: “subject”,
    resourceId: “calendar”
    };

    resources: any =
    {
    colorScheme: “scheme012”,
    dataField: “calendar”,
    source: new jqx.dataAdapter(this.source),
    // renderAppointment: function(data)
    // {
    // // data Object properties
    // // appointment – Object with the properties from the Scheduler.s source object.
    // // width – int
    // // height- int
    // // textColor – hex
    // // background – hex
    // // borderColor – hex
    // // style – string
    // // cssClass – string
    // // html – html string
    // // view – string
    // var img = ““;
    // if (data.appointment.subject == “Nancy”) {
    // var img = ““;
    // }
    // else if (data.appointment.subject == “Peter”) {
    // var img = ““;
    // }
    // else if (data.appointment.subject == “Antony”) {
    // var img = ““;
    // }
    // else if (data.appointment.subject == “John”) {
    // var img = ““;
    // }

    // if (data.view == “weekView” || data.view == “dayView” || data.view == “monthView”) {
    // data.html = img + “<i>” + data.appointment.subject + “</i>”;
    // if (data.appointment.id == “id1”) {
    // data.style = “#AA4643”;
    // }
    // else if (data.appointment.id == “id2” || data.appointment.id == “id6”) {
    // data.style = “#309B46”;
    // }
    // else if (data.appointment.id == “id3”) {
    // data.style = “#447F6E”;
    // }
    // }

    // return data;
    // }

    };

    views: any[] =
    [
    {
    type:’dayView’,
    showWeekends: false
    },
    {
    type: “weekView”,
    showWeekends: false,
    timeRuler: {
    scaleStartHour:8,
    scaleEndHour:22,
    hidden: false },
    workTime:
    {
    fromDayOfWeek: 1,
    toDayOfWeek: 5,
    fromHour: 7,
    toHour: 18
    }
    },
    {
    type: ‘monthView’,
    monthRowAutoHeight: true,
    workTime:
    {
    fromDayofWeek:1,
    toDayOfWeek: 5,
    hidden:true

    }
    },
    ‘agendaView’
    ];

    isFirstLoad: boolean = true;

    editDialogCreate = (dialog, fields, editAppointment) => {
    if (this.isFirstLoad) {
    this.isFirstLoad = false;
    this.myScheduler.closeDialog();
    dialog.jqxWindow({ isModal: true });
    setTimeout(_ => {
    dialog.jqxWindow({ height: 400 });
    this.myScheduler.openDialog(480,200);
    }, 100);
    }

    // fields.repeatContainer.hide();

    fields.statusContainer.hide();
    fields.timeZoneContainer.hide();
    fields.colorContainer.hide();
    fields.allDayLabel.html(“Certification”);

    fields.subjectLabel.html(“Title”);
    fields.locationLabel.html(“Where”);
    // fields.allDay.html(“Certification”);
    fields.fromLabel.html(“Start”);
    fields.toLabel.html(“End”);
    fields.resourceLabel.html(“Engineer/Certificate”);

    // fields.subjectLabel.jqxValidator({
    // rules: [{ input: fields.subject, message: ‘Title is required!’, action: ‘keyup, blur’, rule: ‘required’ }]
    // });

    let buttonElement = document.createElement(“BUTTON”);
    buttonElement.innerText = ‘Print’;
    buttonElement.style.cssFloat = ‘right’;
    buttonElement.style.marginLeft = ’10px’;
    buttonElement.style.padding=’6px 53px 21px 17px’;
    buttonElement.id = ‘PrintButton’;

    fields.buttons[0].appendChild(buttonElement);

    let printButton: jqwidgets.jqxButton = jqwidgets.createInstance(‘#PrintButton’, ‘jqxButton’, {
    theme: ‘material’,
    width: 50,
    height: 25
    });

    this.printButton = printButton;

    printButton.addEventHandler(‘click’, function () {
    let appointment = editAppointment;
    if (!appointment && printButton.disabled) {
    return;
    }

    let appointmentContent =
    “<table class=’printTable’>” +
    “<tr>” +
    “<td class=’label’>Title</td>” +
    “<td>” + fields.subject.val() + “</td>” +
    “</tr>” +
    “<tr>” +
    “<td class=’label’>Start</td>” +
    “<td>” + fields.from.val() + “</td>” +
    “</tr>” +
    “<tr>” +
    “<td class=’label’>End</td>” +
    “<td>” + fields.to.val() + “</td>” +
    “</tr>” +
    “<tr>” +
    “<td class=’label’>Where</td>” +
    “<td>” + fields.location.val() + “</td>” +
    “</tr>” +
    “<tr>” +
    “<td class=’label’>Engineer</td>” +
    “<td>” + fields.resource.val() + “</td>” +
    “</tr>”
    + “</table>”;
    let newWindow = window.open(”, ”, ‘width=800, height=500’),
    document = newWindow.document.open(),
    pageContent =
    ‘<!DOCTYPE html>\n’ +
    ‘<html>\n’ +
    ‘<head>\n’ +
    ‘<meta charset=”utf-8″ />\n’ +
    ‘<title>jQWidgets Scheduler</title>\n’ +
    ‘<style>\n’ +
    ‘.printTable {\n’ +
    ‘border-color: #aaa;\n’ +
    ‘}\n’ +
    ‘.printTable .label {\n’ +
    ‘font-weight: bold;\n’ +
    ‘}\n’ +
    ‘.printTable td{\n’ +
    ‘padding: 4px 3px;\n’ +
    ‘border: 1px solid #DDD;\n’ +
    ‘vertical-align: top;\n’ +
    ‘}\n’ +
    ‘</style>’ +
    ‘</head>\n’ +
    ‘<body>\n’ + appointmentContent + ‘\n</body>\n</html>’;
    try {
    document.write(pageContent);
    document.close();
    }
    catch (error) {
    }
    newWindow.print();
    });

    //——–data Button——
    let buttonElement1 = document.createElement(“BUTTON”);
    buttonElement1.innerText = ‘Data’;
    buttonElement1.style.cssFloat = ‘right’;
    buttonElement1.style.marginLeft = ’10px’;
    buttonElement1.style.padding=’6px 53px 21px 17px’;
    buttonElement1.id = ‘DataButton’;

    fields.buttons[0].appendChild(buttonElement1);

    let dataButton: jqwidgets.jqxButton = jqwidgets.createInstance(‘#DataButton’, ‘jqxButton’, {
    theme: ‘material’,
    width: 50,
    height: 25
    });

    // this.dataButton = dataButton;

    dataButton.addEventHandler(‘click’, function () {
    let appointment = editAppointment;
    if (!appointment && dataButton.disabled) {
    return;
    }

    let my_window = window.open(“”,”Test Data”,”status=0,width=1100,height=800″);
    my_window.document.write(‘‘);

    });

    };

    // Creating List
    Lsource:String[] = [
    ‘Frontal-impact Test’,
    ‘Moderate Overlap tests’,
    ‘Side-impact tests’,
    ‘Roll-over tests’,
    ‘Small Overlap tests’,
    ‘Frontal Crash Test’,
    ‘Test on Hybrid’,
    ‘Preliminary Test’,
    ‘Stability Test’

    ];

    DragEnd($event:any):void
    {

    let args = $event.args;
    let label = args.label;
    let value = args.value;
    let originalEvent = args.originalEvent;
    let target = originalEvent.target;
    // let targetDateString = target.getAttribute(“data-date”);
    let targetDate = new Date(args.originalEvent.timeStamp);
    // let targetDateEnd = new Date(targetDateString);
    // targetDateEnd.setMinutes(targetDate.getMinutes() + 30);

    debugger;

    var newAppointment = {
    id:”id”,
    description: “”,
    location: “”,
    subject: label,
    calendar: “Engineer 1”,
    start: targetDate ,
    end: targetDate
    };
    debugger;

    this.myScheduler.addAppointment(newAppointment);
    let Lvalue = this.myListBox.getSelectedItem();
    this.myListBox.disableItem(Lvalue);
    debugger;
    }

    }


    Lucky_1110
    Participant

    Here
    here you can get the link, but because of dependency it is not working.

    no error is coming,

    I feel the two different component, data is not rendering at drag end for jqxscheduler data.


    Lucky_1110
    Participant

    Hi.. Sorry for the mess..
    Basic issue is in DragEnd event, Originalevent.targer does not contain data-date..
    because source and target of drag event ids different component. ie. jqxListbox and jqxScheduler.
    but this thing is working in jquery, since it can render boththe component.

    Please provide any solution for this.


    Todor
    Participant

    Hello Lucky_1110,

    Please review the following example whether it fits your needs.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com


    Lucky_1110
    Participant

    Yes it definitely does Todor..
    Thank you..


    Lucky_1110
    Participant

    Hii Todor,
    Can’t I remove the dragged item from ListBox,

    Or Perform any of the jqxListbox method or events or use its properties.


    Todor
    Participant

    Hello Lucky_1110,

    Please find the updated example. The ListBox item is deleted when it is dropped in the scheduler.

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

    • This reply was modified 3 years, 1 month ago by  Todor.
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.