Uncaught TypeError: Cannot call method ‘unbind’ of undefined

[rjlewis71Member]

This time I’m trying “jqxGrid Server Side Paging with ASP .NET” and getting this error:

Uncaught TypeError: Cannot call method 'unbind' of undefined jqxcore.js:7
a.jqx.jqxWidget.a.jqx.(anonymous function).removeHandler jqxcore.js:7
a.extend.removeHandlers jqxdropdownlist.js:7
a.extend.render jqxdropdownlist.js:7
a.extend.createInstance jqxdropdownlist.js:7
(anonymous function) jqxcore.js:7
e.extend.each jquery-1.7.1.min.js:2
e.fn.e.each jquery-1.7.1.min.js:2
a.jqx.jqxWidget.a.fn.(anonymous function) jqxcore.js:7
a.extend._initpager jqxgrid.pager.js:7
b.extend.createInstance jqxgrid.js:7
(anonymous function) jqxcore.js:7
e.extend.each jquery-1.7.1.min.js:2
e.fn.e.each jquery-1.7.1.min.js:2
a.jqx.jqxWidget.a.fn.(anonymous function) jqxcore.js:7
(anonymous function) test.aspx:53
f.Callbacks.n jquery-1.7.1.min.js:2
f.Callbacks.o.fireWith jquery-1.7.1.min.js:2
e.extend.ready jquery-1.7.1.min.js:2
c.addEventListener.B
The two methods GetTotalRowsCount and GetCustomers return results, but the grid never has data because of this error.

Robert

[Peter StoevKeymaster]

Hi rjlewis71,

We’ll investigate the reported issue and I hope that we will be able to reproduce it. Thank you for the feedback!

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Peter StoevKeymaster]

I am unable to reproduce the issue with the latest version(2.4.2).

Here’s the code that I use:

Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="Styles/jqx.base.css" rel="stylesheet" type="text/css" />
    <link href="Styles/jqx.classic.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jqxcore.js" type="text/javascript"></script>
    <script src="Scripts/jqxbuttons.js" type="text/javascript"></script>
    <script src="Scripts/jqxdata.js" type="text/javascript"></script>
    <script src="Scripts/jqxgrid.js" type="text/javascript"></script>
    <script src="Scripts/jqxgrid.pager.js" type="text/javascript"></script>
    <script src="Scripts/jqxlistbox.js" type="text/javascript"></script>
    <script src="Scripts/jqxdropdownlist.js" type="text/javascript"></script>
    <script src="Scripts/jqxgrid.selection.js" type="text/javascript"></script>
    <script src="Scripts/jqxmenu.js" type="text/javascript"></script>
    <script src="Scripts/jqxscrollbar.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Getting the source data with ajax GET request
            source = {
                datatype: "xml",
                datafields: [
                { name: 'CompanyName' },
                { name: 'ContactName' },
                { name: 'ContactTitle' },
                { name: 'City' },
                { name: 'Country' },
                { name: 'Address' }
                ],
                async: false,
                formatdata: function(data)
                {
                    return { pagenum: data.pagenum, pagesize: data.pagesize }          
                },
                record: 'Table',
                url: 'Default.aspx/GetCustomers'
            };
            $.ajax({
                url: 'Default.aspx/GetTotalRowsCount',
                contentType: 'application/json; charset=utf-8',
                async: false,
                success: function (data) {
                    source.totalrecords = data.d;
                }
            });
            var dataAdapter = new $.jqx.dataAdapter(source,
                { contentType: 'application/json; charset=utf-8' }
            );
            $("#jqxgrid").jqxGrid({
                source: dataAdapter,
                theme: 'classic',
                pageable: true,
                autoheight: true,
                virtualmode: true,
                rendergridrows: function () {
                    return dataAdapter.records;
                },
                columns: [
                    { text: 'Company Name', dataField: 'CompanyName', width: 250 },
                    { text: 'Contact Name', dataField: 'ContactName', width: 150 },
                    { text: 'Contact Title', dataField: 'ContactTitle', width: 180 },
                    { text: 'Address', dataField: 'Address', width: 180 },
                    { text: 'City', dataField: 'City', width: 80 },
                    { text: 'Country', dataField: 'Country', width: 100 }
                ]
            });
        });
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="jqxgrid"></div>
</asp:Content>

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Script.Serialization;
namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        [WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Xml)]
        public static string GetCustomers(int pagenum, int pagesize)
        {
            string query = "SELECT * FROM ( "
                + "  SELECT *, ROW_NUMBER() OVER (ORDER BY CustomerID) as row FROM Customers "
                + " ) a WHERE row > " + pagenum * pagesize + " and row <= " + (pagenum + 1) * pagesize;
            SqlCommand cmd = new SqlCommand(query);
    
            // Populate the DataSet.
            DataSet data = GetData(cmd);
            // return the Customers table as XML.
            System.IO.StringWriter writer = new System.IO.StringWriter();
            data.Tables[0].WriteXml(writer, XmlWriteMode.WriteSchema, false);
            return writer.ToString(); 
        }
        private static DataSet GetData(SqlCommand cmd)
        {
            string strConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(strConnString))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataSet ds = new DataSet())
                    {
                        sda.Fill(ds);
                        return ds;
                    }
                }
            }
        }
        [WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
        public static int GetTotalRowsCount()
        {
            string rowsNumberQuery = "SELECT Count(*) FROM Customers";
            SqlCommand countCmd = new SqlCommand(rowsNumberQuery);
            int count = GetRowsCount(countCmd);
            return count;
        }
        private static int GetRowsCount(SqlCommand cmd)
        {
            string strConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
            SqlConnection con = new SqlConnection(strConnString);
            cmd.Connection = con;
            con.Open();
            SqlDataReader reader = cmd.ExecuteReader();
            reader.Read();
            int rows = (int)reader[0];
            con.Close();
            return rows;
        }
    }
}

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[rjlewis71Member]

Ok, I went line-by-line on the javascript includes. The only thing I changed (because I had to) was how I’m getting the data. I have a function that I use that returns me a dataset for an SQL that I pass in. I’m locally debugging and getting results for both the “GetCustomers” and the “GetTotalRowsCount” and now I get a grid with rows that are empty and still the “unbind” error.

Does it matter if I use the trial commercial version or the free version? Also, I’m not using a master page, but that shouldn’t make a difference….Here is my code:

test.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="DBIW.Tabs.test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../Includes/CSS/jqx.base.css" rel="stylesheet" type="text/css" />
    <link href="../Includes/CSS/jqx.classic.css" rel="stylesheet" type="text/css" />
    <script src="../Includes/JS/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../Includes/JS/jqxcore.js" type="text/javascript"></script>
    <script type="text/javascript" src="../Includes/JS/jqxbuttons.js"></script>
    <script src="../Includes/JS/jqxdata.js" type="text/javascript"></script>
    <script src="../Includes/jqxWidgets/jqxgrid.js" type="text/javascript"></script>
    <script src="../Includes/jqxWidgets/jqxgrid.pager.js" type="text/javascript"></script>
    <script src="../Includes/jqxWidgets/jqxlistbox.js" type="text/javascript"></script>
    <script src="../Includes/jqxWidgets/jqxdropdownlist.js" type="text/javascript"></script>
    <script src="../Includes/jqxWidgets/jqxgrid.selection.js" type="text/javascript"></script>
    <script src="../Includes/jqxWidgets/jqxmenu.js" type="text/javascript"></script>
    <script src="../Includes/jqxWidgets/jqxscrollbar.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
        //Getting the source data with ajax GET request
        source = {
            datatype: "xml",
            datafields: [
                { name: 'name_ind' },
                { name: 'st_addr' },
                { name: 'addr_city' },
                { name: 'states_us' },
                { name: 'zip' }
                ],
            async: false,
            formatdata: function (data) {
                return { pagenum: data.pagenum, pagesize: data.pagesize }
            },
            record: 'Table',
            url: 'test.aspx/GetCustomers'
        };
        $.ajax({
            url: 'test.aspx/GetTotalRowsCount',
            contentType: 'application/json; charset=utf-8',
            async: false,
            success: function (data) {
                source.totalrecords = data.d;
            }
        });
        var dataAdapter = new $.jqx.dataAdapter(source,
                { contentType: 'application/json; charset=utf-8' }
            );
        $("#jqxgrid").jqxGrid({
            source: dataAdapter,
            theme: 'classic',
            pageable: true,
            autoheight: true,
            virtualmode: true,
            rendergridrows: function () {
                return dataAdapter.records;
            },
            columns: [
                    { text: 'name_ind', dataField: 'name_ind', width: 25 },
                    { text: 'st_addr', dataField: 'st_addr', width: 25 },
                    { text: 'addr_city', dataField: 'addr_city', width: 25 },
                    { text: 'states_us', dataField: 'states_us', width: 25 },
                    { text: 'zip', dataField: 'zip', width: 25 }
                ]
        });
    });
    </script>
</head>
<body>
<div id="jqxgrid"></div>
</body>
</html>

test.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Script.Serialization;
namespace DBIW.Tabs
{
    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        [WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Xml)]
        public static string GetCustomers(int pagenum, int pagesize)
        {
            string strSQL = "select name_ind, st_addr, addr_city, states_us, zip " +
                            "from pers_person_tbl where name_ind like '%SMITH%'";
            DataSet data = DBFunctions.parseSQLDS(strSQL, "PRIV", "DBIWWS");
            // return the Customers table as XML.
            System.IO.StringWriter writer = new System.IO.StringWriter();
            data.Tables[0].WriteXml(writer, XmlWriteMode.WriteSchema, false);
            return writer.ToString();
        }
        private static DataSet GetData(SqlCommand cmd)
        {
            string strConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(strConnString))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataSet ds = new DataSet())
                    {
                        sda.Fill(ds);
                        return ds;
                    }
                }
            }
        }
        [WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
        public static int GetTotalRowsCount()
        {
            string strSQL = "select count(*) as CNT from pers_person_tbl where name_ind like '%SMITH%'";
            int count = int.Parse(DBFunctions.parseSQLString(strSQL, "PRIV", "DBIWWS"));
            return count;
        }
        private static int GetRowsCount(SqlCommand cmd)
        {
            string strConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
            SqlConnection con = new SqlConnection(strConnString);
            cmd.Connection = con;
            con.Open();
            SqlDataReader reader = cmd.ExecuteReader();
            reader.Read();
            int rows = (int)reader[0];
            con.Close();
            return rows;
        }
    }
}

Robert

[rjlewis71Member]

Ok, one issue at a time I guess. The problem was that I was using an old version of jqxcore.js. I put all the .js files into a new folder and pulled them directly from that folder. Now I don’t get the error, but I also still don’t get data. I have a grid with no data that shows 484 records at the bottom.

Robert

[rjlewis71Member]

Here is what the writer in data.Tables[0].WriteXml(writer, XmlWriteMode.WriteSchema, false); looks like:

{<NewDataSet>
  <xs:schema id="NewDataSet" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata" xmlns:msprop="urn:schemas-microsoft-com:xml-msprop">
    <xs:element name="NewDataSet" msdata:IsDataSet="true" msdata:MainDataTable="Table" msdata:UseCurrentLocale="true">
      <xs:complexType>
        <xs:choice minOccurs="0" maxOccurs="unbounded">
          <xs:element name="Table" msprop:BaseTable.0="PERS_PERSON_TBL">
            <xs:complexType>
              <xs:sequence>
                <xs:element name="NAME_IND" msprop:BaseColumn="NAME_IND" msprop:OraDbType="126" type="xs:string" minOccurs="0" />
                <xs:element name="ST_ADDR" msprop:BaseColumn="ST_ADDR" msprop:OraDbType="126" type="xs:string" minOccurs="0" />
                <xs:element name="ADDR_CITY" msprop:BaseColumn="ADDR_CITY" msprop:OraDbType="126" type="xs:string" minOccurs="0" />
                <xs:element name="STATES_US" msprop:BaseColumn="STATES_US" msprop:OraDbType="126" type="xs:string" minOccurs="0" />
                <xs:element name="ZIP" msprop:BaseColumn="ZIP" msprop:OraDbType="126" type="xs:string" minOccurs="0" />
              </xs:sequence>
            </xs:complexType>
          </xs:element>
        </xs:choice>
      </xs:complexType>
    </xs:element>
  </xs:schema>
  <Table>
    <NAME_IND>SMITH TODD ANTHONY</NAME_IND>
    <ST_ADDR>4680 TIMBERVIEW</ST_ADDR>
    <ADDR_CITY>AUBURN</ADDR_CITY>
    <STATES_US>IL</STATES_US>
    <ZIP>62615</ZIP>
  </Table>
  <Table>
    <NAME_IND>SMITH MICHAEL BRUCE</NAME_IND>
    <ST_ADDR>922 N 9TH ST</ST_ADDR>
    <ADDR_CITY>DEKALB</ADDR_CITY>
    <STATES_US>IL</STATES_US>
    <ZIP>60115</ZIP>
  </Table>
</NewDataSet>}

[rjlewis71Member]

We’re defining “source” as “xml” but in the var dataAdapter line we’re saying its contentType is ‘application/json; charset=utf=8’. Is that an issue?

Robert

[rjlewis71Member]

Ok, I got this to work. I had to set:

width: 650,
columnresize: true

At that point I saw that the data was there but the columns weren’t big enough to show the data.

Robert

[Author]

Posts