GridDateTimeColumn InPlace Edit Mode with tracking changes and ajax update

[Serban]

I am trying to implement the following sample: http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/editondblclick/defaultvb.aspx

I would like this to work with just two DateTimePickers as the only two editable fields.

The problem I believe is the javascript 'GridCreated' function which uses the .onchange trigger of the textboxes. Since the DateTimePickers are a little complex they appear to have 3 inputs per picker.  The 'TrackChanges' doesnt seem to be firing at all.

Here is my code:

<form id="form1" runat="server">

   <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

       <Scripts>

           <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

           <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

           <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

       </Scripts>

   </telerik:RadScriptManager>

   <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

           <AjaxSettings>

               <telerik:AjaxSetting AjaxControlID="timesheetView">

                   <UpdatedControls>

                       <telerik:AjaxUpdatedControl ControlID="timesheetView" />

                   </UpdatedControls>

               </telerik:AjaxSetting>

           </AjaxSettings>

   </telerik:RadAjaxManager>

      

   <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="WebBlue">

   </telerik:RadSkinManager>

   <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"  

               Transparency="25" Width="75px">   

               <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'  

                   style="border: 0px;" />  

   </telerik:RadAjaxLoadingPanel>  

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

      <script type="text/javascript">

          var hasChanges, inputs, dropdowns, editedRow;

          function RowClick(sender, eventArgs) {

              if (editedRow != null && hasChanges) {

                  if (confirm("Update changes?")) {

                      hasChanges = false;

                      $find("<%= timesheetView.MasterTableView.ClientID %>").updateItem(editedRow);

                  }

                  else {

                      hasChanges = false;

                  }

              }

          }

          function RowDblClick(sender, eventArgs) {

              if (editedRow && hasChanges) {

                  if (confirm("Update changes?")) {

                      hasChanges = false;

                      $find("<%= timesheetView.MasterTableView.ClientID %>").updateItem(editedRow);

                  }

                  else {

                      hasChanges = false;

                  }

              }

              editedRow = eventArgs.get_itemIndexHierarchical();

              $find("<%= timesheetView.MasterTableView.ClientID %>").editItem(editedRow);

          }

           function GridCreated(sender, eventArgs)

           {           

               var gridElement = sender.get_element();

               var elementsToUse = [];

               inputs = gridElement.getElementsByTagName("input");

               for (var i = 0; i < inputs.length;i++)

               {

                   var lowerType = inputs[i].type.toLowerCase();

                   if(lowerType == "hidden" || lowerType == "button")

                   {

                       continue;

                   }

                   var id = inputs[i].id; 
                          // This filters only the date time pickers

                   if ((id.indexOf("dateInput_text") != -1) == true) {

                       Array.add(elementsToUse, inputs[i]);

                       inputs[i].onchange = TrackChanges;

                       hasChanges = true;

                   }

               }

                 

               dropdowns = gridElement.getElementsByTagName("select");

               for (var i = 0; i < dropdowns.length;i++)

               {

                   dropdowns[i].onchange = TrackChanges;

               }

               setTimeout(function(){if(elementsToUse[0])elementsToUse[0].focus();},100);

           }

          function TrackChanges(e) {

              hasChanges = true;

          }

  </script>

  </telerik:RadCodeBlock>

   <div>

           <telerik:RadGrid Width="500px" ID="timesheetView" ShowStatusBar="True" AllowSorting="True" PageSize="7" GridLines="None" AllowPaging="True"

           runat="server" AutoGenerateColumns="false" EnableAJAX="True" EnableAJAXLoadingTemplate="True"     

               LoadingTemplateTransparency="25" AllowAutomaticUpdates="true" >      

            <MasterTableView AllowAutomaticUpdates="true" EditMode="InPlace">

              <Columns>

              <telerik:GridBoundColumn UniqueName="EventDate" DataField="EventDate" HeaderText="Date" ReadOnly="True" HeaderStyle-Width="25%" />

                <telerik:GridBoundColumn UniqueName="Location" DataField="Location" HeaderText="Location" ReadOnly="True" HeaderStyle-Width="25%" />

                <telerik:GridDateTimeColumn PickerType="TimePicker" UniqueName="InTime" DataType="System.DateTime" DataFormatString="{0:t}" DataField="InTime" HeaderText="In" ReadOnly="False" HeaderStyle-Width="25%" />

                <telerik:GridDateTimeColumn PickerType="TimePicker" UniqueName="OutTime" DataType="System.DateTime" DataFormatString="{0:t}" DataField="OutTime" HeaderText="Out" ReadOnly="False" HeaderStyle-Width="25%" />

      

              </Columns>

            </MasterTableView>

           <ClientSettings>

              <ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick"

                  OnGridCreated="GridCreated" />

          </ClientSettings>

   </telerik:RadGrid>

   </div>

   </form>

Code Behind: ( uses two classes that Im using as an ObjectDataSource)

Private Sub timesheetView_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles timesheetView.NeedDataSource
    Dim Timesheet As New Timesheet
    Timesheet.AddEntry("OFFICE ADMIN", DateTime.Now.AddHours(-1), DateTime.Now.AddHours(2))
    Timesheet.AddEntry("OFFICE XC", DateTime.Now.AddHours(-6), DateTime.Now.AddHours(3))
    Timesheet.AddEntry("OFFICE 9", DateTime.Now.AddHours(-4), DateTime.Now.AddHours(9))
    Timesheet.AddEntry("OFFICE 8", DateTime.Now.AddHours(-2), DateTime.Now.AddHours(7))
    timesheetView.DataSource = Timesheet.List
End Sub

How do I get GridDateTimeColumn to work in InPlace edit mode? I would possibly like to refresh the entire grid when the DateTimePicker has been changed.

Thankyou.

Serban.

[Marin]

Hi Serban,

We have answered the question in the support ticket that you opened. We will continue the communication there.

Kind regards,
Marin
the Telerik team