Need to trigger onpopup open when the user clicks on an item on the context menue (same event as double clicking an empty cell)

[Juan Manuel Gago]

Hi there, 

I need assistance on how to trigger onPopupOpen event when the user clicks on an item of the context menu. Event needs to be the same as the one that's triggered when

a cell is double clicked. I'm already handling the user click on the item, I only need to know how to call onPopupOpen from onMenuItemSelect with the correct args.

Thanks!

Juan.

[Ravikumar Venkatesan]

Hi Juan, 

Greetings from Syncfusion support. 

We have validated your reported query “Need to trigger onPopupOpen when the user clicks on an item on the context menu” at our end. In default, the Schedule popupOpen event is triggered only when open the Schedule popups like Quick info popup and Editor window. We can trigger the popupOpen event from the context menu by calling the openEditor public method of the Schedule like the below code. 

[index.cshtml] 

<div class="control-section"> 

    <div class="schedule-wrapper"> 

        <ejs-schedule id="schedule" height="650px" selectedDate="new DateTime(2019, 1, 10)" popupOpen="onPopupOpen"> 

            <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings> 

        </ejs-schedule> 

    </div> 

    <div> 

        <ejs-contextmenu id="contextmenu" cssClass="schedule-context-menu" target=".e-schedule" items="ViewBag.menuItems" beforeOpen="onContextMenuBeforeOpen" select="onMenuItemSelect"> 

        </ejs-contextmenu> 

    </div> 

</div> 

<script type="text/javascript"> 

    var selectedTarget; 

    function onPopupOpen(args) { 

        if (args.type === 'Editor') { 

            alert("popupOpen event triggered"); 

        } 

    } 

    function onContextMenuBeforeOpen(args) { 

        var newEventElement = document.querySelector('.e-new-event'); 

        if (newEventElement) { 

            ej.base.remove(newEventElement); 

           ej.base.removeClass([document.querySelector('.e-selected-cell')], 'e-selected-cell'); 

        } 

        var targetElement = args.event.target; 

        if (ej.base.closest(targetElement, '.e-contextmenu')) { 

            return; 

        } 

        selectedTarget = ej.base.closest(targetElement, '.e-work-cells,.e-vertical-view .e-date-header-wrap .e-all-day-cells'); 

        if (ej.base.isNullOrUndefined(selectedTarget)) { 

            args.cancel = true; 

            return; 

        } 

        this.showItems(['Add'], true); 

    } 

 

    function onMenuItemSelect(args) { 

        var scheduleObj = document.querySelector(".e-schedule").ej2_instances[0]; 

        var selectedCells = scheduleObj.getSelectedElements(); 

        var activeCellsData = scheduleObj.getCellDetails(selectedCells.length > 0 ? selectedCells : selectedTarget); 

        // The openEditor method triggers the popupOpen event 

        scheduleObj.openEditor(activeCellsData, 'Add'); 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/forum/156468/ze/ej2-core-schedule-with-context1795387542 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Juan Manuel Gago]

Thank you very much for your quick answer. 

That works like a charm, but what I'm not realizing is how to get a cell detail when the cell is actually one item of a resource collection.

I mean, I can get the selected resource as follows:

var selectedResourceObject = scheduleObj.getResourceCollections()[0].dataSource[selectedTarget.cellIndex];

And with that information then feed a new object with the data I really need for the modal to display. But that is not as straightforward as if I could get the same result I get a when running getCellDetail of a regular cell.

If it can be done, then please share your wisdom! if there's no way to do it, then don't bother. 

Thanks,

Juani.

[Ravikumar Venkatesan]

Hi Juan, 

Thanks for the update. 

We have validated your reported query “how to get a cell detail when the cell is actually one item of a resource collection” at our end. We can get the selected cell resource detail with the help of the getResourcesByIndex public method with the below code. We have prepared a sample for your reference and it can be available below. 

[index.cshtml] 

    function onMenuItemSelect(args) { 

        var scheduleObj = document.querySelector(".e-schedule").ej2_instances[0]; 

        var selectedCells = scheduleObj.getSelectedElements(); 

        var activeCellsData = scheduleObj.getCellDetails(selectedCells.length > 0 ? selectedCells : selectedTarget); 

        // You can get resource detail here 

        let resourceIndex = scheduleObj.getCellDetails(selectedTarget).groupIndex; 

        let resourceDetail = scheduleObj.getResourcesByIndex(resourceIndex).resourceData; 

        console.log(resourceDetail); 

        // The openEditor method triggers the popupOpen event 

        // The groupIndex propery available on the activeCellsData allows schedule to find which resource cells is clicked and event added to that resource 

       scheduleObj.openEditor(activeCellsData, 'Add'); 

    } 

Sample: https://www.syncfusion.com/downloads/support/forum/156468/ze/ej2-core-schedule-get-resource-detail-52272492 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan