Datepicker clear script for dynamic Telerik control

5 posts, 0 answers
  1. Benjamin
    Benjamin avatar
    11 posts
    Member since:
    Oct 2007

    Posted 08 Mar 2010 Link to this post

    I have seen a similar issue and client side solution for clearing the Telerik date picker on this forum, but for a dynamically added date picker I can't see the solution. The scenario is the following:
    I have a grid where in each row a date picker sits with a clear button to remove the selected date. The grid is built from scratch in code behind and thus the client side clear action script must know which date picker to clear for each grid row.
    I ttried to build the script as a string and adding to each grid row as a literal:

    dpExpiryDatePicker = new Telerik.WebControls.RadDatePicker();
    dpExpiryDatePicker.ID = "dpExpiryDatePicker_" + nCount;
    dpExpiryDatePicker.ToolTip = "Select the date";
    dpExpiryDatePicker.Width = Unit.Pixel(90);
    dpExpiryDatePicker.MinDate = DateTime.Now.Date.AddDays(1);


    "<script>" +
    "function ClearExpiryDate()" +
    "{" +
    "   var dpDatePicker = <%=" + dpExpiryDatePicker.ClientID+ "%>;" +
    //    "var dpDatePicker = $find(\"<%=" + dpExpiryDatePicker.ClientID+ "%>\");" +
    "alert(dpDatePicker);" +
    "if(dpDatePicker != null)" +
    "{" +
    "   dpDatePicker.DateInput.Clear();" +
    "}" +
    "}" +
    "</script>";

    Can someone point out how to handle the clearing of each date picker added dynamically? Unfortunately the script above doesn't work, neither work the other commented out line. So how to achieve this?

  2. robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 08 Mar 2010 Link to this post

    First off, you should be using the commented $find line to get the RadDatePicker control.

    Second, the line that your calling to clear the RadDatePicker is incorrect. It should be this: dpDatePicker.clear()

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Benjamin
    Benjamin avatar
    11 posts
    Member since:
    Oct 2007

    Posted 09 Mar 2010 Link to this post

    thanks for a quick reply robert,

    maybe I have done something wrong but the commented out section
    "   var dpDatePicker = $find(\"<%=" + dpExpiryDatePicker.ID + "%>\");"
    returns null as the alert displays it. the stripped down version of the dynamic control creation is below
    public void CreateControls()
    {
    Telerik.WebControls.RadDatePicker dpExpiryDatePicker;
    string szScript;
    LiteralControl lcClearLiteralControl;
    TableCell tcTableCell
    TableRow trTableRow;

    trTableRow = new TableRow();




    dpExpiryDatePicker = new Telerik.WebControls.RadDatePicker();
    dpExpiryDatePicker.ID = "dpExpiryDatePicker_" + nCount;
    dpExpiryDatePicker.ToolTip = "Select the date";
    dpExpiryDatePicker.Width = Unit.Pixel(90);
    dpExpiryDatePicker.MinDate = DateTime.Now.Date.AddDays(1);
    // I left out the styling of the date picker just to have more readable code

    szScript =
    "<script>" +
    "function ClearExpiryDate()" +
    "{" +
    "   var dpDatePicker = $find(\"<%=" + dpExpiryDatePicker.ClientID+ "%>\");" +
    "alert(dpDatePicker);" +
    "if(dpDatePicker != null)" +
    "{" +
    "   dpDatePicker.DateInput.Clear();" +
    "}" +
    "}" +
    "</script>";
    lcClearLiteralControl = new LiteralControl(szScript);

    tcTableCell = new System.Web.UI.WebControls.TableCell();
    tcTableCell.ID = "ExpiryDateCell_" + nCount;
    tcTableCell.CssClass = "MMSTableCell";
    tcTableCell.Controls.Add(lbExpiryDateLabel);
    tcTableCell.Controls.Add(dpExpiryDatePicker);
    tcTableCell.Controls.Add(lcClearLiteralControl);
    trTableRow.Cells.Add(tcTableCell);

    // table on the aspx page
    tDynamicTable.Rows.Add(trTableRow);
    }
    can actually someone from the Telerik team comment on this if the above code would work with the date picker or anyone else who actually tried similar approach?






  5. robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 09 Mar 2010 Link to this post

    Remove the <%= and %> tags from your script output. You only use that if your writing .NET code in the ASPX page, not in the code behind. So if you DatePicker's ClientID is dpDatePicker_ct100, what your actually outputting in your script is <%=dpDatePicker_ct100%>, which would obviously return null because it doesn't exist.

    I hope that helps.
  6. Benjamin
    Benjamin avatar
    11 posts
    Member since:
    Oct 2007

    Posted 09 Mar 2010 Link to this post

    OK, here is the reason why it is failing:
     - the page where I am adding the DatePicker to the ControlCollection has a Masterpage and it is breaking the client side API.I have created a simple project with and without MasterPage and the one sitting on a MasterPage is failing when I am trying to add the DatePicker dynamically. unfortunately I cannot add the project as I can only add image files as attachement :(
    Hopefully this is just a version bug which was already fixed. Can anyone confirm such a bug and its fix?
    I am working with Telerik Q2 2007 version - I guess it is a very old version with this bug so I am just wondering if there is a free upgrade to a version where this bug is fixed?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017