We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Modal appointment on cell click

Thread ID:

Created:

Updated:

Platform:

Replies:

120775 Oct 14,2015 07:39 AM UTC Oct 20,2015 04:17 AM UTC ASP.NET MVC 8
loading
Tags: Schedule
ESTEBE
Asked On October 14, 2015 07:39 AM UTC

Hi,

I' would like display directly the modal windows (see attach file) with the event "cellClick"

 without display the popup . Is it possible ?


Thank you,
Nicolas

(sorry for my bad english)

Attachment: Capture_fbe4769c.zip

ESTEBE
Replied On October 14, 2015 08:29 AM UTC

I found a way:


        function OnCellClick() {
$('.e-detailedapp').trigger('click'); //open modal
event.stopPropagation(); 

        }

Sarath Kumar P K [Syncfusion]
Replied On October 15, 2015 06:29 AM UTC

Hi ESTEBE,

Thanks for contacting Syncfusion support.

We have prepared a schedule sample to meet your requirement (Open detailed window on cell click) which can be downloaded from the following location.
http://www.syncfusion.com/downloads/support/forum/120775/ze/CellClick473840419

In the above sample we have used the following code example to open the detailed window when we click on the cell.
<code>

@(Html.EJ().Schedule("Schedule1")

                .Width("100%")

                .Height("525px")

                .ScheduleClientSideEvents(eve => eve.CellClick("OnCellClick").AppointmentClick("OnCellClick"))       //If you want to open the appointment detail on single click bind the same method name for appointment click and use the below code example

                .AppointmentSettings(

                    fields => fields.Datasource(Model)

                    ----------------
)

<script type="text/javascript">

    function OnCellClick(args) {

        args.cancel = true;        //Block the quick window open.

        if (args.type == "cellClick")

            this._appointmentWindow({ target: args.target.currentTarget });                //Open the detailed window with updated date and time.

        else if(args.type=="appointmentClick")

            this._appointmentWindow({ target: $("#Appointment_"+args.appointment.Id) });   //If you want to open the appointment detailed window use this code.

    }
</script>
</code>

Regards,
Sarath Kumar P K


ESTEBE
Replied On October 15, 2015 08:26 AM UTC

Thank you very much for your answer and your sample it really helped me.

It's possible to use the method _appointmentWindow(e) to create an
Open detailed window just by clicking on a button (without cell click or dblclick) ?

For example:

<code>

<button onclick='openWindow'>Open
detailed window</button>
...

<script>

function
openWindow(){

var schedule = $("#Schedule1").data("ejSchedule");
schedule._appointmentWindow(???);

};
</script>

</code>

Sarath Kumar P K [Syncfusion]
Replied On October 16, 2015 08:53 AM UTC

Hi,

We have analyzed the scenario to open the appointment detailed window using default button click. It is possible to open the detailed window but you need to pass the schedule work cell DOM element as a parameter and also you need to call “_cellSelection” method so that the required values are updated properly in appointment window and you can save the appointment. While using this customize window open action using button click, no need to bind the client side events “cellClick and appointmentClick”. Please refer to the following code example:
<code>

<button onclick='openWindow()'>Open detailed window</button>               //Create button to trigger the openWindow method


<script type="text/javascript">


    function openWindow() {

        var schedule = $("#Schedule1").data("ejSchedule");

        schedule._cellSelection({ target: $(schedule.element.find(".e-workcells")[0]) });       //Call the _cellSelection method to get the required data based on target cell

        schedule._appointmentWindow({ target: $(schedule.element.find(".e-workcells")[0]) });   //Here you need to pass the schedule cell target element, I have passed the first schedule work cells. If you want to open the window in month view replace the class “.e-workcells” by “.e-monthcells”.
    }
</script>
</code>

Regards,
Sarath Kumar P K


ESTEBE
Replied On October 16, 2015 10:07 PM UTC

Thank you

Sarath Kumar P K [Syncfusion]
Replied On October 19, 2015 04:33 AM UTC

Hi,

We are glad to hear that the provided solution resolved your requirement.

Please let us know, if you require any further assistance. As always, we will be happy to assist you.

Regards,
Sarath Kumar P K

ESTEBE
Replied On October 19, 2015 05:37 PM UTC

Yes your solution work perfectly.
Thank you very much.
Nicolas

Sarath Kumar P K [Syncfusion]
Replied On October 20, 2015 04:17 AM UTC

Hi,

Thanks for the update.

Regards,
Sarath Kumar P K

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;