how to find a raddatepicker within the radgrid during itemdatabound server event ?

8 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    33 posts
    Member since:
    Apr 2009

    Posted 10 Jun 2009 Link to this post

    I have the following code (to find) the raddatepicker control within the radgrid, so that I can attach a onblur event to it. I am getting object reference exception within the c# code. Can someone please tell me what am I doing wrong ? these statements always return null -   RadDatePicker StartDate = (RadDatePicker)e.Item.FindControl("radBillPeriodStartDate1");  
         <telerik:RadGrid ID="gridInvLines" AllowPaging="False" Skin="Office2007"   
            runat="server" AutoGenerateColumns="False" DataSourceID="odsInvLines"   
            GridLines="None"  OnItemCommand="gridInvLines_ItemCommand" OnItemDataBound="gridInvLines_ItemDataBound" ShowFooter="True">  
            <ClientSettings > 
             <ClientEvents OnKeyPress="disableEnterKey" OnPopUpShowing="PopUpShowing" /> 
            </ClientSettings> 
            <MasterTableView DataKeyNames="LINE_NUMBER" DataSourceID="odsInvLines" EditMode="PopUp" InsertItemDisplay="Top"  AllowAutomaticInserts="true" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true"  CommandItemDisplay="Top" CommandItemSettings-AddNewRecordText="Add New Line">  
                <Columns> 
                    
                            <telerik:GridTemplateColumn HeaderText="Billing Period Start Date" UniqueName="BEGIN_BILLING_PERIOD_COLUMN" 
                        EditFormColumnIndex="1">  
                        <HeaderStyle Width="62px" HorizontalAlign="Center"  /> 
                        <ItemTemplate> 
                            <asp:Label runat="server" ID="lblBillingPeriodStartDate" Text='<%# Eval("BEGIN_BILLING_PERIOD", "{0:D}") %>'></asp:Label> 
                        </ItemTemplate> 
                        <EditItemTemplate> 
                            <telerik:RadDatePicker  ID="radBillPeriodStartDate1" Skin="Office2007" Style="vertical-align: middle;" 
                                runat="server"   
                                DbSelectedDate='<%# Bind("BEGIN_BILLING_PERIOD", "{0:d}") %>' 
                                MinDate='<%# DateTime.Now.AddMonths(Convert.ToInt32(ConfigurationManager.AppSettings["BillingMin"].ToString()))%>' 
                                MaxDate='<%# DateTime.Now.AddMonths(Convert.ToInt32(ConfigurationManager.AppSettings["BillingMax"].ToString()))%>' 
                                    
                                > 
                                <Calendar ShowRowHeaders="false">  
                                    <OutOfRangeDayStyle Font-Strikeout="true" ForeColor="red" /> 
                                </Calendar> 
                                <DateInput ID="DateInput1" runat="server" InvalidStyle-BorderColor="red" InvalidStyle-ForeColor="red" EmptyMessageStyle-BorderColor="red" EmptyMessage="  ">  
                                    <ClientEvents OnKeyPress="disableEnterKey"    /> 
                                </DateInput> 
                            </telerik:RadDatePicker> 
                            <asp:RequiredFieldValidator ID="rfvBillPeriodstartDate" runat="server" ControlToValidate="radBillPeriodStartDate1" 
                                ErrorMessage="Billing Period Start Date must be within the range of 18 months in the past or 2 months in the future">*</asp:RequiredFieldValidator> 
                        </EditItemTemplate> 
                    </telerik:GridTemplateColumn> 
                      
                    <telerik:GridTemplateColumn HeaderText="Billing Period End Date" UniqueName="END_BILLING_PERIOD_COLUMN" 
                        EditFormColumnIndex="1">  
                        <HeaderStyle Width="62px" HorizontalAlign="Center"  /> 
                        <ItemTemplate> 
                            <asp:Label runat="server" ID="lblBillingPeriodEndDate" Text='<%# Eval("END_BILLING_PERIOD", "{0:D}") %>'></asp:Label> 
                        </ItemTemplate> 
                        <EditItemTemplate> 
                            <asp:TextBox ID="txtDate1" runat="server"></asp:TextBox> 
                            <telerik:RadDatePicker ID="radBillPeriodEndDate1"  Skin="Office2007" Style="vertical-align: middle;" 
                                runat="server" DbSelectedDate='<%# Bind("END_BILLING_PERIOD", "{0:d}") %>' 
                                MinDate='<%# DateTime.Now.AddMonths(Convert.ToInt32(ConfigurationManager.AppSettings["BillingMin"].ToString()))%>' 
                                MaxDate='<%# DateTime.Now.AddMonths(Convert.ToInt32(ConfigurationManager.AppSettings["BillingMax"].ToString()))%>' 
                                > 
                                <Calendar ShowRowHeaders="false">  
                                    <OutOfRangeDayStyle Font-Strikeout="true" ForeColor="red" /> 
                                </Calendar> 
                                <DateInput ID="DateInput2" runat="server" InvalidStyle-BorderColor="red" InvalidStyle-ForeColor="red" EmptyMessageStyle-BorderColor="red" EmptyMessage="  ">  
                                    <ClientEvents OnKeyPress="disableEnterKey" /> 
                                </DateInput> 
                            </telerik:RadDatePicker> 
                            <asp:RequiredFieldValidator ID="rfvBillPeriodEndDate" runat="server" ControlToValidate="radBillPeriodEndDate1" 
                                ErrorMessage="Billing Period End Date must be within the range of 18 months in the past or 2 months in the future">*</asp:RequiredFieldValidator> 
                            <asp:CompareValidator ID="cvEndDate" runat="server" ControlToValidate="radBillPeriodEndDate1" 
                                ControlToCompare="radBillPeriodStartDate1" Display="None" Operator="GreaterThanEqual" 
                                Type="Date" ErrorMessage="Billing Periond End Date must be great than or equal to Billing Period Start Date">*</asp:CompareValidator> 
                        </EditItemTemplate> 
                    </telerik:GridTemplateColumn> 
                    
                           </Columns> 
            
           <PopUpSettings  Modal="true" Width="600"  /> 
           </EditFormSettings> 
            </MasterTableView> 
            <ValidationSettings CommandsToValidate="PerformInsert,Update"  /> 
                        
        </telerik:RadGrid> 
     
        protected void gridInvLines_ItemDataBound(object sender, GridItemEventArgs e)  
        {  
              
     
                if (e.Item is GridDataItem)  
                {  
                 
     
     
            //both these controls return null  
             RadDatePicker StartDate = (RadDatePicker)e.Item.FindControl("radBillPeriodStartDate1");  
                    RadDatePicker EndDate   = (RadDatePicker)e.Item.FindControl("radBillPeriodEndDate1");  
     
                      StartDate.DateInput.Attributes.Add("onblur"string.Format("changeEndDate('{0}','{1}');", StartDate.ClientID, EndDate.ClientID));  
                       
                }  
        }  
     
     
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Jun 2009 Link to this post

    Hello Neeraj,

    Controls placed in the EditITemTemplate should be accessed as GridEditableItems and also these controls can be accessed only when the grid is in edit mode. The code given below should help you access the RadDatePickers:

    c#:
    protected void gridInvLines_ItemDataBound(object sender, GridItemEventArgs e)   
         { 
               if (e.Item is GridEditableItem && e.Item.IsInEditMode) 
                {                   
                    RadDatePicker StartDate = (RadDatePicker)e.Item.FindControl("radBillPeriodStartDate1");   
                    RadDatePicker EndDate   = (RadDatePicker)e.Item.FindControl("radBillPeriodEndDate1");   
      
                    StartDate.DateInput.Attributes.Add("onblur"string.Format("changeEndDate('{0}','{1}');", StartDate.ClientID, EndDate.ClientID));   
                        
                }   
         }   
      

    Thanks
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Neeraj
    Neeraj avatar
    33 posts
    Member since:
    Apr 2009

    Posted 11 Jun 2009 Link to this post

    Great , that did work. Now the onblur event is called when only when the user goes out of focus on the text box(dateinput) but not when the user clicks the calendar popup. how can I call this javascript event when the actual date is selected irrespective of the user click the popup button or entering the date in the textbox , I know there is a ondateselected event - but I cannot pass in my own parameters - right ? How can I achieve this ?
     function changeEndDate(startDateID, endDateID)  
                  {  
                    var startDateObj = $find(startDateID);   
                    var endDateObj     = $find(endDateID);   
                    var newMinDate   = startDateObj.get_selectedDate();  
                     
                   if(newMinDate && newMinDate != null)  
                           endDateObj.set_minDate(newMinDate);  
                  }  
                  
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)  
                {  
                    RadDatePicker StartDate = (RadDatePicker)e.Item.FindControl("radBillPeriodStartDate1");  
                    RadDatePicker EndDate = (RadDatePicker)e.Item.FindControl("radBillPeriodEndDate1");  
     
                    StartDate.DateInput.Attributes.Add("onblur"string.Format("changeEndDate('{0}','{1}');", StartDate.ClientID, EndDate.ClientID));  
                } 
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Jun 2009 Link to this post

    Hello Neeraj,

    The onblur client event will fire once the focus is moved from the date input of the RadDatePicker. So on selecting a date from the calendar the dateiput should be focused. Hence, a possible solution in your case would be to set focus to the DateInput on selecting a date:
    aspx:
    <telerik:RadDatePicker  ID="radBillPeriodStartDate1" Skin="Office2007" Style="vertical-align: middle;"  
                                runat="server"    
                                DbSelectedDate='<%# Bind("BEGIN_BILLING_PERIOD", "{0:d}") %>'  
                                MinDate='<%# DateTime.Now.AddMonths(Convert.ToInt32(ConfigurationManager.AppSettings["BillingMin"].ToString()))%>'  
                                MaxDate='<%# DateTime.Now.AddMonths(Convert.ToInt32(ConfigurationManager.AppSettings["BillingMax"].ToString()))%>'  
                                     
                                >  
                               <ClientEvents OnDateSelected="DateSelected" /> 
     </telerik:RadDatePicker>  

    js:
    function DateSelected(sender, eventArgs) 
         { 
            var dateinput = sender.get_dateInput(); 
            dateinput.focus();      
           
         } 
    This should help fire the on blur event of the dateinput on selecting date from the calendar or typing athe date into the input.

    Hope this helps...
    Princy.
  6. Neeraj
    Neeraj avatar
    33 posts
    Member since:
    Apr 2009

    Posted 15 Jun 2009 Link to this post

    but I cannot get the id of my second control though. Here is my scenario - I have two date controls - startdate, enddate. Once user picks the startdate, this should become the mindate for the enddate control. If I use DateSelected event , how can I pass the id of the other control or how I find the other control value in the DateSelected javascript function  ?
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Jun 2009 Link to this post

    Hello Neeraj,

    You should be using the onBlur event together with the OnDateSelected event to achieve the required scenario. The onblur event of the start datepicker can be used to pass the clientID's from server to client and then set the mindate for the end datepicker, which will fire only if the dateinput is focused. On selecting a date from the calendar, the dateinput is not focused, which in turn does not fire the onBlur event. So, inorder to trigger the onblur event the dateinput can be focused on selecting a date using the onDateSelected client event of the RadDatePicker.

    Regards
    Princy.
  8. Sonny
    Sonny avatar
    3 posts
    Member since:
    Apr 2013

    Posted 02 Dec 2014 in reply to Princy Link to this post

    How would you do this with EditMode="Batch"?
  9. Eyup
    Admin
    Eyup avatar
    3007 posts

    Posted 05 Dec 2014 Link to this post

    Hello Sonny,

    Please note that Batch editing is mainly a client-side functionality and in this sense, it is a better idea to implement javascript approaches in this case. For example, there are not 10 different combos generated to edit each of the records as with EditForms or PopUp edit modes, but there is only 1 combo loaded on the server which works for ideal performance and rendering optimization when opening the edit cells on the client. In addition, creating custom edit templates with Batch editing mode may require further handling:
    (Section Handling Advanced Templates)
    http://www.telerik.com/help/aspnet-ajax/grid-batch-editing.html

    With that being said,
    you can check the aforementioned article to see how to access the editors programmatically.

    Hope this helps.


    Regards,
    Eyup
    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017