为什么Telerik RadSlider在Chrome中不可见

本文关键字:Chrome Telerik RadSlider 为什么 | 更新日期: 2023-09-27 17:59:52

我在asp:Panel 中使用Telerik RadSlider

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中它是不可见的。这是在按钮点击时重新绘制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);
}

为什么Telerik RadSlider在Chrome中不可见

可能是因为AjaxControlToolkit通过重写MS AJAX库的部分来破坏Telerik控件:http://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/general-troubleshooting#telerik-控件与ajax控制工具包不兼容

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

另一种选择:考虑抛出AjaxControlToolkit,并使用Telerik套件中的RadWindow对话框。

至于重新绘制()调用,应该在显示对话框后在客户端进行。由于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(),也可以调整选择器,只重新绘制所需的滑块。