Comments (16)
Hello, thanks for replying, I really do appreciate it š.
here is the link of my code : https://github.com/redouan-da/gantt-svelte-angular
from svelte-gantt.
Can you try using SvelteGanttComponent
as the property interface?
gantt: SvelteGanttComponent;
from svelte-gantt.
### when i run the project i still got the same error :
`Error: node_modules/svelte-gantt/types/core/drag/dragDropManager.d.ts:2:26 - error TS2307: Cannot find module 'svelte/store' or its corresponding type declarations.
2 import { Writable } from 'svelte/store';
~~~~~~~~~~~~~~
Error: node_modules/svelte-gantt/types/core/store.d.ts:1:26 - error TS2307: Cannot find module 'svelte/store' or its corresponding type declarations.
1 import { Readable } from 'svelte/store';
~~~~~~~~~~~~~~
Error: src/app/app.component.ts:12:10 - error TS2749: 'SvelteGantt' refers to a value, but is being used as a type here. Did you mean 'typeof SvelteGantt'?
12 gantt: SvelteGantt;
`
from svelte-gantt.
Hello, sorry I was not able to answer sooner.
Any chance you could push your code to a repo? It would be a great help to me.
from svelte-gantt.
Hello, thanks.
I've made the changes here redouan-da/gantt-svelte-angular#1
This makes svelte-gantt work in angular but a few issues I need to fix (I used these workarounds in your project):
- svelte-gantt requires some types from 'svelte/store' so installing svelte is necessary but just for the types, resulting in no extra code in your app. Wish I knew how to import these types without doing
npm install svelte
... - The default css is lacking, I copied css from https://github.com/ANovokmet/svelte-gantt/blob/master/docs/gantt-default.css
Thanks for doing this and helping me discover these issues. Again sorry for taking so long to respond.
from svelte-gantt.
Hello, Tank you very much
Finally it works, good job, I really appreciate your help.
thank you again
from svelte-gantt.
Hello, it's me again šš
Now every things works great, tasks are showing but I have a problem listening to events, such as onclick or on select or on change a task.
I tried to use this : mygantt.api.tasks.on.select((task) => console.log('Listener: task selected', task));
but it didn't work (i guess because mygantt
is of type SvelteGanttComponent
)
Also i tried to use onTaskButtonClick : (task) => console.log('clicked on: ', task)
but it didn't work
from svelte-gantt.
Yeah, it's just a type issue try
this.gantt.api['tasks'].on.select(task => console.log('listener: task selected:', task));
from svelte-gantt.
Wonderful !! that's worked , thanks š
from svelte-gantt.
Hi @ANovokmet , can I set to allow Drag and Drop in ONE LINE. Example: I have 3 tasks in line 1, so I just need DnD these tasks in line 1, not allow DnD to another line.
from svelte-gantt.
Hi,
Starting with @redouan-da code i've tried to show two different gantt components in the same page :
gantt1: SvelteGanttComponent;
@ViewChild('ganttElt1', { read: ElementRef, static: false }) ganttElt1: ElementRef;
gantt2: SvelteGanttComponent;
@ViewChild('ganttElt2', { read: ElementRef, static: false }) ganttElt2: ElementRef;
... ... ...
this.gantt1 = new SvelteGantt({
// target a DOM element
target: this.ganttElt1.nativeElement,
... ... ...
});
this.gantt2 = new SvelteGantt({
// target a DOM element
target: this.ganttElt2.nativeElement,
... ... ...
});
<div #ganttElt1></div>
<div #ganttElt2></div>
But the HTML page always show the same gantt twice (gantt2)
Do you have an idea explaining this behavior ?
Thanks
from svelte-gantt.
@niczag did you find a solution yet ?
from svelte-gantt.
Hi @redouan-da ,
I've not find the solution.
My code seems to be good : 2 distincts objects for 2 distincts DOM elements
I suppose that in svelte-gantt only only one Component is instanciate (Singleton, global variable not cloned for a new instance) ???
from svelte-gantt.
Hi @redouan-da ,
I've not find the solution.My code seems to be good : 2 distincts objects for 2 distincts DOM elements
I suppose that in svelte-gantt only only one Component is instanciate (Singleton, global variable not cloned for a new instance) ???
Yes, that is true. More precisely, I think the issue is because the stores holding task and row data are singletons. I will work on the fix as soon as I'm able to.
from svelte-gantt.
@ANovokmet , thanks for the confirmation.
I'll be waiting for the fix.
I also have notice a compliance problem between the RowModel interface in the row.d.ts and the availables parameters :
I've enabled the "strict mode" in my angular environnement and with this option activated i've had errors with the rows data
{ id: 1, label: 'Row #1', height: null } as RowModel
because 'label' is not defined in the RowModel interface and 'height' cannot be null.
So i've modified row.d.ts like this :
export interface RowModel {
id: number;
label: string;
classes?: string | string[];
contentHtml?: string;
enableDragging?: boolean;
height: number | null;
children?: RowModel[];
}
from svelte-gantt.
Does anyone encounter this error while running in Angular?
Type 'SvelteRow' does not satisfy the constraint 'EntityType'.ts(2344)
from svelte-gantt.
Related Issues (20)
- Custom styling for the whole gantt chart in svelte with tailwind or custom css? HOT 1
- Cannot read properties of undefined (reading '$$') HOT 2
- Custom task component HOT 1
- Row filtering HOT 2
- External draggable example not working HOT 3
- Can't get the demo to run locally HOT 3
- scaling manually HOT 3
- Fix: querySelector usage in selectTask() throws Uncaught DOMException HOT 1
- Event `gantt.api.timeranges.on.resized` returns previous `from` and `to` values HOT 2
- Collapsing parent rows dynamically results in unexpected child behavior HOT 1
- Block pulling tasks HOT 1
- How could I set the rowHeight for the target single row? HOT 7
- Task Color HOT 1
- Back to full year?
- Cannot synchronize scrolling HOT 1
- Dragging of tasks does not deselect previous selected task HOT 2
- TypeError: Cannot read properties of undefined (reading 'model') when updating rows and tasks HOT 4
- Cannot use updateRow or updateRows method to add add rows with children HOT 1
- Layout Pack HOT 1
- A task is created during scrolling HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-gantt.