Discuss anything related to web development but no technical support questions


Post by Aswathy M »

Hi All

I am trying to implement Nested events in scheduler using angular 6. In examples, sample code available for nested events in Javascript. Can anyone help me with sample code for nested events in typescript for angular 6 ?

Thanks
Aswathy

Post by johan.isaksson »

Hi,

Most of the logic in that demo happens at render time, by using `eventBodyTemplate` and `eventRenderer`. Unfortunately the Angular wrapper does not expose `eventBodyTemplate` at this point (will make sure it does in next release) but you should be able to use `eventRenderer` only.

Try using an eventRenderer similar to this:
eventRenderer = ({eventRecord, tplData}) => {
    // getCoordinateFromDate gives us a px value in time axis, subtract events left from it to be within the event
    const dateToPx = (date) => this.getCoordinateFromDate(date) - tplData.left;

    // Calculate coordinates for all nested events and put in an array passed used to generate html
    const nested = (eventRecord.agenda || [eventRecord]).map(nestedEvent => ({
        left  : dateToPx(DateHelper.add(eventRecord.startDate, nestedEvent.startOffset)),
        width : dateToPx(DateHelper.add(eventRecord.startDate, nestedEvent.endOffset)),
        name  : nestedEvent.name
    }));

    // Generate html
    return nested.map(value => `
        <div class="nested" style="left: ${value.left}px;width: ${value.width}px">
            ${value.name}
        </div>
    `).join('');
}
The demo also has some processing of nested events data on load. You might not need it if you serve correctly formatted data instead. Should you need it, how to solve it depends on how you are loading data.

Good luck!
Best regards,
Johan Isaksson

Post by Aswathy M »

Thanks John.

I had added eventRenderer in scheduler component of angular 6 basic code given in demo. I get an error, 'Property "getCoordinateFromDate" does not exist in scheduler component'. Also I need to know how crudManager can be incorporated in angular 6 code.

Post by johan.isaksson »

You need to check what scope it is executed in. For me `this` points to the scheduler engine when I try it, and it finds the 'getCoordinateFromDate` fn. I suppose yours for some reason points somewere else, in which case you need to the engine, perhaps as this.schedulerEngine.getCoordinateFromDate.
Best regards,
Johan Isaksson

Post Reply