Drop a table row in Planning calendar

[akki_gt]

Hello Experts,

I am trying to drag and drop a ui.table.TreeTable row into the planning calendar, using the dragDropConfig aggregation. But unable to achieve the desired outcome...

I added dragDropConfig to table with targetElement as "employeeCalendar" id of planning calendar. Following is the tightly coupled and loosely coupled configs. Kindly assist.

EDITED: I've added the view and controller. I've also replaced planning calendar with a table and the drag drop just works fine. So thought it must something with calendar metadata. Hence, I tried changing the metadata by getMetadata() and set property dnd.droppable = true, which triggers dragEnter event but drop event is never called.

Thanks & Regards,

Akshay

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
	controllerName="com.crave.graphicaldashboard.controller.GraphicalDashboard" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:f="sap.f"
	xmlns:l="sap.ui.layout" xmlns:t="sap.ui.table" xmlns:unified="sap.ui.unified" xmlns:dnd="sap.ui.core.dnd">
<l:Splitter orientation="Vertical">
    <PlanningCalendar appointmentsVisualization="Filled" class="sapMPlanCalSuppressAlternatingRowColors" rows="{appointments>/}"
			id="employeeCalendar">
    <rows>
	<PlanningCalendarRow key="Hour" icon="img/employees/1.png" title="{appointments>name}" enableAppointmentsCreate="false" appointments="{path:'appointments>appointments',templateShareable:true}" enableAppointmentsDragAndDrop="false" appointmentDrop="handleAppDrop" appointmentCreate="onAppCreate">
	<appointments>
	   <unified:CalendarAppointment startDate="{appointments>start}" endDate="{appointments>end}" type="Type03"></unified:CalendarAppointment>
	</appointments>
	</PlanningCalendarRow>
	    </rows>
	    <!--<dragDropConfig>
		<dnd:DropInfo groupName="toAppointment" drop="onDrop" dragOver="onDragOver" dragEnter="onDragEnter" dropPosition="OnOrBetween"/>
	    </dragDropConfig>-->
	<layoutData>
	    <l:SplitterLayoutData size="100%"></l:SplitterLayoutData>
	</layoutData>
</PlanningCalendar>
<IconTabBar>
	<items>
	<IconTabFilter text="Orders">
		<t:TreeTable id="orderTreeTable" rows="{ path:'treeListModel>/results',parameters: {arrayNames:['results']} }" rowSelectionChange="onTreeTableSelection" selectionMode="None">
	<t:columns>
		<t:Column width="9rem" filterProperty="OrderNumber">
			<Label text="Order Number" design="Bold"/>
			<t:template>
			<Link text="{parts:[{path:'treeListModel>OrderId'},{path:'treeListModel>OperationNo'}], formatter:'.setOrdOpNo'}" press="onOrderLinkPress"/>
			</t:template>
			</t:Column>
			<t:Column width="25rem">
			<Label text="Description" design="Bold"/>
			<t:template>
			<Text text="{parts:[{path:'treeListModel>OrderDescription'},{path:'treeListModel>OperationShortText'}],formatter:'.setDesc'}"/>
			</t:template>
			</t:Column>
			<t:Column width="10rem">
			<Label text="Order Type" design="Bold"/>
			<t:template>
			<Text text="{treeListModel>OrderType}"/>
			</t:template>
			</t:Column>
			<t:Column width="10rem">
			<Label text="Priority" design="Bold"/>
			<t:template>
			<Text text="{treeListModel>Priority}"/>
			</t:template>
			</t:Column>
		        <t:Column width="10rem">
			<Label text="Work Center" design="Bold"/>
			<t:template>
			<Text text="{parts:[{path:'treeListModel>MainWorkCenter'},{path:'treeListModel>Workcentre'}],formatter:'.setWorkCenter'}"/>
			</t:template>
			</t:Column>
			<t:Column width="10rem">
			<Label text="Assigned To" design="Bold"/>
			<t:template>
			<Text text="{treeListModel>PersonNum}"/>
		        </t:template>
			</t:Column>
		        <t:Column width="10rem">
		        <Label text="Status" design="Bold"/>
		        <t:template>
			<Text text="{path:'treeListModel>OrderStatusSystem',formatter:'.checkStatus'}"/>
			</t:template>
			</t:Column>
			<t:Column width="10rem">
			<Label text="Equipment" design="Bold"/>
			<t:template>
		        <Text text="{treeListModel>HeaderEquipment}"/>
			</t:template>
			</t:Column>
			</t:columns>
			<t:dragDropConfig>
			<!--<dnd:DragDropInfo sourceAggregation="rows" dropEffect="Move" dragOver="onDragOver" targetElement="employeeCalendar" dropPosition="OnOrBetween" drop="onDrop" dragEnter="onDragEnter"/>-->
			<dnd:DragInfo groupName="toAppointment" sourceAggregation="rows"/>
		     </t:dragDropConfig>
		</t:TreeTable>
		</IconTabFilter>
			<IconTabFilter text="Logs"></IconTabFilter>
		</items>
		</IconTabBar>
	</l:Splitter>
</mvc:View>

//controller

getAppointments: function () {
   var obj = [{
	"appointments": [{
	    "start": new Date(),
	    "end": new Date(new Date().setMinutes(new Date().getMinutes() + 30))
	}],
	"name": "Employee 1"
   }, {
	"appointments": [{
	    "start": new Date(),
	    "end": new Date(new Date().setMinutes(new Date().getMinutes() + 30))
	}],
        "name": "Employee 2"
   }, {
	"appointments": [{
	    "start": new Date(),
	    "end": new Date(new Date().setMinutes(new Date().getMinutes() + 30))
        }],
	"name": "Employee 3"
   }];
   var model = new sap.ui.model.json.JSONModel(obj);
   this.getView().setModel(model, "appointments");
}

[catano]

Hi akki_gt! Can you please describe in more details what's happening when you drag&drop items, also can you please show your model structure and the rows and appointment binding paths of your table and calendar? BR, Peter

[akki_gt]

pter.catano I've added the asked details.

Regards,

Akshay

[catano]

Hi akki_gt, thanks for the details. I started to play around a bit with PlanningCalendar and SinglePlanningCalendar and other Drag sources like GridList to test the standard way how can they interact with each other. The strange thing that even PlanningCalendar has dragDropConfig aggregation - inherited from DragDropBase - it has no effect to it at all, not just to PlanningCalendar but to PlanningCalendarRow neither. BTW two calendars can interact with each other and you can drop items from one into the other: Is this an option for you? Maybe customize the other calendar to look more like a table 🙂 Anyways, the issue can be investigated further by digging more into the source code. Regards, Peter

[akki_gt]

Hi pter.catano,

I created a custom calendar by extending Planning Calendar by only altering it's draggable and droppable property. No luck with that also. You mentioned you were able to move items between two calendars. I was not able to move items between to separate calendars. Can you share the code snippet to achieve it? Also, table to calendar would be a cleaner approach is what i feel.

Regards,

Akshay

[catano]

akki_gt, here is my Page.view.xml and its Page.controller.js. It is based on Planning Calendar - Drag and Drop Sample from SAPUI5.

[FiratAsan]

Hello akki_gt ,

I had a same problem. Taget element should be table name. In your example :

your Planning Calendar id is < id="employeeCalendar" >.

Change your target element to employeeCalendar-Table.

 targetElement="employeeCalendar-Table"