Forums Ignite UI for jQuery
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
Close
sucheendarnath
540
Binding a JQuery Grid
posted

I need to bind a infragistics jquery mobile grid control. I am not sure about the javascript files that are to be referenced. I am getting only script errors while trying to bind the grid. Please let me know on how to simply bind sample data to grid with the data from WCF service / Dataset in asp.net without MVC and with MVC

I am using the below coding in aspx page.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<%

 

 

@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="InfraApplication.index"

%>

<!

 

 

 

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

>

 

 

 

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script

>

 

 

 

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

>

 

 

 

<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>

 

 

 

<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script

>

 

 

 

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

>

 

 

 

<script type="text/javascript" language

="javascript">

$.ig.loader({

scriptPath:

 

 

"Infragistics/js/"

,

cssPath:

 

 

"Infragistics/css/"

,

resources:

 

 

"igGrid.*"

});

 

 

 

var

products = [];

products[0] = {

 

 

"ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381"

};

products[1] = {

 

 

"ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327"

};

products[2] = {

 

 

"ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349"

};

products[3] = {

 

 

"ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908"

};

products[4] = {

 

 

"ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036"

};

products[5] = {

 

 

"ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965"

};

products[6] = {

 

 

"ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738"

};

products[7] = {

 

 

"ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457"

};

products[8] = {

 

 

"ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903"

};

products[8] = {

 

 

"ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137"

};

 

$.ig.loader(

 

 

function

() {

$(

 

 

"#grid1"

).igGrid({

height: 500,

columns: [

{ headerText:

 

 

"Product ID", key: "ProductID", dataType: "number"

},

{ headerText:

 

 

"Product Name", key: "Name", dataType: "string"

},

{ headerText:

 

 

"Product Number", key: "ProductNumber", dataType: "string"

},

],

autoGenerateColumns:

 

 

false

,

dataSource: products,

responseDataKey:

 

 

"Records"

,

features: [

{

name:

 

 

"Paging"

,

type:

 

 

"local"

,

pageSize: 10

}

]

});

});

 

 

 

 

 

 

 

</script>

 

</

 

 

head>

<

 

 

body>

 

 

 

<table id="grid1"></table>

</

 

 

body>

</

 

 

html>

But I am recieving script error as Object reference not set to instance of object in the line

$.type(options.dataSource)

Please let me know on how to resolve this error. Also I need to use WCF service. Please let me know on how to accomplish the same.

 

 

  • 23953
    Offline posted

    Hi,
    I see that you are using jquery 1.4.1. We support jQuery versions 1.4.4 and above. Also you are duplicating jQuery UI scripts.  responseDataKey: 'Records" is not needed. The other code looks ok.
    Can you substitute jQuery and jQuery UI references with this CDN links and see if it works:

    Code Snippet
    1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    2. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>

    Hope this helps,
    Martin Pavlov
    Infragistics, Inc.