JavaScript error in IE when hovering header row with svg in it

RELATED TO:

AUTHOR: Marin Bratanov

DATE POSTED: November 21, 2018

PROBLEM

Sys.ArgumentNullException: Value cannot be null. Parameter name: element error is thrown when you hover over an SVG element inside a HeaderTemplate of a RadGrid in IE

DESCRIPTION

IE does not consider SVG elements and their children to be DOM elements, but it does fire the mouseover event for the child nodes in the SVG (other browsers don't). The target of those event not being a DOM element breaks some internal logic in the grid that traverses the DOM to get the actual grid element when you move, click and drag elements in the grid around - since the element is not a DOM element, it becomes null at some point and null reference exceptions happen. The exact error comes from argument validation: Function._validateParams(arguments, [{name: "element", domElement: true}])

SOLUTION

You can override the particular grid function that traverses the DOM recursively to get a domElement:

    <script>
        if (Telerik && Telerik.Web && Telerik.Web.UI && Telerik.Web.UI.RadGrid && Telerik.Web.Browser.ie) {
            Telerik.Web.UI.Grid.GetCurrentElement = function (e) {
 
                if (!e)
                    e = window.event;
 
                var currentElement;
                if (e.srcElement) {
                    currentElement = e.srcElement;
                }
                else {
                    currentElement = e.target;
                }
                while (currentElement && currentElement.parentNode) {
                    if (Telerik.Web.UI.Grid.IsDomElement(currentElement)) {
                        return currentElement;
                    }
                    currentElement = currentElement.parentNode;
                }
                return null;
            };
        }
    </script>
</form>

REPRODUCIBLE

Here is the simplest reproducible for the error - hover the icon mark in the header

<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" OnNeedDataSource="rg1_NeedDataSource">
    <MasterTableView>
        <Columns>
            <telerik:GridTemplateColumn>
                <HeaderTemplate>
                    <asp:Panel runat="server">
                        <input class="b-checkbox-input" id="dgvProcedures_cbxSelectAll" type="checkbox" style="display: none;">
                        <label class="b-checkbox" for="dgvProcedures_cbxSelectAll">
                            <span>
                                <svg width="12px" height="10px" viewBox="0 0 12 10">
                                    <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                </svg>
                            </span>
                        </label>
                    </asp:Panel>
                </HeaderTemplate>
                <ClientItemTemplate>
                <input class="b-checkbox-input" id="dgvProcedures_cbx" type="checkbox" style="display: none;">
                <label class="b-checkbox" for="dgvProcedures_cbx">
                    <span>
                        <svg width="12px" height="10px" viewBox="0 0 12 10">
                            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                        </svg>
                    </span>
                </label>
                </ClientItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
protected DataTable GetDummyData()
{
    DataTable tbl = new DataTable();
    tbl.Columns.Add(new DataColumn("values", typeof(decimal)));
    tbl.Columns.Add(new DataColumn("names", typeof(string)));
    tbl.Columns.Add(new DataColumn("moreData", typeof(int)));
    tbl.Columns.Add(new DataColumn("colors", typeof(string)));
    tbl.Rows.Add(new object[] { 1, "one", 11, "red" });
    tbl.Rows.Add(new object[] { 2, "two", 22, "green" });
    tbl.Rows.Add(new object[] { 3, "three", 33, "blue" });
    tbl.Rows.Add(new object[] { 4, "four", 44, "pink" });
 
    return tbl;
}
 
protected void rg1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = GetDummyData();
}

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.