Bind elements in AdvancedInsert and AdvancedEdit template using wcf services

[Mahesh]

Hi,

  We are using Telerik RadScheduler to bind the events. We are using wcf service method to bind the data.
The data binding is done successfully and its showing the data correctly. 

Now we are using AdvancedInsertTemplate and AdvancedEditTemplate respectively to insert and edit the events. So in the template we have added two use controls and it contains form elements for insertion and deletion.

When clicking on an empty day,a popup is showing with insert form. Also when clicking on an event , the edit form is also coming.

Now i have got some questions:

1. Up on editing how to bind the existing details in the edit form , we are using a user control as edit form. Also we want to do it using a wcf service methods, since we are doing the initial binding with wcf services. Now its showing an empty form.
2. Similarly on insert also we want to do it from client side using wcf services.
3. Also i want to know whether we can use methods from a wcf service hosted in some other machine. Now while checking we are using wcf services inside our website. But we want to know whether we can use methods from a wcf service hosted outside our website.

Thanks,
Mahesh

[Peter]

Hello Mahesh,

Please, follow this tutoral:

Using the Advanced Templates ->section on How to use the advanced user controls in Client Side binding mode (Web Services)

Greetings,
Peter
the Telerik team

[Mahesh]

Hi Peter,

Thanks for the reply ...

 I have  checked the AdvanceForm.js in the live demo project files. I copied that into my project and tried to run the application .
Then i got some script error like "this._pickers.startDate is null".

Do we need to modify this file for each template.? Can you please advice me on ow to proceed from here?

Is it a difficult thin to bind templates with wcf services? Is it better to use code behind method?

Given below is my sample code i have tried

<telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedView="MonthView"
            AllowDelete="false" AppointmentStyleMode="Auto" OnClientAppointmentWebServiceInserting="AppointmentInsert"
            AllowEdit="true" AllowInsert="true" OnClientAppointmentContextMenuItemClicking="ItemClicked"
            OnClientTimeSlotContextMenuItemClicking="NewItemClick" OnClientDataBound="onSchedulerDataBound"   CustomAttributeNames="CustomAttribute,UserName"
            OnClientFormCreated="schedulerFormCreated" >
            <AdvancedForm Modal="true" />
            <WebServiceSettings Path="CalendarService.svc" ResourcePopulationMode="ServerSide" />

            <AdvancedEditTemplate>
                <div class="rsAdvancedEdit rsAdvancedModal">
                    <div class="rsModalBgTopLeft">
                    </div>
                    <div class="rsModalBgTopRight">
                    </div>
                    <div class="rsModalBgBottomLeft">
                    </div>
                    <div class="rsModalBgBottomRight">
                    </div>
                    <div class="rsAdvTitle">
                        <h1 class="rsAdvInnerTitle">
                            <%# Container.Appointment.Owner.Localization.AdvancedEditAppointment %></h1>
                        <asp:LinkButton runat="server" ID="LinkButton1" CssClass="rsAdvEditClose" CommandName="Cancel"
                            CausesValidation="false" ToolTip='<%# Container.Appointment.Owner.Localization.AdvancedClose %>'>
                            <%# Container.Appointment.Owner.Localization.AdvancedClose%>
                        </asp:LinkButton>
                    </div>
                    <div class="rsAdvContentWrapper">
                        <telerik:RadTextBox ID="SubjectTextBox" runat="server" Text='<%#Bind("Subject")%>'
                            Label='<%# Container.Appointment.Owner.Localization.AdvancedSubject%>'>
                        </telerik:RadTextBox>
                        Custom content...
                    </div>
                </div>
            </AdvancedEditTemplate>

            <AppointmentContextMenus>
                <telerik:RadSchedulerContextMenu runat="server" ID="SchedulerAppointmentContextMenu">
                    <Items>
                        <telerik:RadMenuItem Text="Edit Event" Value="CommandEdit">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadSchedulerContextMenu>
            </AppointmentContextMenus>
            <TimeSlotContextMenus>
                <telerik:RadSchedulerContextMenu runat="server" ID="SchedulerTimeSlotContextMenu">
                    <Items>
                        <telerik:RadMenuItem Text="New Event" Value="New" />
                    </Items>
                </telerik:RadSchedulerContextMenu>
            </TimeSlotContextMenus>
        </telerik:RadSchedule>

Javascript

  var schedulerTemplates = {};

        function schedulerFormCreated(scheduler, eventArgs) {
            // Create a client-side object only for the advanced templates
            var mode = eventArgs.get_mode();
            if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
    mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
                // Initialize the client-side object for the advanced form
                var formElement = eventArgs.get_formElement();
                var templateKey = scheduler.get_id() + "_" + mode;
                var advancedTemplate = schedulerTemplates[templateKey];
                if (!advancedTemplate) {
                    // Initialize the template for this RadScheduler instance
                    // and cache it in the schedulerTemplates dictionary
                    var schedulerElement = scheduler.get_element();
                    var isModal = scheduler.get_advancedFormSettings().modal;
                    advancedTemplate = new window.SchedulerAdvancedTemplate(schedulerElement, formElement, isModal);
                    advancedTemplate.initialize();

                    schedulerTemplates[templateKey] = advancedTemplate;
                }
                // Are we using Web Service data binding?
                if (!scheduler.get_webServiceSettings().get_isEmpty()) {
                    // Populate the form with the appointment data
                    var apt = eventArgs.get_appointment();
                    var isInsert = mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert;
                    var editSeries = eventArgs.get_editingRecurringSeries();
                    advancedTemplate.populate(apt, isInsert, editSeries);
                }
            }
        }

We have used the AdvsncedForm.js file from the live demos "RadControls for ASP.NET AJAX Q2 2012".

[Peter]

Hi Mahesh,

You have copied the code from AdvancedForm.ascx directly in the AdvancedEditTemplate tags. This is expected to cause problems because the AdvancedForm user control has code behind logic as well which is missing from your implementation. Please, follow closely the customzing the advanced form demo - http://demos.telerik.com/aspnet-ajax/scheduler/examples/advancedformtemplate/defaultcs.aspx.



All the best, Peter
the Telerik team

[Mahesh]

Hi Peter,

 I didn't copied the whole code. What i done is we copied the AdvancedForm.js file as a whole. Now i understood that the issue is my edit template doesn't contain some controls like startdate, enddate etc.

So my question is , if i want to show only the Subject text in the edit form,what i need to do in the edit template and how i need to modify the AdvancedForm.js.

Actually in the above template given we have used only the Subject text, so i am checking whether is there any method to do this?


Thanks,
Mahesh

[Cat Cheshire]

 You can try hiding some controls at client-side with custom JavaScript or CSS :
http://www.telerik.com/community/code-library/aspnet-ajax/scheduler/customize-the-avanced-form-using-javascript-and-css.aspx