Scheduler Add Appointment using InlineInsertTemplate without clicking Save Button

[Ei Wai]

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 

[Peter Filipov]

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

 

 

[Ei Wai]

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 

[Ei Wai]

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