Scheduler Add Appointment using InlineInsertTemplate without clicking Save Button

4 posts, 0 answers
  1. Ei Wai
    Ei Wai avatar
    56 posts
    Member since:
    Jul 2014

    Posted 19 Aug 2014 Link to this post

    Hi,

    I am using telerik version 2013.3.1324.35.  I tried to insert appointment without clicking any button. Please see attached image for example. It worked fine if I use tab key after I fill in data. I would like it to be save and show data in schedule when I click on another timeslot after I fill in data. 




     Thanks in advance.

    Best regards,
    Ei 
  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 21 Aug 2014 Link to this post

    Hi,

    Could you please send us your sample to investigate it locally and try to give you a suggestion how the desired behavior could be implemented.

    Regards,
    Peter Filipov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ei Wai
    Ei Wai avatar
    56 posts
    Member since:
    Jul 2014

    Posted 02 Sep 2014 Link to this post

    Hi Peter,

    I am sorry for delay. Please see below for sample since I cannot attached sample project.  

    aspx: 
    <asp:Panel ID="pnlMainSch" runat="server">
           <table width="100%" style="table-layout: fixed;">
                  <tr>
                   <td>
                       <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Skin="Sunset" SplitBarsSize="4">
                           <telerik:RadPane ID="ContentPane2" runat="server" Width="85%">
                               <asp:Panel ID="pnlSchedule" runat="server">
                                   <table style="table-layout: fixed; width: 100%;">
                                       <tr>
                                           <td>
                                               <telerik:RadTextBox runat="server" ID="lblHiddenLoc" Style="display: none;">
                                               </telerik:RadTextBox>
                                               <telerik:RadScheduler runat="server" ID="RadScheduler1" TimelineView-NumberOfSlots="7"
                                                   TimelineView-UserSelectable="true" RowHeight="50px" Skin="Sunset" SelectedView="TimelineView" WeekView-GroupingDirection="Vertical" MonthView-GroupingDirection="Vertical"
                                                   DayView-GroupingDirection="Vertical" OnClientTimeSlotClick="insertAppointment"
                                                   OnClientAppointmentClick="editAppointment" DataDescriptionField="Description"
                                                   DataKeyField="SID" DataSubjectField="Subject" EnableCustomAttributeEditing="true"
                                                   CustomAttributeNames="EmployeeID" EnableCustomAttribute="true" DataStartField="Start"
                                                   DataEndField="End" AdvancedForm-EnableCustomAttributeEditing="true" ShowFooter="false" TimeZoneOffset="00:00:00" DayStartTime="00:00:00" TimelineView-StartTime="00:00:00"
                                                   TimelineView-EndTime="23:59:00" OnClientAppointmentInserting="OnClientAppointmentInserting" DayEndTime="23:59:00" FirstDayOfWeek="Monday" LastDayOfWeek="Sunday" EnableDescriptionField="true" AppointmentStyleMode="Default" OnDataBound="RadScheduler1_DataBound" OnNavigationCommand="RadScheduler1_NavigationCommand" OnAppointmentInsert="RadScheduler1_AppointmentInsert" OverflowBehavior="Auto"  OnFormCreated="RadScheduler1_FormCreated" OnFormCreating="RadScheduler1_FormCreating" OnResourceHeaderCreated="RadScheduler1_ResourceHeaderCreated" ShowNavigationPane="False">
                                                   <TimelineView HeaderDateFormat="dddd , dd/MM/yyyy " ColumnHeaderDateFormat="dddd, dd/MM/yyyy" />
                                                   <TimeSlotContextMenuSettings EnableDefault="false" />
                                                   <AppointmentContextMenuSettings EnableDefault="false" />
                                                   <ResourceHeaderTemplate>
                                                       <asp:Panel ID="ResourceImageWrapper" runat="server">
                                                           <table>
                                                               <tr>
                                                                   <td align="left">
                                                                       <asp:Label ID="lblText" runat="server" />
                                                                   </td>
                                                               </tr>
                                                           </table>
                                                       </asp:Panel>
                                                   </ResourceHeaderTemplate>
                                                   <ResourceTypes>
                                                       <telerik:ResourceType ForeignKeyField="EmployeeID" KeyField="EmployeeID" Name="Employee" TextField="EmployeeName" />
                                                   </ResourceTypes>
                                                   <InlineInsertTemplate>
                                                       <div id="InlineInsertTemplate">
                                                           <div>
                                                               <telerik:RadTextBox ID="TitleTextBox" SkinID="txtTitleBox" runat="server"      Width="50%" Text='<%# Bind("Subject") %>'>
                                                               <ClientEvents OnValueChanged="PreventPostback" OnMoveUp="PreventPostback" />
                                                               </telerik:RadTextBox>
                                                               <asp:LinkButton ID="InLineCloseButton" runat="server" CausesValidation="False" CommandName="Cancel" CssClass="rsClose">
                                                                   <asp:Image runat="server" ID="Image7" ImageUrl="Images/cancel.png" AlternateText="cancel" Height="10px" Width="10px" />
                                                               </asp:LinkButton>
                                                               <br />
                                                               <asp:Label ID="Label3" runat="server" Text="eg: (0800-1800)(AL)" ForeColor="Red"></asp:Label>
                                                           </div>
                                                       </div>
                                                   </InlineInsertTemplate>
                                                   <TimeSlotContextMenuSettings EnableDefault="true" />
                                                   <AppointmentContextMenuSettings EnableDefault="true" />
                                                   <Localization HeaderTimeline="Work week" />
                                                   <ExportSettings OpenInNewWindow="true" FileName="SchedulerExport">
                                                       <Pdf PageTitle="Schedule" Author="Telerik" Creator="Telerik" Title="Schedule" />
                                                   </ExportSettings>
                                               </telerik:RadScheduler>
                                           </td>
                                       </tr>
                                   </table>
                               </asp:Panel>
                           </telerik:RadPane>
                       </telerik:RadSplitter>
                   </td>
               </tr>
               <tr>
                   <td>
                       <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
                       </telerik:RadWindowManager>
                       <asp:HiddenField ID="locHidden" runat="server" />
                       <asp:HiddenField ID="locHidden2" runat="server" />
                       <telerik:RadWindow runat="server" ID="rWAlert" Behaviors="Close" KeepInScreenBounds="true"
                           ReloadOnShow="true" Title="Alert" Overlay="true" Modal="true" Width="320px" Skin="Telerik"
                           Height="100px" EnableShadow="true">
                           <ContentTemplate>
                               <asp:Label ID="lblMsg" runat="server" Text="" CssClass="lblErrorMain"></asp:Label>
                           </ContentTemplate>
                       </telerik:RadWindow>
                   </td>
               </tr>
               <tr>
                   <td>
                   </td>
               </tr>
           </table>
       </asp:Panel>
       <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
           <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="pnlMainSch">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="pnlMainSch" LoadingPanelID="AjaxLoadingPanel" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="pnlMainSch" LoadingPanelID="AjaxLoadingPanel" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
           </AjaxSettings>
       </telerik:RadAjaxManager>
       <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Skin="Sunset" />

    JavaScript 

       function insertAppointment(sender, e) {
        debugger;
     
        var slot = sender.get_activeModel().getTimeSlotFromDomElement(e.get_domEvent().target);
        var slotElement = $telerik.$(e.get_targetSlot().get_domElement());
     
        if (slotElement.is(".Disabled") || slotElement.parent().is(".Disabled")) {
            eventArgs.set_cancel(true);
        }
        else {
     
            startTime = e.get_targetSlot().get_startTime();
            endTime = new Date(startTime);
            endTime.setMinutes(endTime.getMinutes() + 45);
            resources = slot._resource;
            sender.showInsertFormAt(slot);
        }
     
    }
     
    function OnClientTimeSlotContextMenu(sender, args) {
        var date = new Date();
        $find("RadScheduler1_SchedulerAppointmentContextMenu").get_items().getItem(0).set_enabled(false);
    }
     
     
    // prevent inserting in a disabled slot
    function OnClientAppointmentInserting(sender, eventArgs) {
        ;
        var slotElement = $telerik.$(eventArgs.get_targetSlot().get_domElement());
     
        if (slotElement.is(".Disabled") || slotElement.parent().is(".Disabled")) {
            eventArgs.set_cancel(true);
        }
    }
     
    function editAppointment(sender, e) {
        var apt = e.get_appointment();
        sender.editAppointmentWithConfirmation(apt);
    }
     
    function pageLoad() {
     
     
        var height = getDocHeight();
        var scheduler = $find('<%=RadScheduler1.ClientID %>');
        scheduler.set_height("" + height - 120 + "px");
     
        $telerik.$(".Disabled").bind("contextmenu", function (e) {
            return false;
        });
     
        $telerik.$(".rsAptEditSizingWrapper").bind("dblclick", function (e) { e.stopPropagation(); });
     
     
     
        //to fix alignment not correct for resource and schedule
        var $ = $telerik.$;
        var rsVerticalHeaderTableTh = $(".rsVerticalHeaderTable th");
        var rsAllDayTableTr = $(".rsAllDayTable tr");
        rsAllDayTableTr.each(function (index, elem) {
            var h = $(elem).height() - 1;
            if (rsVerticalHeaderTableTh[index] != null)
                rsVerticalHeaderTableTh[index].style.cssText = "height:" + h + "px";
        });
     
    }
     
    function getDocHeight() {
        //utility function to find dimensions of page
        var D = document;
        return Math.max(
           Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
           Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
           Math.max(D.body.clientHeight, D.documentElement.clientHeight)
       );
    }
     
    function getDocWidth() {
        //utility function to find dimensions of page
        var D = document;
        return Math.max(
           Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
           Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
           Math.max(D.body.clientWidth, D.documentElement.clientWidth)
       );
    }
     
     
     
    function onAppointmentMoveStart(sender, eventArgs) {
        eventArgs.set_cancel(true);
     
    }
     
     
     
    function onRowDropping(sender, args) {
    }
     
     
    function PreventPostback(sender, e) {
        // Call This function to insert appointment when TabOut from Inline textbox
        var scheduler = $find('<%= RadScheduler1.ClientID %>');
     
        //                var cboSkill = $find("ctl00_cphContent_RadScheduler1_Form_cboInsertSkillInline");
        //                var skillid = cboSkill._value;
     
        var skillid = "";
        var newAppointment = new Telerik.Web.UI.SchedulerAppointment();
        newAppointment.set_start(startTime);
        newAppointment.set_end(endTime);
        newAppointment.set_subject(sender._lastSetTextBoxValue + "(" + skillid + ")" + "()" + "(" + resources._key + ")");
        
        newAppointment.set_resource = resources;
     
        var aptAttributes = newAppointment.get_attributes();
        aptAttributes.setAttribute("Skill", skillid);
        scheduler.insertAppointment(newAppointment);
        scheduler.rebind();
    }
     
    var startTime;
    var endTime;
    var resources;
     
    function realPostBack(eventTarget, eventArgument) {
        debugger;
        __doPostBack(eventTarget, eventArgument);
    }
     
    function OnClientAppointmentResizing(sender, eventArgs) {
        eventArgs.set_cancel(true);
    }


    .cs file 

     

    protected void Page_Load(object sender, EventArgs e)
          {
              if (!IsPostBack)
              {
     
                  RadScheduler1.SelectedDate = DateTime.Now;
                  RadScheduler1.GroupBy = "Employee";
                  RadScheduler1.GroupingDirection = GroupingDirection.Vertical;
     
                  //Bind Resource
                  ResourceTypeCollection coll = RadScheduler1.ResourceTypes;
                  ResourceType emp = coll.FindByName("Employee");
                  List<tbl_EmployeeMaster> empList = GetEmployeeByLocationForScheduleResource(ConfigurationManager.ConnectionStrings["TestConnectionString"].ToString());
     
                  emp.DataSource = empList;
     
     
                  Bind(DateTime.Now);
              }
          }
     
         
          private void Bind(DateTime dt)
          {
              string connStr = ConfigurationManager.ConnectionStrings["TestConnectionString"].ToString();
              //Bind Schedule
              List<tbl_Appointment> sch_list = GetScheduleByDateFor7Days(dt, connStr);
     
              RadScheduler1.DataSource = sch_list;
              RadScheduler1.Rebind();
     
              RadScheduler1.AllowInsert = true;
     
     
          }
     
          protected void RadScheduler1_ResourceHeaderCreated(object sender, ResourceHeaderCreatedEventArgs e)
          {
              Label txtLabel = e.Container.FindControl("lblText") as Label;
              txtLabel.Text = e.Container.Resource.Text;
     
     
     
          }
     
     
         
          protected void RadScheduler1_DataBound(object sender, EventArgs e)
          {
     
          }
     
     
          
     
          protected void RadScheduler1_NavigationCommand(object sender, SchedulerNavigationCommandEventArgs e)
          {
              if (e.Command == SchedulerNavigationCommand.SwitchToMonthView)
              {
                  RadScheduler1.RowHeight = Unit.Pixel(50);
              }
              else if (e.Command == SchedulerNavigationCommand.SwitchToTimelineView)
              {
                  RadScheduler1.RowHeight = Unit.Pixel(50);
              }
              else
              {
                  RadScheduler1.RowHeight = Unit.Pixel(50);
              }
          }
     
          protected void RadScheduler1_FormCreated(object sender, SchedulerFormCreatedEventArgs e)
          {
              Session["ContainerMode"] = e.Container.Mode;
     
     
              if (e.Container.Mode == SchedulerFormMode.Insert)
              {
                  RadTextBox txtTitleTextBox = e.Container.FindControl("TitleTextBox") as RadTextBox;
     
                  if (txtTitleTextBox.Text.Length <= 0)
                  {
                      txtTitleTextBox.Text = "(  )(  )";
                  }
              }
     
     
     
          }
          
          protected void RadScheduler1_AppointmentInsert(object sender, AppointmentInsertEventArgs e)
          {
              string desc = e.Appointment.Description;
              string timing = e.Appointment.Subject;
              Resource emp_resource = e.Appointment.Resources.GetResourceByType("Employee");
              //Resource emp_resource = RadScheduler1.Resources.GetResourceByType("Employee");
              string employeeID = string.Empty;
              RadScheduler schedulerTemp = sender as RadScheduler;
     
              if (emp_resource != null)
                  employeeID = emp_resource.Key.ToString();
              else
              {
                  emp_resource = schedulerTemp.Resources.GetResourceByType("Employee");
                  employeeID = emp_resource.Key.ToString();
              }
     
              char[] splitter = new char[] { '-' };
              //int dayChange = DayChangeBLL.GetDayChange(Session["CurrentUserCompanyID"].ToString()
              //    , ConfigurationManager.ConnectionStrings["AnytimeConnectionString"].ToString(), employeeID);
     
     
              if (!timing.Contains("(") || !timing.Contains(")"))
              {
                  e.Cancel = true;
                  lblMsg.Text = " Input Format Wrong! Do not delete parenthesis.";
                  RadAjaxManager.GetCurrent(Page).ResponseScripts.Add(String.Format("$find('{0}').show();", rWAlert.ClientID));
              }
              else
              {
                  string locID = string.Empty;
     
                  
                  string reasonCode = string.Empty;
     
                  
                  string skillid = string.Empty;
                  string skilltxt = string.Empty;
                  
                  string inoutStr = e.Appointment.Subject;
                  string input = inoutStr.Trim();
                  string[] output = input.Split(new char[] { '(', ')' });
     
                  if (output.Length != 11)
                  {
                      e.Cancel = true;
                      lblMsg.Text = " Input Format Wrong! Do not delete parenthesis.";
                      RadAjaxManager.GetCurrent(Page).ResponseScripts.Add(String.Format("$find('{0}').show();"
                          , rWAlert.ClientID));
                  }
                  else
                  {
                      inoutStr = output[1].Trim();
                      reasonCode = output[3].Trim().ToUpper();
                      skillid = output[5].Trim();
                      skilltxt = output[7].Trim();
                      employeeID = output[9].Trim();
                  }
     
                  if (inoutStr.Length > 0)
                  {
                      // Here I will save my data to Database
                      string msg = InsertOrUpdateSchedule(oTblSchedule
                          , ConfigurationManager.ConnectionStrings["TestConnectionString"].ToString());
     
                      if (msg.Equals("Save") || msg.Equals("Update"))
                      {
                          RadScheduler1.DataSource = null;
                          Bind(DateTime.Now);
                      }
     
                  }
              }
     
          }

    From the above sample application, data will be save into Database and show inside scheduler when I use Tab key. But I would like it to be save and show on scheduler when I click on another timeslot after I key in data. Currently, I only save in database but not shown on scheduler unless I refresh page. Will that be possible?   Thank you for your help. 


    Best regards,
    Ei 



  5. Ei Wai
    Ei Wai avatar
    56 posts
    Member since:
    Jul 2014

    Posted 02 Sep 2014 Link to this post

    Hi, 

    I got the answer. Sorry for trouble you. It is just that my ajaxfied control is wrong. The above code worked as I wanted. Thank you for your kind assistance. 

    Best regards,
    Ei
Back to Top