Hierarchical layout for resources without grouping
3 Replies
Hi Jason,
Greetings from Syncfusion Support.
We have validated your reported query “Is it possible to achieve hierarchical layout for resources in e.g. Timeline week view without grouping?” at our end and we have achieved your shared layout with the help of resourceHeaderTemplate property of our scheduler with below CSS for the same we have prepared below sample for your reference.
<template>
<div>
<div class="col-md-12 control-section">
<div class="content-wrapper">
<ejs-schedule
id="Schedule"
height="700px"
:selectedDate="selectedDate"
:readonly="readonly"
:currentView="currentView"
:eventSettings="eventSettings"
:group="group"
:resourceHeaderTemplate="resourceTemplate"
>
<e-views>
<e-view option="TimelineWeek"></e-view>
</e-views>
<e-resources>
<e-resource
field="ProjectId"
title="Choose Project"
name="Projects"
:dataSource="projectResourceDataSource"
textField="text"
idField="id"
colorField="color"
>
</e-resource>
</e-resources>
</ejs-schedule>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import {
SchedulePlugin,
Agenda,
TimelineViews,
TimelineMonth,
Resize,
DragAndDrop,
} from "@syncfusion/ej2-vue-schedule";
import "@syncfusion/ej2-base/styles/material.css";
import "@syncfusion/ej2-buttons/styles/material.css";
import "@syncfusion/ej2-calendars/styles/material.css";
import "@syncfusion/ej2-dropdowns/styles/material.css";
import "@syncfusion/ej2-inputs/styles/material.css";
import "@syncfusion/ej2-navigations/styles/material.css";
import "@syncfusion/ej2-popups/styles/material.css";
import "@syncfusion/ej2-vue-schedule/styles/material.css";
Vue.use(SchedulePlugin);
var resourceTemplateVue = Vue.component("resource-template", {
template:
'<div class="template-wrap">' +
'<div class="Resource-details"><div :class="getClass" >{{getAirlineName(data)}}</div>' +
"</div></div>",
data() {
return {
data: {},
};
},
computed: {
getClass: function () {
return this.getClassNameByLevel(this.data);
},
},
methods: {
getAirlineName: function (data) {
let value = JSON.parse(JSON.stringify(data));
return value.resourceData
? value.resourceData[value.resource.textField]
: value.resourceName;
},
getClassNameByLevel: function (data) {
let value = JSON.parse(JSON.stringify(data));
let className = value.resourceData.level;
return className === "one"
? "levelOne"
: className === "two"
? "levelTwo"
: className === "three"
? "levelThree"
: "levelFour";
},
},
});
export default Vue.extend({
data: function () {
return {
eventSettings: {
dataSource: [],
fields: {
subject: {
default: "Add Summary", // Set default value to subject
},
},
},
readonly: false,
projectResourceDataSource: [
{ text: "Organization A", id: 1, color: "#cb6bb2", level: "one" },
{ text: "Clinic A", id: 2, color: "#cb6bb2", level: "two" },
{ text: "Department A", id: 3, color: "#cb6bb2", level: "three" },
{ text: "Room A", id: 4, color: "#56ca85", level: "four" },
{ text: "Clinic B", id: 5, color: "#df5286", level: "one" },
{ text: "Room B", id: 6, color: "#df5286", level: "two" },
{ text: "Organization C", id: 7, color: "#df5286", level: "one" },
{ text: "Site", id: 8, color: "#df5286", level: "two" },
{ text: "Room", id: 9, color: "#df5286", level: "two" },
{ text: "Device", id: 10, color: "#df5286", level: "three" },
],
resourceTemplate: function () {
return { template: resourceTemplateVue };
},
group: {
byGroupId: false,
resources: ["Projects"],
},
selectedDate: new Date(2018, 3, 4),
currentView: "TimelineWeek",
};
},
provide: {
schedule: [Agenda, TimelineViews, TimelineMonth, Resize, DragAndDrop],
},
methods: {},
});
</script>
<style>
.levelOne {
margin-left: 0px;
}
.levelTwo {
margin-left: 15px;
}
.levelThree {
margin-left: 30px;
}
.levelFour {
margin-left: 45px;
}
</style>
Output:
Kindly try with the above sample and get back to us if you need any further assistance.
Regards,
Vinitha
SIGN IN To post a reply.
