Uncaught TypeError: Cannot read property ‘dataAdapter’ of undefined

[HimanshuMember]

i am doing Work in Asp.net MVC 3  Facing Problem in Undefined DataAdapter.  Actually I  am Creating a Partial View in Which I have written the Grid View Java Script.

In my Controller i calling my Service Layer in which Data is Coming is Right When I Debug my method. But i When i implement the Grid The Undefined Data Adapter it says :

Review Code:

PARTIAL VIEW : viewinformation {All the css and Scrpit has been Called in Layout Page}


@{
ViewBag.Title = "User Grid";

}

link href=”../../Content/jqx.base.css” rel=”stylesheet” type=”
text/css” />
link href=”../../Content/jqx.classic.css” rel=”stylesheet”
type=”text/css” />
script type=”text/javascript”>
$(document).ready(function () {
var source =
{
rl: “AccountUser/Information”,
type:”post”,
datatype: “json”,
datafields: [{ name: “UserId” }, { name: “FirstName” }, { name: “LastName”, }]
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
columnsresize: true,

columns: [
{ text: ‘UserId’, dataField: ‘UserId’, width: 100 },
{ text: ‘FirstName’, dataField: ‘FirstName’, width: 100 },
{ text: ‘LastName’, dataField: ‘LastName’, width: 80, cellsalign: ‘right’ },
]
});
});
</script>
<div id=”jqxgrid”></div>

Layout Page:


link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
link href="@Url.Content("~/Content/themes/css/style.css?files=reset,common,form,standard,960.gs.fluid,simple-lists,block-lists,planning,table,calendars,wizard,gallery")" rel="stylesheet" type="text/css" />
script src="../../Scripts/modernizr-1.7.min.js" type="text/javascript"></script>

link href=”../../Content/jqx.classic.css” rel=”stylesheet” type=”text/css” />
link href=”../../Content/jqx.base.css” rel=”stylesheet” type=”text/css” />
link href=”@Url.Content(“~/Content/jqx.base.css”)”
rel=”stylesheet” type=”text/css” />
link href=”@Url.Content(“~/Content/jqx.classic.css”)”
rel=”stylesheet” type=”text/css” />
script src=”@Url.Content(“~/Scripts/jquery-1.7.2.min.js”)”
type=”text/javascript”></script>
<script src=”@Url.Content(“~/Scripts/jqxcore.js”)”
type=”text/javascript”></script>
<script src=”@Url.Content(“~/Scripts/jqxbuttons.js”)”
type=”text/javascript”></script>
<script src=”@Url.Content(“~/Scripts/jqxdata.js”)”
type=”text/javascript”></script>
<script src=”@Url.Content(“~/Scripts/jqxgrid.js”)”
type=”text/javascript”></script>
<script src=”@Url.Content(“~/Scripts/jqxgrid.edit.js”)”
type=”text/javascript”></script>
<script src=”@Url.Content(“~/Scripts/jqxgrid.selection.js”)”
type=”text/javascript”></script>
<script src=”@Url.Content(“~/Scripts/jqxmenu.js”)”
type=”text/javascript”></script>
<script src=”@Url.Content(“~/Scripts/jqxscrollbar.js”)”
type=”text/javascript”></script>

<script src=”../../Scripts/jquery.validate.min.js” type=”text/javascript”></script>
<script src=”../../Scripts/jquery.unobtrusive-ajax.min.js” type=”text/javascript”></script>
<script src=”../../Scripts/jquery.validate.unobtrusive.min.js” type=”text/javascript”></script>

<link rel=”shortcut icon” type=”image/x-icon” href=”@Url.Content(“favicon.ico”)”/>
<link rel=”icon” type=”image/png” href=”@Url.Content(“favicon-large.png”)”/>

 

Controller : AccountUser Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CommerceSuite.Web.Models;
using System.Web.Security;
using CommerceSuite.Services.Account;
using CommerceSuite.Data;

namespace CommerceSuite.Web.Controllers
{
public class AccountUserController : Controller
{
private IUserService _userService;

public AccountUserController(IUserService userService)
{
_userService = userService;
}

public ActionResult Create()
{

return PartialView();
}

[HttpPost]
public ActionResult Create(RegisterModel model)
{
if (ModelState.IsValid)
{
try
{
MembershipCreateStatus createStatus= _userService.Create(model.UserName, model.FirstName, model.LastName, model.Email, model.Password);
if (createStatus == MembershipCreateStatus.Success)
{
TempData[“Result”] = ErrorCodeToString(createStatus);
return RedirectToAction(“Create”, “AccountUser”);

}
else
{
ModelState.AddModelError(“”, ErrorCodeToString(createStatus));
}

}
catch(Exception ex)
{
ModelState.AddModelError(“”, ex.Message);
}
}

return PartialView(model);
}

public ActionResult ViewInformation()
{
return View(“ViewInformation”);
}

public JsonResult Information()
{
List<UserDetail> ud = _userService.ViewData();
return Json(new { ud });

}

#region Status Codes
private static string ErrorCodeToString(MembershipCreateStatus createStatus)
{

switch (createStatus)
{
case MembershipCreateStatus.Success:
return “User Successfully Created”;

case MembershipCreateStatus.DuplicateUserName:
return “User name already exists. Please enter a different user name.”;

case MembershipCreateStatus.DuplicateEmail:
return “A user name for that e-mail address already exists. Please enter a different e-mail address.”;

case MembershipCreateStatus.InvalidPassword:
return “The password provided is invalid. Please enter a valid password value.”;

case MembershipCreateStatus.InvalidEmail:
return “The e-mail address provided is invalid. Please check the value and try again.”;

case MembershipCreateStatus.InvalidAnswer:
return “The password retrieval answer provided is invalid. Please check the value and try again.”;

case MembershipCreateStatus.InvalidQuestion:
return “The password retrieval question provided is invalid. Please check the value and try again.”;

case MembershipCreateStatus.InvalidUserName:
return “The user name provided is invalid. Please check the value and try again.”;

case MembershipCreateStatus.ProviderError:
return “The authentication provider returned an error. Please verify your entry and try again. If the problem persists, please contact your system administrator.”;

case MembershipCreateStatus.UserRejected:
return “The user creation request has been canceled. Please verify your entry and try again. If the problem persists, please contact your system administrator.”;

default:
return “An unknown error occurred. Please verify your entry and try again. If the problem persists, please contact your system administrator.”;
}
}
#endregion

}

}

 

[Peter StoevKeymaster]

Hi Himanshu,

If the jqxDataAdapter is undefined, the jqxdata.js file is not loaded at the point you try to instantiate it. In addition, there are some small syntax errors in the code which I pointed out below.

script type=”text/javascript”>
$(document).ready(function () {
var source =
{
rl: “AccountUser/Information”,
type:”post”,
datatype: “json”,
datafields: [{ name: “UserId” }, { name: “FirstName” }, { name: “LastName”, }]
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
columnsresize: true,

columns: [
{ text: ‘UserId’, dataField: ‘UserId’, width: 100 },
{ text: ‘FirstName’, dataField: ‘FirstName’, width: 100 },
{ text: ‘LastName’, dataField: ‘LastName’, width: 80, cellsalign: ‘right’ },
]
});
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[HimanshuMember]

Hi Peter Stoev

Thanks, Now it is Working .

I have one More Query : As i told in above voice i am using MVC3 in dot net using C-Sharp .Now , My grid is Generated i would like to Generate a pop – up and the Select value comes automatically to the Pop-up and when i click on save it should save the Changes according to it. I have tried the Pop – up Editing View but it does not reflect the Changes in the Data Base. Is their any method so i can send i id of the Particular column to my Controller so the Delete Action can took Place

[Peter StoevKeymaster]

Hi Himanshu,

I suggest you to take a look at this help topic: asp.net-grid-crud.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[HimanshuMember]

Hi Peter Stove!

Thanks For the Reply It is working Properly.

[matookehouseitMember]

I AM HAVING SAME ERROR. RUNNING CODE IN .cshtml File in VS2010

———– Uncaught TypeError: Cannot read property ‘dataAdapter’ of undefined ——————-

This example shows how to integrate jqxGrid using jqxDataAdapter with Knockout.js.

$(document).ready(function () {
var initialData = [
{ name: “Well-Travelled Kitten”, sales: 352, price: 75.95 },
{ name: “Speedy Coyote”, sales: 89, price: 190.00 },
{ name: “Furious Lizard”, sales: 152, price: 25.00 },
{ name: “Indifferent Monkey”, sales: 1, price: 99.95 },
{ name: “Brooding Dragon”, sales: 0, price: 6350 },
{ name: “Ingenious Tadpole”, sales: 39450, price: 0.35 },
{ name: “Optimistic Snail”, sales: 420, price: 1.50 }
];

var GridModel = function (items) {
this.items = ko.observableArray(items);
this.disabled = ko.observable(false);

this.addItem = function () {
// add a new item.
if (this.items().length < 20) {
this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
}
};

this.removeItem = function () {
// remove the last item.
this.items.pop();
};

this.updateItem = function () {
// update the first item.
if (initialData.length) {
var item = {};
item.name = initialData[Math.floor(Math.random() * initialData.length)].name;
item.sales = Math.floor(Math.random() * 500);
item.price = Math.floor(Math.random() * 200);
this.items.replace(this.items()[0], item);
}
};
};

var model = new GridModel(initialData);
var source = {
localdata: model.items,
datatype: 'observablearray'
}

var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxGrid").jqxGrid({
autoheight: true,
theme: getDemoTheme(),
source: dataAdapter,
editable: true,
selectionmode: 'singlecell',
columns: [
{ text: 'Name', dataField: 'name', width: 200 },
{ text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
{ text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
]
});

ko.applyBindings(model);
});

Disabled

———————————–

Please help, cheers

[Peter StoevKeymaster]

Hi matookehouseit,

I suggest you to check whether all references in your code are included correctly.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[matookehouseitMember]

any email to send code? because some code is not allowed into editor.

[Peter StoevKeymaster]

Hi matookehouseit,

Please, check whether the path to the jQWidgets Script files is correct on your side. Such error could be raised only if the jqxdata.js is not included in your page. You might also check the Documentation about integration with ASP .NET, MVC3 & 4.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[matookehouseitMember]

here are my reference

jqxdata.js”>
jquery-1.8.3.min.js”>
json2.js”>
knockout-2.2.1.js”>
jqxcore.js”>
jqxbuttons.js”>
jqxscrollbar.js”>
jqxmenu.js”>
jqxgrid.js”>
jqxgrid.selection.js”>
jqxgrid.edit.js”>
jqxknockout.js”>
jqxcheckbox.js”>
gettheme.js”>

[Peter StoevKeymaster]

Hi,

Here’s a working sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxknockout/gridwithpaging.htm?web. Please, use it as a getting started sample.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[matookehouseitMember]

I know there are many working sample on site. but as soon I add into VS2010 I get this error.
any email to send code file.

cheers,

[Peter StoevKeymaster]

Hi matookehouseit,

That is not related to Visual Studio. We use Visual Studio as development IDE, too. Please, check whether the paths to these files are correct and check the help topics where you can learn how to create ASP .NET, MVC 3 & 4 project using jQWidgets.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts