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
.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
</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 id="overlay">
<img id="img-load" alt="loading" src="Images/ajax-loader.gif" class="PortfolioScopeLoading" />
<table id="PortfolioScopeGrid">
</table>
<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){
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
else {
$("#PortfolioScopeGrid").igGrid("dataSourceObject", datasource);
$("#PortfolioScopeGrid").igGrid("dataBind");
}, //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") {
return confirm('Are you sure you want to ' + tstr + ' this scope?');
alert("Please select one item");
return false;
</script>
</asp:Panel>
Hello Chi Ming,
Do you need any further assistance regarding this matter?
Tsanna