Telerik MVC Grid does not display data - telerik-grid

Question

I am using version 2011.2.914 of the controls. Whenever I try to bind data from my controller to a view, I can't get the data inside the collection to display on the grid. I get the "No records to display" message from the grid.
I want to point out that if I am not using the Telerik grid, the data comes out fine (see below):
Controller without Telerik Grid
IEnumerable<YeagerTechWcfService.Customer> customerList = db.GetCustomers();
return View("Index", customerList);
View
#model IEnumerable<YeagerTech.YeagerTechWcfService.Customer>
#{
ViewBag.Title = "Customer Index";
}
<h2>Customer Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
Email
</th>
<th>
Company
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Address1
</th>
<th>
Address2
</th>
<th>
City
</th>
<th>
State
</th>
<th>
Zip
</th>
<th>
HomePhone
</th>
<th>
CellPhone
</th>
<th>
Website
</th>
<th>
IMAddress
</th>
<th>
CreatedDate
</th>
<th>
UpdatedDate
</th>
<th>
</th>
</tr>
#if (ViewData.Model != null)
{
foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Email)
</td>
<td>
#Html.DisplayFor(modelItem => item.Company)
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Address1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Address2)
</td>
<td>
#Html.DisplayFor(modelItem => item.City)
</td>
<td>
#Html.DisplayFor(modelItem => item.State)
</td>
<td>
#Html.DisplayFor(modelItem => item.Zip)
</td>
<td>
#Html.DisplayFor(modelItem => item.HomePhone)
</td>
<td>
#Html.DisplayFor(modelItem => item.CellPhone)
</td>
<td>
#Html.DisplayFor(modelItem => item.Website)
</td>
<td>
#Html.DisplayFor(modelItem => item.IMAddress)
</td>
<td>
#Html.DisplayFor(modelItem => item.CreatedDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.UpdatedDate)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.CustomerID }) |
#Html.ActionLink("Details", "Details", new { id = item.CustomerID })
</td>
</tr>
}
}
</table>
I have tried ServerSide and Ajax Binding. Both don't work. I have searched the Telerik site and the web and can't find out what is missing.
What do I need to do in order to resolve this and get the data in my grid?
Here is the code in my Customer controller for the Ajax binding (which is what I really want). Upon return of getting the data, I have an image file that I saved where the data is in the customerList collection (there is no option to attach any files in StackOverflow, so I can't show you).
When the View is being rendered, I captured data while debugging for several objects.
When cycling through the grid during the binding, I captured data in another file.
Controller using Telerik Grid:
using Telerik.Web.Mvc;
public class CustomerController : Controller
{
[GridAction]
public ActionResult Index()
{
IEnumerable<YeagerTechWcfService.Customer> customerList = db.GetCustomers();
return View(new GridModel<YeagerTechWcfService.Customer>
{
Data = customerList
});
}
}
Below, is the code in my associated View. btw, all the bound columns have intellisense that pop up for the columns in my model. This is for the Index action within the Customer controller.
#model Telerik.Web.Mvc.GridModel<YeagerTech.YeagerTechWcfService.Customer>
#{
ViewBag.Title = "Customer Index";
}
<h2>
Customer Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table>
#(Html.Telerik().Grid<YeagerTech.YeagerTechWcfService.Customer>()
.Name("Customers")
.Columns(columns =>
{
columns.Bound(o => o.Email);
columns.Bound(o => o.Company);
columns.Bound(o => o.FirstName);
columns.Bound(o => o.LastName);
columns.Bound(o => o.Address1);
columns.Bound(o => o.Address2);
columns.Bound(o => o.City);
columns.Bound(o => o.State);
columns.Bound(o => o.Zip);
columns.Bound(o => o.HomePhone);
columns.Bound(o => o.CellPhone);
columns.Bound(o => o.Website);
columns.Bound(o => o.IMAddress);
columns.Bound(o => o.CreatedDate).Format("{0:MM/dd/yyyy}");
columns.Bound(o => o.UpdatedDate).Format("{0:MM/dd/yyyy}");
}).DataBinding(dataBinding => dataBinding.Ajax().Select("Index", "Customer"))
.Pageable()
.Sortable()
.Scrollable()
.Resizable(resizing => resizing.Columns(true))
.Filterable())
</table>

Answer 1

Maybe there's a conflic with your Index action method since that you have a View that is referenced to it. The first test to do is to show your grid without playing with Ajax or anything else.
Try this to initialize your grid when your View Index is build. Notice the Model.Data that i'm using in the Grid constructor:
#(Html.Telerik().Grid<YeagerTech.YeagerTechWcfService.Customer>(Model.Data)
.Name("Customers")
.Columns(columns =>
{
columns.Bound(o => o.Email);
columns.Bound(o => o.Company);
...
}))
If it work, then you should try to create another Action method with another name. In my projects, i do this:
[GridAction]
public ActionResult GetYeagerTechGridData()
{
IEnumerable<YeagerTechWcfService.Customer> customerList = db.GetCustomers();
return View(new GridModel<YeagerTechWcfService.Customer>
{
Data = customerList
});
}
and use your grid that way:
#(Html.Telerik().Grid<YeagerTech.YeagerTechWcfService.Customer>()
.Name("Customers")
.Columns(columns =>
{
columns.Bound(o => o.Email);
columns.Bound(o => o.Company);
...
})
.DataBinding(dataBinding => dataBinding.Ajax().Select("GetYeagerTechGridData", "Customer")))