Related Child Grid Control

[Prasanth]

Hi there,

Is it possible to have Schedule and child Grid control on same page.

Let's say you have tasks (with due date - DateTimeOffset property) for an individual which can be created on schedule control, is it possible to list all the tasks on grid below.

And if the user selects the particular task on grid, automatically update the current month/week to current selected task's due date and vice versa, when user selects a task on Schedule control the corresponding task row is selected on grid.

I have already implemented the Grid using BatchMode

.AllowFiltering().FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

    .Datasource(ds =>

    {

        ds.URL("/Tasks/DataSource");

        ds.BatchURL("/Tasks/Update").Adaptor(AdaptorType.UrlAdaptor);

    })

    .EditSettings(edit => { edit.AllowAdding().AllowEditing().EditMode(EditMode.Batch); })

Regards

Prasanth

[Karthigeyan Krishnamurthi]

Hi Prasanth,

Thanks for contacting Syncfusion support.

Your mentioned scenario “Having Schedule and Grid control on same page” is possible. We have prepared a sample to meet your requirement “Selecting the Grid record while clicking the task/appointment in Schedule control and vice versa updating the current week/month of the Schedule control based on the selected Grid record ” which can be downloaded from the following location,
http://www.syncfusion.com/downloads/support/forum/121743/ze/Schedule_with_Grid-1783802651

In the above sample we have displayed the scheduler control appointments and the Grid control records based on the same datasource . When the appointments/task in the schedule control is clicked, corresponding record in the Grid control will be selected. Similarly when the particular records in the Grid control is selected, Scheduler will be re-rendered based on the selected record start time. Kindly refer to the following code example that we have used in the above sample.
<Code>

<script type="text/javascript">

    function onAppointmentClick(args) { // this function will be called when the appointment is clicked in schedule control

        var obj = $("#FlatGrid").data("ejGrid"); // here we are creating object for Grid control

        var app = obj.model.currentViewData; // here we will get the records in the Grid control

        var appointment = ej.DataManager(app).executeLocal(new ej.Query().where("Id", ej.FilterOperators.equal, args.appointment.Id)); // here we will get the record selected in the schedule control

        var rowIndex = $.inArray(appointment[0], app); // here we will get the row index of the selected record

        obj.selectRows(rowIndex); // here the filtered record will be selected

    }

    function currentView(args) // this function will be called when the record is selected in Grid control

    {

        var date=args.data.StartTime.setHours(0, 0, 0); // here we will get the start time of the selected record

        $("#Schedule1").ejSchedule("option", "currentDate", date); // here we are re-rendering the schedule control with the selected record's star time as current date

    }
</script>
</Code>

Regards,
Karthigeyan

[Prasanth]

Hi Karthigeyan,

Brilliant, thank you so much for the solution.  Was wasting lot of time trying to figure out, thanks for the help.

Is there way to refresh the schedule when a record is inserted via Gird and vice versa (when an appointment is made via schedule).

Also is it possible to customize the schedule "Edit Appointment" / "Create Appointment" pop up window.  Would like to change the heading, and labels and control placement etc

Regards

Prasanth

[Prasanth]

Hi Karthigeyan,

Brilliant, thank you so much for the solution.  Was wasting lot of time trying to figure out, thanks for the help.

Is there way to refresh the schedule when a record is inserted via Gird and vice versa (when an appointment is made via schedule).

Also is it possible to customize the schedule "Edit Appointment" / "Create Appointment" pop up window.  Would like to change the heading, and labels and control placement etc

Regards

Prasanth

Hi there,

Forgot to add bit more details on custom "Create Appointment" / "Edit Appointment" popup windows.  I need to have Autocomplete (if possible) control where users could search for Text but Unique ID of the selected item via Autocomplete is passed on to the Model class.  

Regards

Prasanth

[Karthigeyan Krishnamurthi]

Hi Prasanth,

Please find the following responses for your queries.

Query1: Need to refresh the schedule when a record is inserted via Gird

We have prepared a sample for your requirement  which can be downloaded from the following location,
http://www.syncfusion.com/downloads/support/forum/121743/ze/Schedulewith_grid1160576381

In the above sample, we have refreshed the schedule control when the new record is inserted through grid as well as schedule. Kindly refer to the following code example that we have used in the above sample.
<Code>

@(Html.EJ().Grid<object>("FlatGrid")

    .ClientSideEvents(ev => ev

        .RecordClick("currentView") // this event will raise when the record in grid is clicked

        .EndAdd("save") // this event will raise when the record is saved in grid

    )

      -----------

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

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

        .Width("100%")

        .Height("525px")

        .ScheduleClientSideEvents(evt => evt              

                 .AppointmentSaved("onAppointmentSave") // this event will raise when the appointment is saved

                 )

            -----------

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

function save(args) // this function will be called when the record is saved in grid

    {

        var app = args.data; // appointment to be saved will be retrived

        var obj = $("#Schedule1").data("ejSchedule"); // here we are creating object for Schedule control

        if (args.data.AllDay == "false")

            args.data.AllDay = JSON.parse("false")

        else

            args.data.AllDay = JSON.parse("true")

        obj.saveAppointment(app); // here we are saving the appointment using public save function

        obj.refresh() // to refresh the schedule

        obj.refreshAppointments() // to referesh the schedule appointments

    }

function onAppointmentSave(args) // this function will be called when the appointment is saved

    {

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

        obj.refresh() // to refresh the schedule

        obj.refreshAppointments() // to referesh the schedule appointments
    }
</Code>

Query 2: Is it possible to customize the schedule "Edit Appointment" / "Create Appointment" pop up window ?

We have prepared a sample for your requirement which can be downloaded from the following location,
http://www.syncfusion.com/downloads/support/forum/121743/ze/custom_window420953694

In the above sample we have customized the default edit /create appointment window. In the custom window we have rendered the autocomplete control which holds the owner values.  Kindly visit the below User Guide link to know more about the custom window.
Custom Window UG Link: http://help.syncfusion.com/aspnetmvc/schedule/customization#customized-appointment-window
Auto Complete UG Link: http://help.syncfusion.com/aspnetmvc/autocomplete/getting-started

Regards
Karthigeyan