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
Greg Quinn
215
Paging problem with MVC
posted

I am using Jquery 2013 vol1 with ASP.NET MVC4 and Visual Studio 2012 Update 2.
 

My grid shows the data  for the first page, but when I click to go to the 2nd page, no data appears.

I have checked in the breakpoint, and the action is being called to return the data, yet nothing gets returned.

I have also tried decorating the action called by .DataSourceUrl(Url.Action("Index"))  with the [GridDataSourceAction] attribute, yet when I do that, I get the following Javascript error thrown by Internet Explorer...

Unhandled exception at line 35, column 25843 in http://localhost:58362/Infragistics/js/modules/infragistics.datasource.js
0x800a138f - JavaScript runtime error: Unable to get property 'length' of undefined or null reference

 
I am not sure how to get this working, no matter what I try it doesn't work.

Here is the code for my Index.cshtml

---------------------------------------------------------------

@using Infragistics.Web.Mvc
@using WorkawayWeb.Repository
@model List<WorkawayWeb.EditableVisaType>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.js")"></script>
<script src="@Url.Content("~/Infragistics/js/infragistics.loader.js")"></script>
<script type="text/javascript">
$("#grid1").live("iggridupdatingrowadded", function () {
$("#grid1").igGrid("saveChanges");
});

$("#grid1").live("iggridupdatingeditrowended", function (event, ui) {
if(ui.rowAdding == false)
$("#grid1").igGrid("saveChanges");
});

$("#grid1").live("iggridupdatingrowdeleted", function () {
$("#grid1").igGrid("saveChanges");
});
</script>
</head>
<body>
@(Html.Infragistics().Loader()
.ScriptPath(Url.Content("~/Infragistics/js/"))
.CssPath(Url.Content("~/Infragistics/css/"))
.Render()
)
<div>
@(Html.Infragistics().Grid(Model.AsQueryable()).ID("grid1").PrimaryKey("id")
.Columns(column =>
{
column.For(x => x.id).HeaderText("Product ID").Width("100px").Hidden(true);
column.For(x => x.name).HeaderText("Product Name").Width("250px");
})
.AutoCommit(true)
.AutoGenerateColumns(false)
.Features(features =>
{
features.Paging().PageSize(10).Type(OpType.Remote);
features.Sorting().CaseSensitive(true);
features.Selection().Mode(SelectionMode.Cell).MultipleSelection(true);
features.Updating().EditMode(GridEditMode.Row).EnableAddRow(true).StartEditTriggers(GridStartEditTriggers.DblClick);

})
.Width("800px")
.Height("600px")
.DataSourceUrl(Url.Action("GetData"))
.UpdateUrl(Url.Action("EditingSaveChanges"))
.DataBind()
.Render())
</div>
</body>
</html>

 ----------------------------------------

Here is the code for my controller

using System;
using System.Collections.Generic;
using System.Web.Mvc;
using Infragistics.Web.Mvc;
using WorkawayWeb;
using WorkawayWeb.Repository;

namespace InfragisticsMvcApp1.Controllers
{
public class VisaTypeController : Controller
{
public ActionResult Index()
{
var ds = VisaTypeRepository.GetAllRecords();
return View(ds);
}

[GridDataSourceAction]
public ActionResult GetData()
{
var ds = VisaTypeRepository.GetAllRecords();
return View("Index", ds);
}

[GridDataSourceAction]
[ActionName("EditingGetData")]
public ActionResult EditingGetData()
{
var ds = VisaTypeRepository.GetAllRecords();
return View("Index", ds);
}
}
}

Thanks