Our pure JavaScript Scheduler component


Post by rizwansaleem70 »

Hi. Hope you are doing good. I am facing problem on showing dependencies linking line on bryntum scheduler pro in Angular...I want to linking like this

dependcies.png
dependcies.png (95.27 KiB) Viewed 418 times

But now my scheduler pro is looking like this

dependies not.png
dependies not.png (122.05 KiB) Viewed 418 times

...
Can you help me out here that where am i wrong
my code
config.ts

export const schedulerProConfig = {
    schedulerId: 'top-scheduler',
    startDate: new Date(2020, 3, 26),
    endDate: new Date(2020, 4, 10),
    viewPreset: 'dayAndWeek',
    //  eventStyle: 'plain',
    eventStyle: 'colored',
    //  eventStyle: 'hollow',
    tickSize: 100,
    rowHeight: 60,
    //  rowHeight: 170,
    resourceImagePath: 'assets/users',
    columnLines: false,

columns: [
  {
    type: 'tree',
    text: 'Name',
    field: 'name',
    width: 180,
    tree: true,
    showRole: true
  },
  { text: 'Designation', field: 'designation', width: 90 },
  {
    text: 'Actions',
    type: 'action',
    width: 40,
    align: 'center',
    actions: [{
      cls: 'b-fa b-fa-fw b-fa-plus',
      tooltip: 'Duplicate Resource',
      onClick: () => {
        alert('click');
      }
    }]
  }
],

listeners : {
  cellClick({ grid, record, column, cellSelector, cellElement, target, event }: any) {
      if (column.region === 'locked') {
        console.log(record.originalData);
        console.log(record);
        console.log('Id:- '+record.originalData.id+', '+'Name:- '+record.originalData.name);
        // alert('Id:- '+record.originalData.id+', '+'Name:- '+record.originalData.name);
          // debugger;
      }
  }
},

features: {
    tree: true,
    infiniteScroll: true,
    regionResize: true,
    percentBar: true,
    resourceNonWorkingTime: true,
    timeRanges : true,
    cellEdit: true,
    filter: true,
    dependencies: true,
    dependencyEdit : {
        showLagField : false
    },
    eventTooltip: {
    },
},

// Start with todays date
visibleDate: {
  date: new Date(),
  block: 'center'
},

project
};

my data.json

"dependencies": {
        "rows": [
            {
                "id": 1,
                "fromEvent": 1,
                "toEvent": 15,
                "lagUnit": "d",
                "lag": 1,
                "cls": "dev-path"
            }
        ]
    }

Post by tasnim »

Could you please attach a runnable test case so that we can debug it closely?


Post by rizwansaleem70 »

Thanks for instant reply..
Can you tell me how I attach a runnable test case?


Post by tasnim »

You can just remove the node_modules and package-lock.json file then create a zip file of your whole app and then drag and drop the folder to the text box here.


Post by rizwansaleem70 »

Thank you for your help
Here is the runnable test case...

Attachments
dependencies.zip
(94.82 KiB) Downloaded 36 times

Post by rizwansaleem70 »

Hello Tasnim and Bryntum Team
Did you find that what is the problem?
Thanks


Post by alex.l »

The problem in your custom CSS, in reset.scss you override globals which broke our styling.

Remove this

svg:not(:root) {
    overflow: hidden;
}

It will fix that problem. And be careful with the rest. Good luck!

All the best,
Alex


Post by rizwansaleem70 »

Thank you Alex


Post Reply