Timepicker visibility issue

[Curt]

I have a couple of timepickers in a repeater item template:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1">
        <HeaderTemplate>
            <table>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <th colspan="2"><asp:Label ID="lblDayOfWeek" runat="server" text='<%# DataBinder.Eval(Container.DataItem,"Value") %>' /><asp:CheckBox ID="chkDayOfWeek" runat="server" OnCheckedChanged="DayOfWeek_Changed" AutoPostBack="true" /></th>
            </tr>
            <tr id="trRepeaterTimes" runat="server">
                <td>Start Time:<telerik:RadTimePicker ID="RadTimePicker1" runat="server" Skin="Vista" TimeView-Interval="0:30" TimeView-Columns="6" /></td>
                <td>End Time:<telerik:RadTimePicker ID="RadTimePicker2" runat="server" Skin="Vista" TimeView-Interval="0:30" TimeView-Columns="6" /></td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>

When the checkbox next to the day of the week is checked, I want to show the timepicker (or the row they are in).  This works fine for showing/hiding the row but the timepicker will not show the available times.  I assume this has to do with how the page is seeign or not seeing the controls as they are set visible=true; or visible=false;  (that is why I tried style=display:none)

protected void DayOfWeek_Changed(object sender, EventArgs e)
    {

        foreach (RepeaterItem dataItem in Repeater1.Items)
        {
            CheckBox chk = (CheckBox)dataItem.FindControl("chkDayOfWeek");
            RadTimePicker rtp1 = (RadTimePicker)dataItem.FindControl("RadTimePicker1");
            RadTimePicker rtp2 = (RadTimePicker)dataItem.FindControl("RadTimePicker2");
            HtmlTableRow tr = (HtmlTableRow)dataItem.FindControl("trRepeaterTimes");
            if (chk.Checked)
            {
                tr.Attributes.Add("style", "display:normal;");
                rtp1.Visible = true;
                rtp2.Visible = true;
                RadAjaxManager1.AjaxSettings.AddAjaxSetting(rtp1, rtp1);
            }
            else
            {
                tr.Attributes.Add("style", "display:none;");
                rtp2.Visible = false;
                rtp1.Visible = false;
            }
        }
    }

Does anyone know how I can set the visibililty and still keep the timepickers functioning correctly?

Thanks

-Brent

[Steve]

Hi sl6rp,

Looking at your code, the timepickers are not invisible, so I am not sure why you are having problems with them showing upon editing the repeater template. However you cannot set AjaxSettings upon postback event of controls - they need to be set either declaratively or in Page_Load or PreRender event of the template control (help article here).

Sincerely yours,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Curt]

Steve,

Thanks for the reply and the link.  I looked it over and tried the same thing with the repeater (ItemCreated) but couldn't get it to work.  The row in which the TimePickers are located is initially set to Visible=false;  When you click the checkbox in the ItemTemplate it sets the row's visibilty (checked=visible, unchecked = not visible).

I am not sure how to set the ajax settigngs for the template in the Page_Load or the Template's preRender.

Any help would be appreciated.

Thanks

-Brent

[Steve]

Hello sl6rp,

Please review the following help article that elaborates on showing/hiding controls with ajax. The hidden controls should be nested in always visible container and this container added to the AjaxSettings instead. In this line of thoughts, table rows cannot be updated with ajax as it breaks its structure. You can either use the table cells or the entire table. Then locate the controls in PreRender and add them to the AjaxSettings:

protected void rptTest_PreRender(object sender, System.EventArgs e)
{
    RepeaterItem item;
    foreach ( item in rptTest.Items)
    {
         RadTimePicker rtp1 = item.FindControl("RadTimePicker1"); 
         RadTimePicker rtp2 = item.FindControl("RadTimePicker2");
         AjaxManager1.AjaxSettings.AddAjaxSetting(rtp1, rtp2);
    }
}

Hope this helps.

Regards,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center