Binding a JQuery Grid | Infragistics Forums

540

Binding a JQuery Grid

sucheendarnath posted over 12 years ago

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

="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>

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 Martin Pavlov posted over 12 years ago
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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<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.
Cancel
Reply

Cancel