Validate Inline Appointment insert client-side

[Alan]

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

[Veronica]

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

[Alan]

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

[Alan]

Anyone?

[Veronica]

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

[Alan]

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

[Veronica]

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

[Alan]

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

[Veronica]

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