RadSlider not displaying inside of a RadGrid Template Column

[Kyle]

Hi,

I'm having a problem with the RadSlider while inside of a RadGrid's Template Column.  

What happens on my page, is a user will select a date from a RadCalendar.  For each date selected, a new column will appear in the RadGrid. Each Row will have three Template Columns.   The first template column has an ASP RadioButton List, the second has an ASP CheckBox List and the third and final column has a RadSlider control. 

Everything works fine, except on creation of the first row the RadSlider is not display (it is created and retrievable programmatically).   When the second row is created the first and second RadSlider are displayed correctly.   The code used to create the rows is entirely client side, so I am using set_dataSource() and dataBind() to bind my RadGrid.    My question is, what is different the second time through for the RadGrid that allows it to display the RadSlider after the second date selection and not the first?

Below is the Mark-up for the RadGrid:

<tel:RadGrid runat="server" ID="gvNumNauseaEpisodesPerOccurance"
       AutoGenerateColumns="false"
       GridLines="None"
       Skin=""
      Width="100%"
       style="display:none;"
    <HeaderStyle CssClass="GridHeader" />
    <ItemStyle CssClass="GridRow" />
    <AlternatingItemStyle CssClass="GridAltRow" />
    <ClientSettings>
        <ClientEvents OnCommand="function(){}"
                OnRowDataBound="gvNumNauseaEpisodesPerOccurance_RowDataBound"  />
        <Scrolling AllowScroll="true" />
    </ClientSettings>
    <MasterTableView TableLayout="Fixed" ShowHeader="true">
        <Columns>
            <%-- Date --%>
            <tel:GridBoundColumn HeaderText="Date"
                        DataField="date_str"
                        HeaderStyle-Width="80px">
            </tel:GridBoundColumn>
            <%-- Frequency --%>
            <tel:GridTemplateColumn HeaderText="Frequency"
                           HeaderStyle-Width="150px">
                <ItemTemplate>
                    <asp:RadioButtonList runat="server" ID="gvNumNauseaEpisodesPerOccurance_Frequency"
                                RepeatColumns="1"
                                RepeatDirection="Vertical"
                                Width="100%">
                        <asp:ListItem Text="Constant" Value="C">
                        </asp:ListItem>
                        <asp:ListItem Text="Intermittent" Value="I">
                        </asp:ListItem>
                    </asp:RadioButtonList>
                </ItemTemplate>
            </tel:GridTemplateColumn>
            <%-- Time of Day --%>
            <tel:GridTemplateColumn HeaderText="Time of Day"
                           HeaderStyle-Width="175px">
                <ItemTemplate>
                    <asp:CheckBoxList runat="server" ID="gvNumNauseaEpisodesPerOccurance_chklstTimeOfDay"
                              RepeatColumns="2"
                               RepeatDirection="Horizontal">
                        <asp:ListItem Text="Morning" Value="Morning">
                        </asp:ListItem>
                        <asp:ListItem Text="Afternoon" Value="Afternoon">
                        </asp:ListItem>
                        <asp:ListItem Text="Evening" Value="Evening">
                        </asp:ListItem>
                        <asp:ListItem Text="Night" Value="Night">
                        </asp:ListItem>
                    </asp:CheckBoxList>
                </ItemTemplate>
            </tel:GridTemplateColumn>
            <%-- Severity style="display:none;"--%>
            <tel:GridTemplateColumn HeaderText="Severity">
                <ItemTemplate>
                    <tel:RadSlider runat="server" ID="gvNumNauseaEpisodesPerOccurance_Severity"
                             Skin="Web20"
                              Width="100%">
                        <Items>
                            <tel:RadSliderItem Text="0 (None)" Value="0" />
                            <tel:RadSliderItem Text="1" Value="1" />
                            <tel:RadSliderItem Text="2" Value="2" />
                            <tel:RadSliderItem Text="3" Value="3" />
                            <tel:RadSliderItem Text="4" Value="4" />
                            <tel:RadSliderItem Text="5" Value="5" />
                            <tel:RadSliderItem Text="6" Value="6" />
                            <tel:RadSliderItem Text="7" Value="7" />
                            <tel:RadSliderItem Text="8" Value="8" />
                            <tel:RadSliderItem Text="9" Value="9" />
                            <tel:RadSliderItem Text="10 (Worst)" Value="0" />
                        </Items>
                    </tel:RadSlider>
                </ItemTemplate>
            </tel:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</tel:RadGrid>

[Tsvetie]

Hi Kyle,
No, there is no difference. However, in case these are the only slider controls on the page, the first slider will load the CSS and JS files that the slider needs to render and work correctly. As the CSS files are loaded during the AJAX request, there are a few cases, when the initialization script of the slider runs before the CSS that styles the control, is parsed. As a result, the JS code that calculates the correct size for the elements of the slider returns incorrect values. In case I am correct, registering the style sheets manually with the HEAD of the page should fix the problem:

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Slider.css") %>'
            rel="stylesheet" type="text/css" />
<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Web20.Slider.Web20.css") %>'
            rel="stylesheet" type="text/css" />

Greetings,
Tsvetie
the Telerik team

[Kyle]

Hi Tsvetie,  

Thank you for your reply.   That seems to have resolved the issue of the Slider not being displayed the first time through, however I'm faced with another issue now.

Just as users can selected a date from the RadCalendar, they can also deselected a date.   When they would deselect a date the row that was originally displayed would disappear, however the RadSlider would be moved to a random place on the screen.   To resolved this I used the set_visible(bool) JS function to show and hide the Slider.  This approach works great except for when the user empties the grid completely then tries to add a new row, the new row is shown without a RadSlider, once the user selects a second date both Sliders are displayed correctly.  

To manage the appearence of the Sliders in my grid, whenever the user selects or deselects a date, every slider in the grid has it's visibility set to false.  Then during the RowDataBound event handling, the slider has it visibility set to true, is given a value and has it's repaint function called.    

Thanks again for your help,


Kyle

[Tsvetie]

Hello Kyle,
In case I understand you correctly, the current problem that you have is a problem that is tightly connected to the logic that you have implemented - it can either be a problem in the logic, or it can be a problem in the control that manifests in this concrete scenario. Either way, I will need a simple working project that demonstrates the problem so that I can debug it locally and find the real cause for it. That is why, could you please open a formal support ticket and send me such a project, together with detailed information on the steps I need to follow in order to reproduce it?

Best wishes,
Tsvetie
the Telerik team