为什么 Telerik RadSlider 在 Chrome 中不可见？答案

【问题标题】：Why Telerik RadSlider is invisible in Chrome?为什么 Telerik RadSlider 在 Chrome 中不可见？
【发布时间】：2016-08-03 11:33:27
【问题描述】：

我在asp:Panel中使用TelerikRadSlider

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();
}

当我单击按钮 Popup 显示时，RadSlider 在 IE 和 FF 中工作正常，但在 chrome 中它是不可见的。 Here 是 repaint RadSlider on button click 我在按钮点击时尝试了以下代码，它在 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);
}

【问题讨论】：

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

【解决方案1】：

可能是因为 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() 或调整选择器以仅重新绘制所需的滑块。

【讨论】：