Validate Inline Appointment insert client-side

9 posts, 1 answers
  1. Alan
    Alan avatar
    107 posts
    Member since:
    Oct 2010

    Posted 02 Mar 2011 Link to this post

    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
  2. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 02 Mar 2011 Link to this post

    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!
  3. Alan
    Alan avatar
    107 posts
    Member since:
    Oct 2010

    Posted 02 Mar 2011 Link to this post

    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
  4. Alan
    Alan avatar
    107 posts
    Member since:
    Oct 2010

    Posted 04 Mar 2011 Link to this post

    Anyone?
  5. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 07 Mar 2011 Link to this post

    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!
  6. Alan
    Alan avatar
    107 posts
    Member since:
    Oct 2010

    Posted 07 Mar 2011 Link to this post

    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
  7. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 09 Mar 2011 Link to this post

    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!
  8. Alan
    Alan avatar
    107 posts
    Member since:
    Oct 2010

    Posted 10 Mar 2011 Link to this post

    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
  9. Answer
    Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 10 Mar 2011 Link to this post

    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!
Back to Top