1. Home
  2. Forum
  3. Vue
  4. Runtime Event Marker, Holiday and Zoomin Zoomout

Runtime Event Marker, Holiday and Zoomin Zoomout

Hi,

I'm evaluating the Gantt control and have bellow issue needs your support.

1.I try to get the eventmark, holiday using axios and push the data to eventmarks & holidys something like bellow

data() {
  return {
    height: "450",
    taskFields: {
      id: "taskId",
      name: "taskName",
      startDate: "startDate",
      duration: "duration",
      endDate: "endDate",
      progress: "progress",
      dependency: "predecessor",
      parentID: "parentID",
      resourceInfo: "resources",
      child: "subtasks"
    },
    ...
    resourceFields: {
      id: "resourceId",
      name: "resourceName",
      unit: "resourceUnit",
      group: "resourceGroup"
    },
    resources: [],
    holidays: [],
    eventMarkers: [],
    gridLines: "Both",
    splitterSettings: {
      columnIndex: 3.1
    },
    labelSettings: {
      leftLabel: "taskName",
      rightLabel: "resources"
    },
    projectStartDate: new Date("01/28/2019"),
    projectEndDate: new Date("06/10/2019"),
    ...
    priorityParams: {
      create: () => {
        elem = document.createElement("input");
        return elem;
      },
      read: () => {
        return dropdownlistObj.text;
      },
      destroy: () => {
        dropdownlistObj.destroy();
      },
      write: args => {
        dropdownlistObj = new DropDownList({
          dataSource: this.dsPriority,
          fields: { text: "text", value: "value" },
          value: args.rowData[args.column.field],
          floatLabelType: "Auto"
        });
        dropdownlistObj.appendTo(elem);
      }
    },
  };
},
mounted() {
  const ganttChart = document.getElementById("GanttContainer")
    .ej2_instances[0];
  //ganttChart.fitToProject();
  this.$api.pm.getProjectResources().then(res => {
    if (ganttChart.resources) {
      ganttChart.resources = [];
    }
    //ganttChart.resources=res;
    for (const resource of res) {
      ganttChart.resources.push(resource);
    }
  });
  this.$api.pm.getProjectEventMarkers(12).then(res => {
    if (ganttChart.eventMarkers) {
      ganttChart.eventMarkers = [];
    }
    //ganttChart.eventMarkers=res;
    for (const marker of res) {
      ganttChart.eventMarkers.push(marker);
    }
  });
  this.$api.pm.getHolidays().then(res => {
    if (ganttChart.holidays) {
      ganttChart.holidays = [];
    }
    //ganttChart.holidays=res;
    for (const holiday of res) {
      ganttChart.holidays.push(holiday);
    }
  });
},


The Gantt can show the eventmarks and holidays, but when try to scroll horizontal the event marks looks duplicate. Also when same issue occurs when using ZoomIn and ZoomOut etc. Please refer the attachment for detail.

2.When using the dropdown list on the column, how to set the value of the dropdown item? Bellow code sent selected text when PUT to server.
<e-columns>
  <e-column
    field="taskId"
    :visible="false"
    :isPrimaryKey="true"
  ></e-column>
  ...
  <e-column
    field="priority"
    headerText="priority"
    editType="dropDownList"
    :edit="priorityParams"
  ></e-column>
</e-columns>
priorityParams: {
  create: () => {
    elem = document.createElement("input");
    return elem;
  },
  read: () => {
    return dropdownlistObj.text;
  },
  destroy: () => {
    dropdownlistObj.destroy();
  },
  write: args => {
    dropdownlistObj = new DropDownList({
      dataSource: this.dsPriority,
      fields: { text: "text", value: "value" },
      value: args.rowData[args.column.field],
      floatLabelType: "Auto"
    });
    dropdownlistObj.appendTo(elem);
  }
},

3.How to add  a Dropdown Editor to the Add/Edit Dialog? Bellow link shows how to add textedit box, but how to changed to dropdown?


Regards

Attachment: Gantt_e9783fa9.zip

8 Replies 1 reply marked as answer
MS Monisha Sivanthilingam Syncfusion Team May 17, 2021 01:31 PM UTC

Hi Michael, 
 
Greetings from Syncfusion support. 
 
Please find the response for your queries below. 
 
Sl.No. 
Query 
Syncfusion Comments 
 
1 
I try to get the eventmark, holiday using axios and push the data to eventmarks & holidys something like bellow 
We are working on this query. We will validate and provide you with a response within two business days(May 19, 2021). 
 
2 
When using the dropdown list on the column, how to set the value of the dropdown item? Bellow code sent selected text when PUT to server. 
You can send the value instead of the text to the server in the PUT method if you read the dropdownlistObj.value instead of text in the read method of the edit template. The following code snippets demonstrate the solution. 
 
App.vue 
 
read: () => { 
   return dropdownlistObj.value; 
}, 
 
 
 
3 
How to add  a Dropdown Editor to the Add/Edit Dialog? Bellow link shows how to add textedit box, but how to changed to dropdown? 
You cannot add a drop down field in the add/edit dialog. The fields in the add/edit dialog reflect the columns in the Grid side of the Gantt Chart. If you wish to add a drop down field in the add/edit dialog, you have to include a custom column with edit type as drop down edit. 
 
 
We have also prepared a sample for your reference. 
 
Please contact us if you have any concerns with this. 
 
Regards, 
Monisha. 


MS Monisha Sivanthilingam Syncfusion Team May 17, 2021 01:51 PM UTC

Hi Michael, 
 
Greetings from Syncfusion support. 
 
Please find the response for your queries below. 
 
Sl.No. 
Query 
Syncfusion Comments 
 
1 
I try to get the eventmark, holiday using axios and push the data to eventmarks & holidys something like bellow 
We are working on this query. We will validate and provide you with a response within two business days(May 19, 2021). 
 
2 
When using the dropdown list on the column, how to set the value of the dropdown item? Bellow code sent selected text when PUT to server. 
You can send the value instead of the text to the server in the PUT method if you read the dropdownlistObj.value instead of text in the read method of the edit template. The following code snippets demonstrate the solution. 
 
App.vue 
 
read: () => { 
   return dropdownlistObj.value; 
}, 
 
 
 
3 
How to add  a Dropdown Editor to the Add/Edit Dialog? Bellow link shows how to add textedit box, but how to changed to dropdown? 
You cannot add a drop down field in the add/edit dialog. The fields in the add/edit dialog reflect the columns in the Grid side of the Gantt Chart. If you wish to add a drop down field in the add/edit dialog, you have to include a custom column with edit type as drop down edit. 
 
 
We have also prepared a sample for your reference. 
 
Please contact us if you have any concerns with this. 
 
Regards, 
Monisha. 


MI Michael May 18, 2021 12:45 AM UTC

Hi Monisha,

Thanks your help and I can use the dropdown list in the add/edit dialog now. But I'd like to show the selected text on the grid column same with the dialog. Now it shows the selected value. Would you please help check again.

Regards

Marked as answer
MS Monisha Sivanthilingam Syncfusion Team May 18, 2021 06:45 AM UTC

Hi Michael, 
 
You are welcome. 
 
We can achieve your requirement by making use of the valueAccessor. The valueAccessor can be used to access/manipulate the data displayed in the columns. We have made use of the valueAccessor to display the text in the column, while the value will be saved in the server. The following code snippets demonstrate the solution. 
 
App.vue 
 
<e-column 
   field="Priority" 
   :editType="dropdownedit" 
   :edit="dpParams" 
   :valueAccessor="valueAccess" 
></e-column> 
 
 
 
methods: { 
    valueAccess: function (field, data, column) { 
      for (var i = 0; i < priority.length; i++) { 
        if (data.Priority === priority[i].value) { 
          return priority[i].text; 
        } 
      } 
    }, 
  }, 
 
 
We have also prepared a sample for your reference. 
 
Please contact us if you require any further assistance. 
 
Regards, 
Monisha. 


MI Michael May 24, 2021 12:52 AM UTC

Hi,

How about the first question status?

1 
I try to get the eventmark, holiday using axios and push the data to eventmarks & holidys something like bellow 
We are working on this query. We will validate and provide you with a response within two business days(May 19, 2021). 
 

MK Mahalakshmi Karthikeyan Syncfusion Team May 24, 2021 05:30 PM UTC

Hi Michael, 
We couldn’t able to replicate the reported issue, We can successfully able to scroll horizontally after inserting the `eventMarker` dynamically. We have also prepared a sample for your reference. Please let us know in which version of source you are using? 
If you still facing any issue, please modify the attached sample to replicate the issue. 
Regards, 
Mahalakshmi K. 


MI Michael May 25, 2021 09:01 AM UTC

Hi Mahalakshmi,

Can not open the sample. Would you please give me a downloadable sample?

GET https://codesandbox.io/static/browserfs12/browserfs.min.js net::ERR_ABORTED 503 (Service Unavailable)
4dgd1.csb.app/:1 Access to script at 'https://codesandbox.io/static/js/vendors~app~embed~sandbox-startup.6e3433fd3.chunk.js' from origin 'https://4dgd1.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
4dgd1.csb.app/:6 GET https://codesandbox.io/static/js/vendors~app~embed~sandbox-startup.6e3433fd3.chunk.js net::ERR_FAILED
4dgd1.csb.app/:1 Access to script at 'https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js' from origin 'https://4dgd1.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
4dgd1.csb.app/:5 GET https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js net::ERR_FAILED
4dgd1.csb.app/:1 Access to script at 'https://codesandbox.io/static/js/sandbox-startup.62904b950.js' from origin 'https://4dgd1.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
4dgd1.csb.app/:7 GET https://codesandbox.io/static/js/sandbox-startup.62904b950.js net::ERR_FAILED
4dgd1.csb.app/:1 Access to script at 'https://codesandbox.io/static/js/vendors~app~codemirror-editor~monaco-editor~sandbox.5ca13c344.chunk.js' from origin 'https://4dgd1.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
4dgd1.csb.app/:31 GET https://codesandbox.io/static/js/vendors~app~codemirror-editor~monaco-editor~sandbox.5ca13c344.chunk.js net::ERR_FAILED
4dgd1.csb.app/:1 Access to script at 'https://codesandbox.io/static/js/common-sandbox.7be24d846.chunk.js' from origin 'https://4dgd1.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
4dgd1.csb.app/:32 GET https://codesandbox.io/static/js/common-sandbox.7be24d846.chunk.js net::ERR_FAILED
4dgd1.csb.app/:1 Access to script at 'https://codesandbox.io/static/js/vendors~app~sandbox.711ae7310.chunk.js' from origin 'https://4dgd1.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
4dgd1.csb.app/:33 GET https://codesandbox.io/static/js/vendors~app~sandbox.711ae7310.chunk.js net::ERR_FAILED
4dgd1.csb.app/:1 Access to script at 'https://codesandbox.io/static/js/vendors~sandbox.ef7aff03a.chunk.js' from origin 'https://4dgd1.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
4dgd1.csb.app/:34 GET https://codesandbox.io/static/js/vendors~sandbox.ef7aff03a.chunk.js net::ERR_FAILED
(index):9 GET https://codesandbox.io/static/browserfs12/browserfs.min.js net::ERR_ABORTED 503 (Service Unavailable)
(index):12 Uncaught ReferenceError: BrowserFS is not defined
    at (index):12
(anonymous) @ (index):12
(index):1 Access to script at 'https://codesandbox.io/static/js/default~app~embed~sandbox.c2be9b266.chunk.js' from origin 'https://4dgd1.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
(index):35 GET https://codesandbox.io/static/js/default~app~embed~sandbox.c2be9b266.chunk.js net::ERR_FAILED
(index):1 Access to script at 'https://codesandbox.io/static/js/sandbox.d21e90595.js' from origin 'https://4dgd1.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
(index):36 GET https://codesandbox.io/static/js/sandbox.d21e90595.js net::ERR_FAILED
(index):1 Access to script at 'https://codesandbox.io/static/js/banner.be879265d.js' from origin 'https://4dgd1.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
(index):37 GET https://codesandbox.io/static/js/banner.be879265d.js net::ERR_FAILED
(index):1 Access to script at 'https://codesandbox.io/static/js/watermark-button.be960f43b.js' from origin 'https://4dgd1.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
(index):38 GET https://codesandbox.io/static/js/watermark-button.be960f43b.js net::ERR_FAILED
manifest.json:1 Manifest: property 'scope' ignored. Start url should be within scope of scope URL.


regards


MS Monisha Sivanthilingam Syncfusion Team May 26, 2021 11:15 AM UTC

Hi Michael, 
 
We apologize for the inconvenience. 
 
We have prepared a local sample with the same codes as shared in our previous update. Please find the sample from the below link. 
 
 
Steps to run the sample: 
 
  1. Download the sample.
  2. Open the sample in VS Code pointing to src folder.
  3. In VS Code click Terminal -> New Terminal.
  4. Type npm install and press enter.
  5. After the packages are installed, type npm run dev and press enter.
  6. The Gantt will load in the browser window.
  7. Click on the Event button at the top of the application.
  8. The event marker will be inserted dynamically. Now, you can scroll the application horizontally.
 
Please contact us if you require any further assistance. 
 
Regards, 
Monisha. 


Loader.
Up arrow icon