为什么Telerik RadSlider在Chrome中不可见?

时间:2016-08-03 11:33:27

标签: c# asp.net google-chrome telerik

我在Telerik

中使用RadSlider asp:Panel

ASP

 <asp:ModalPopupExtender ID="pueTags"></asp:ModalPopupExtender>
    <asp:Panel>
        <telerik:RadSlider></telerik:RadSlider> 
    </asp:Panel>

背后的代码

protected void imgBtnTags_click(object sender, ImageClickEventArgs e)
{
   pueTags.show();
}

当我点击弹出窗口按钮时,RadSlider在IE和FF中正常工作但在Chrome中它是不可见的。 Here是按钮点击重绘 RadSlider的技巧我在按钮单击时尝试了以下代码它在IE和FF中也运行良好但在Chrome中没有。

<asp:ModalPopupExtender></asp:ModalPopupExtender>
<asp:Panel>
<asp:PlaceHolder ID="sliderPlaceHolder" runat="server"></asp:PlaceHolder>
</asp:Panel>

背后的代码

protected void imgBtnTags_click(object sender, ImageClickEventArgs e)
{
    pueTags.show();

    RadSlider slider = new RadSlider();
    slider.ID = "sTagBookmark";
    slider.IsSelectionRangeEnabled = true;
    slider.OnClientSlideEnd = "resetButtons";
    slider.SelectionStart = 0;
    slider.SelectionEnd = 1;
    slider.MaximumValue = 100;
    slider.Width = 368;
    sliderPlaceHolder.Controls.Add(slider);
}

1 个答案:

答案 0 :(得分:0)

可能是因为AjaxControlToolkit通过覆盖部分MS AJAX库来打破Telerik控件:http://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/general-troubleshooting#telerik-controls-are-incompatible-with-ajax-control-toolkit

也许停止工具包脚本管理器的脚本组合可能会有所帮助。

另一个选择:查看丢弃AjaxControlToolkit并使用Telerik套件中的RadWindow对话框。

对于repaint()调用,在显示对话框后,这应该发生在客户端。由于ModalPopupExtender没有很好地公开客户端事件,也没有关于它们的文档,因此最好的方法是从服务器注册脚本并使用时序,如:

protected void imgBtnTags_click(object sender, ImageClickEventArgs e)
{
    pueTags.show();
    string script = @"function f() {
                setTimeout(function () {
                    $telerik.$('.RadSlider').each(function (index, elem) {{
                        if (elem && elem.control && elem.control.repaint)
                            elem.control.repaint();
                    });
                }, 500); /*play around with this timeout*/
                Sys.Application.remove_load(f);
            }; Sys.Application.add_load(f);";
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "someKey", script, true);
}

当然,我使用的jQuery选择器获取页面上的所有滑块,并通过DOM对象属性使用它们的API。您可以使用$ find()代替或调整选择器以仅重新绘制所需的滑块。