Draging event from jqxListbox doesnt work in angular

[Lucky_1110Participant]

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

[Lucky_1110Participant]

Its..reallly urgent..any comments

[TodorParticipant]

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

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

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

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.

[TodorParticipant]

Hello Lucky_1110,

Please review the following example whether it fits your needs.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Lucky_1110Participant]

Yes it definitely does Todor..
Thank you..

[Lucky_1110Participant]

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

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

[TodorParticipant]

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

[Author]

Posts