This is a migrated thread and some comments may be shown as answers.

Validate Inline Appointment insert client-side

8 Answers 133 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Alan
Top achievements
Rank 1
Alan asked on 02 Mar 2011, 01:38 PM
Hi,

I would like to validate the default inline template insert, basically I don't want to let the user create appointments that don't have subject inserted.

Can this be achieved? For some reason 'OnClientAppointmentInserting' is not getting triggered.

Thanks in advance.

Daryl

8 Answers, 1 is accepted

Sort by
0
Veronica
Telerik team
answered on 02 Mar 2011, 02:32 PM
Hi Daryl,

Please take a look at this KB article and let me know if you have further questions.

Greetings,
Veronica Milcheva
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Alan
Top achievements
Rank 1
answered on 02 Mar 2011, 03:26 PM
That's not exactly how I need it, I want it to happen when the save button is triggered in the inline appointment insert. So that I can cancel the insert and give a chance to the user to insert the subject.

Thanks,
Daryl
0
Alan
Top achievements
Rank 1
answered on 04 Mar 2011, 01:35 PM
Anyone?
0
Veronica
Telerik team
answered on 07 Mar 2011, 01:25 PM
Hello Daryl,

The code in the KB article does exactly what you want. When you click on Save button and no subject is inserted in the TextBox - an alert appears, the Insert is cancelled and the inline form stays opened until you enter a subject.

Please take a look at the attached sample project that demonstrates the issue.

All the best,
Veronica Milcheva
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Alan
Top achievements
Rank 1
answered on 07 Mar 2011, 01:45 PM
Hi Veronica,

Thank you for the demo and I can confirm that it does work, however when I try to implement it within my code, the event doesn't fire.

Here's aspx code:

<telerik:RadScheduler ID="radScheduler" runat="server" DayEndTime="19:00:00" FirstDayOfWeek="Monday"
    LastDayOfWeek="Sunday" OverflowBehavior="Expand" SelectedView="WeekView" ShowAllDayRow="True"
    ShowFooter="False" Skin="Windows7" WorkDayEndTime="19:00:00" OnClientAppointmentClick="OnClientAppointmentClick"
    OnClientTimeSlotClick="OnClientTimeSlotClick" ShowViewTabs="False" CustomAttributeNames="Task, FileCode, DocketNo"
    AdvancedForm-EnableCustomAttributeEditing="true" AllowInsert="False" OnTimeSlotCreated="radScheduler_TimeSlotCreated"
    OnFormCreated="radScheduler_FormCreated" StartInsertingInAdvancedForm="false"
    EnableViewState="false" EnableDescriptionField="true" EnableCustomAttributeEditing="true"
    Localization-AdvancedSubject="Code Center" OnAppointmentContextMenuItemClicked="radScheduler_AppointmentContextMenuItemClicked"
    EnableExactTimeRendering="true" OnNavigationComplete="radScheduler_NavigationComplete" OnClientFormCreated="OnClientFormCreated">
    <AdvancedForm Modal="True" />
    <Localization AdvancedSubject="Code Center"></Localization>
    <TimelineView UserSelectable="False" />
    <MonthView UserSelectable="False" />
    <AppointmentContextMenus>
        <telerik:RadSchedulerContextMenu ID="contextMenu" runat="server">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Negate Timesheet" Value="NegateCommand">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadSchedulerContextMenu>
    </AppointmentContextMenus>
    <AppointmentContextMenuSettings Skin="Windows7" />
</telerik:RadScheduler>

Javascript:

<script type="text/javascript">
    //<![CDATA[
    var selectedApt;
    var activeTimeslot;
    var copiedApt;
    var timeSlot;
    var installDate = new Date("<%= installDate %>");
 
    function rowDropping(sender, eventArgs) {
        // Fired when the user drops a TreeView node
        var node = eventArgs.get_sourceNode();
        var text = node.get_text();
 
        var currentObject = node.get_parent();
 
        while (currentObject != null) {
            // get_parent() will return null when we reach the treeview
            if (currentObject.get_parent() != null) {
                document.getElementById('<%= fileCodeHidden.ClientID %>').value = currentObject.get_text() + "," + currentObject.get_value();
            }
            currentObject = currentObject.get_parent();
        }
 
        var tasks = $find("<%= rcbTaskList.ClientID %>");
        document.getElementById('<%= subjectHidden.ClientID %>').value = text + "," + node.get_value();
 
        if (tasks != null) {
            document.getElementById('<%= taskNameHidden.ClientID %>').value = tasks.get_value() + "," + tasks.get_text();
        }
 
        var htmlElement = eventArgs.get_htmlElement();
        var scheduler = $find('<%= radScheduler.ClientID %>');
        //debugger;
 
        if (isPartOfSchedulerAppointmentArea(htmlElement)) {
            // The node was dropped over the scheduler appointment area
 
            var timeSlot = scheduler.get_activeModel().getTimeSlotFromDomElement(htmlElement)
 
            var startDate = new Date(timeSlot.get_startTime());
            if (installDate <= startDate) {
                scheduler.showInsertFormAt(timeSlot);
            }
        }
        else {
            // The node was dropped elsewhere on the document
            eventArgs.set_cancel(true);
        }
    }
 
    function isPartOfSchedulerAppointmentArea(htmlElement) {
        // Determines if an html element is part of the scheduler appointment area
        return $telerik.$(htmlElement).parents().is("div.rsContent");
    }
 
    function onRowDoubleClick(sender, args) {
        sender.get_masterTableView().editItem(args.get_itemIndexHierarchical());
    }
 
    function OnClientAppointmentClick(sender, eventArgs) {
        if (eventArgs.get_appointment()) {
            selectedApt = eventArgs.get_appointment();
        }
    }
 
    function OnClientTimeSlotClick(sender, eventArgs) {
        if (eventArgs.get_targetSlot()) {
            activeTimeslot = eventArgs.get_targetSlot();
        }
    }
 
    function onKeyDown(event) {
        // current pressed key
        var pressedKey = String.fromCharCode(event.keyCode).toLowerCase();
 
        if (event.ctrlKey && pressedKey == "c") {
            copiedApt = selectedApt;
        }
 
        if ((event.ctrlKey && pressedKey == "v") && copiedApt && activeTimeslot) {
            var scheduler = $find('<%= radScheduler.ClientID %>');
 
            if (copiedApt && copiedApt.get_attributes().getAttribute("CostCenterID")) {
                document.getElementById('<%= subjectHidden.ClientID %>').value = copiedApt.get_subject() + "," + copiedApt.get_attributes().getAttribute("CostCenterID");
                document.getElementById('<%= taskNameHidden.ClientID %>').value = copiedApt.get_attributes().getAttribute("TaskID") + "," + copiedApt.get_attributes().getAttribute("Task");
            }
 
            if (copiedApt && copiedApt.get_attributes().getAttribute("CompanyID")) {
                document.getElementById('<%= companyHidden.ClientID %>').value = copiedApt.get_attributes().getAttribute("CompanyID")
            }
 
            var endTime = new Date(activeTimeslot.get_startTime());
            endTime.setTime(endTime.getTime() + copiedApt.get_duration());
 
            document.getElementById('<%= hiddenEndTime.ClientID %>').value = endTime.format("D") + " " + endTime.format("HH:mm:ss");
 
            if (copiedApt && copiedApt.get_attributes().getAttribute("FileCode")) {
                document.getElementById('<%= fileCodeHidden.ClientID %>').value = copiedApt.get_attributes().getAttribute("FileCode") + "," + copiedApt.get_attributes().getAttribute("FileCodeID");
            }
 
            if (copiedApt && copiedApt.get_attributes().getAttribute("DocketNo")) {
                document.getElementById('<%= docketNoHidden.ClientID %>').value = copiedApt.get_attributes().getAttribute("DocketNo");
            }
 
            scheduler.showInsertFormAt(activeTimeslot);
 
            activeTimeslot = null;
        }
    }
 
    //Testing
    function OnClientFormCreated(sender, args) {
        var $ = $telerik.$;
        $(".rsAptEditConfirm").bind({
            click: function () {
                var subject = $('.rsAptEditTextareaWrapper').children();
                var text = subject.val();
                if (text == '') {
                    alert('Please insert a subject!');
                    return false;
                }
            }
        });
    }
    //]]>
</script>

For some reason when I drag the appointment to create it, OnClientFormCreated is not fired even though the inline form is created.

Thank you for your help,

Daryl
0
Veronica
Telerik team
answered on 09 Mar 2011, 05:03 PM
Hello Daryl,

Could you please be more specific on "For some reason when I drag the appointment to create it, OnClientFormCreated is not fired..." . From where did you drag the appointment? Could you please send me a runnable example so I can inspect it and help you?

Thank you!

Greetings,
Veronica Milcheva
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Alan
Top achievements
Rank 1
answered on 10 Mar 2011, 09:29 AM
Sorry if that was a little cryptic.

Basically I have the drag & drop example, I noticed why it's not being fired and if still required I'll send you a demo.

It's because I also have the server-side OnFormCreated event. I can't really remove OnFormCreated's server side event, so I'll probably have to work around this.

Any ideas?

Thanks,
Daryl
0
Accepted
Veronica
Telerik team
answered on 10 Mar 2011, 10:49 AM
Hi Daryl,

Yes, you are absolutely right that the client-side event OnClientFormCreated will not fire if we are subscribing to the server event OnFormCreated too. The workaround is to put the logic in the pageLoad event instead of the OnClientFormCreated:

function pageLoad() {
            var $ = $telerik.$;
            $(".rsAptEditConfirm").bind({
                click: function() {
                    var subject = $('.rsAptEditTextareaWrapper').children();
                    var text = subject.val();
                    if (text == '') {
                        alert('Please insert a subject!');
                        return false;
                    }
                }
            });
        }
 
Regards,
Veronica Milcheva
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Tags
Scheduler
Asked by
Alan
Top achievements
Rank 1
Answers by
Veronica
Telerik team
Alan
Top achievements
Rank 1
Share this question
or