Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
435
IgGrid Sorting Caused An Error
posted

When this grid is initialized, I was able to sort any columns on the grid. I just clicked any click event controls in ASP.NET using UpdatePanel control that contains AsyncPostBackTigger control. Once I clicked it, it rebinded the grid that worked very well. However, I was not able to sort any columns on the grid and getting an error that reads, "JavaScript runtime error: Unable to set property 'innerHTML' of undefined or null reference"

Provide the steps to reproduce your problem: 

1. Open Page

2. Click any columns on the grid (It is working)

3. Click any buttons (such as delete, activiate, etc) and then rebinded the grid.

4. Click any columns on the grid that caused an error.

Below is code

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ucManagePortfolioScope.ascx.vb"

    Inherits="ITIPSII.Portal.Web.ucManagePortfolioScope" %>

<asp:Panel ID="pnlGridList" runat="server" Width="100%">

    <style type="text/css">

        .ui-iggrid .ui-iggrid-footer, .ui-iggrid .ui-iggrid-toolbar

        {

            background-color: #607B89;

            background-image: none !important;

            text-shadow: none !important;

            color: #FFF;

            font-family: Helvetica, Arial, Sans-Serif;

            font-size: 12px;

        }

       

        .ui-state-default.ui-widget-header, .ui-widget-header

        {

            background-color: #607B89;

            background-image: none !important;

        }

       

        .ui-iggrid th, .ui-iggrid th.ui-state-default

        {

            border-top: none;

            border-right-color: #dcdcdc;

            border-bottom-color: #dcdcdc;

            border-left: none;

        }

       

        .ui-iggrid th.ui-state-default

        {

            text-align: center !important;

        }

        .ui-iggrid-groupbyarea

        {

            min-height: 0px;

            margin: 0px;

            padding: 0px;

        }

       

        .PortfolioScope_Description

        {

            padding: 10px;

        }

        .PortfolioScopeLoading

        {

            width: 30px;

            height: 30px;

        }

        #overlay

        {

            display: none;

            position: absolute;

            background: #fff;

        }

        #img-load

        {

            position: absolute;

        }

    </style>

    <!-- Ignite UI Required Combined CSS Files -->

    <%--<link href="../../Components/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />

<link href="../../Components/IgniteUI/css/structure/infragistics.css" rel="stylesheet" />--%>

    <script type="text/javascript" src="../../Components/IgniteUI/js/jquery.js"></script>

    <script type="text/javascript" src="../../Components/IgniteUI/js/jquery-ui.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files -->

    <script type="text/javascript" src="../../Components/IgniteUI/js/infragistics.core.js"></script>

    <script type="text/javascript" src="../../Components/IgniteUI/js/infragistics.dv.js"></script>

    <script type="text/javascript" src="../../Components/IgniteUI/js/infragistics.lob.js"></script>

    <script type="text/javascript" src="../../Components/IgniteUI/js/infragistics.loader.js"></script>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" UpdateMode="Conditional">

        <Triggers>

            <asp:AsyncPostBackTrigger ControlID="btnCreate" EventName="Click" />

            <asp:AsyncPostBackTrigger ControlID="btnEdit" EventName="Click" />

            <asp:AsyncPostBackTrigger ControlID="btnActivate" EventName="Click" />

            <asp:AsyncPostBackTrigger ControlID="btnDeactivate" EventName="Click" />

        </Triggers>

        <ContentTemplate>

            <div class="PortfolioScope_Description">

                <b>Portfolio Scope</b>

                <p>

                    Use the create button to create a new Portfolio Scope. Select the Portfolio Scope

                    and use the appropriate button to Edit, Delete, Activate or Deactive the scope.

                </p>

                <br />

                <div>

                    <asp:Button ID="btnCreate" runat="server" Text="Create" />

                    <asp:Button ID="btnEdit" runat="server" Text="Edit" OnClientClick="return checkSelect('edit');" />

                    <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClientClick="return checkSelect('delete');" />

                    <asp:Button ID="btnActivate" runat="server" Text="Activate" OnClientClick="return checkSelect('activate');" />

                    <asp:Button ID="btnDeactivate" runat="server" Text="Deactivate" OnClientClick="return checkSelect('deactivate');" />

                </div>

            </div>

            <div id="overlay">

                <img id="img-load" alt="loading" src="Images/ajax-loader.gif" class="PortfolioScopeLoading" />

                <table id="PortfolioScopeGrid">

                </table>

            </div>

            <asp:HiddenField ID="HiddenIDforEdit" runat="server" />

            <asp:HiddenField ID="HiddenIDforDelete" runat="server" />

            <asp:HiddenField ID="HiddenIDforDeactivate_Activate" runat="server" />

        </ContentTemplate>

    </asp:UpdatePanel>

    <script type="text/javascript">

 

            $(function (e) {

                DataGrid();

             });//End $(Function())

 

             Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

 

             function EndRequestHandler(sender, args){

                 DataGrid();

                 debugger;

             }; //end EndRequestHandler function

 

 

        //       

        function DataGrid() {

            $.ajax({

                type: "POST",

                url: "Modules/Admin/AdminWebService.asmx/PortfolioScopeGridListJSON",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                error: function (xhr, ajaxOptions, thrownError) {

                    console.log("Error:");

                    console.log(thrownError);

                },

                beforeSend: function () {

                    $("#overlay").fadeIn();

                },

                success: function (msg) {

                    var GetPortfolioScopeGrid = $.parseJSON(msg.d);

 

                    if ($("#PortfolioScopeGrid").data("igGrid") === undefined) {

 

                        $("#PortfolioScopeGrid").igGrid({

                            accessibilityRendering: true,

                            columns:

                            [

                            //  { headerText: "Select", unbound: "true"},

                                {headerText: "Scope Name", key: "Name", dataType: "string" },

                                { headerText: "Status", key: "Status", dataType: "string" },

                                { hidden: true, headerText: "ScopeID", key: "ScopeID", dataType: "string" }

                            ],

                            width: "1300px",

                            height: "300px",

                            dataSource: GetPortfolioScopeGrid,

                            dataSourceType: "json",

                            primaryKey: "ScopeID",

                            features:

                            [

                                {

                                    name: "Paging",

                                    type: "local",

                                    pageSize: 10,

                                    pageCountLimit: 0,

                                    pageSizeDropDownLocation: "inpager",

                                    pageSizeList: [10, 25, 50, 75, 100, "All"],

 

                                    pageSizeChanging: function (evt, ui) {

                                        var dataSource = $("#PortfolioScopeGrid").data("igGrid").dataSource._data.length;

                                        $("#PortfolioScopeGrid").igGridPaging("option", "pageSize", dataSource);

                                    }

                                },

                                { name: "Sorting", type: "local", persist: false },

                                { name: "Filtering", type: "local", filterDropDownItemIcons: false, filterDropDownWidth: 200 },

                                { name: "Resizing", deferredResizing: false, allowDoubleClickToResize: true, handleThreshold: 14 },

                                {

                                    name: "Selection",

                                    mode: "row"

                                }

 

                            ]

 

                        }); //End igGrid Function

 

                        var dataSource = $("#PortfolioScopeGrid").data("igGrid").dataSource._data.length;

                        $("#PortfolioScopeGrid").igGridPaging("option", "pageSize", dataSource);

                    }

                    else {

                        debugger;

                        $("#PortfolioScopeGrid").igGrid("dataSourceObject", datasource);

                        $("#PortfolioScopeGrid").igGrid("dataBind");

 

                        var dataSource = $("#PortfolioScopeGrid").data("igGrid").dataSource._data.length;

                        $("#PortfolioScopeGrid").igGridPaging("option", "pageSize", dataSource);

                    }

 

 

                }, //end success

                complete: function () {

                    //$("#overlay").fadeOut();

                }

            });    //end ajax function

 

        }; //end populategrid function

 

        function checkSelect(tstr) {

 

            var row = $("#PortfolioScopeGrid").igGridSelection("selectedRow");

 

            if (row != null) {

                var dataID = row.element.attr("data-id");

 

                if (tstr == "edit") {

                    document.getElementById('<%= HiddenIDforEdit.ClientID %>').value = dataID;

                }

                else if (tstr == "delete") {

                    document.getElementById('<%= HiddenIDforDelete.ClientID %>').value = dataID;

                }

                else if (tstr == "activate") {

                    document.getElementById('<%= HiddenIDforDeactivate_Activate.ClientID %>').value = dataID;

                }

                else if (tstr == "deactivate") {

                    document.getElementById('<%= HiddenIDforDeactivate_Activate.ClientID %>').value = dataID;

                }

 

                return confirm('Are you sure you want to ' + tstr + ' this scope?');

            }

            else {

                alert("Please select one item");

                return false;

            }

 

            return false;

        }

 

    </script>

</asp:Panel>

  • 15320
    Offline posted

    Hello Chi,

    I created a separate sample based on your code, however I was unable to reproduce such error as on your side. Please take a look at the attached sample and feel free to modify it in order to reproduce the error, then send it back to me. Waiting for your reply.

    Regards,

    Tsanna

    igGridSortingASP.zip
  • 15320
    Offline posted

    Hello Chi Ming,

    Do you need any further assistance regarding this matter?

    Tsanna