I have only been playing with MVC for the past month. I really like the Telerik controls for MVC, but I am having trouble getting the "Configuring Grid Ajax Data Binding" example from the video of that name to work correctly. I have a working Server Side example, but when I modify it as suggested in the video, I get a 500 Server Internal Error.
My index.aspx file is:
<%
@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</
asp:Content>
<
asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Grid for ASP.NET MVC</h2>
<b>Data Binding Basics - Server Binding </b>
<% Html.Telerik().Grid<TelerikAjax.Models.lobreg>("lobregs")
.Name(
"grid1")
.DataBinding(d => d.Ajax().Select(
"AjaxGrid", "Home"))
.Columns(c => {
c.Bound(o => o.lobnum).ReadOnly();
c.Bound(o => o.year).ReadOnly();
c.Bound(o => o.lastname).ReadOnly();
c.Bound(o => o.firstname).ReadOnly();
c.Bound(o => o.initial).ReadOnly();
c.Bound(o => o.phone).ReadOnly();
c.Bound(o => o.email).ReadOnly();
})
.PrefixUrlParameters(
false)
.Pageable()
.Sortable()
.Filterable()
.Groupable()
.Render();
%>
</
asp:Content>
My controller is:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TelerikAjax.Models;
using Telerik.Web.Mvc;
namespace TelerikAjax.Controllers
{
[
HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData[
"lobregs"] = new MVCLobbyingDataContext().lobregs.ToList();
return View();
}
public ActionResult About()
{
return View();
}
[
GridAction]
public ActionResult AjaxGrid()
{
return View(new GridModel(new MVCLobbyingDataContext().lobregs));
}
}
}
I think I have followed the example correctly, but perhaps I missed something...
I noticed that the example is for MVC 1, and I am using MVC 2. Is there something I need to change to make the example work with MVC 2?
5 Answers, 1 is accepted
Please check this help topic devoted on some known errors.
All the best,
Georgi Krustev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
What I ended up doing is creating a class simply for the grid and would then select into the new class.
| public class LobregDisplay { |
| public string FirstName {get; set;} |
| public string LastName {get; set;} |
| } |
| lobregs.Select(l => new LobregDisplay{FirstName = l.firstname, LastName = l.lastname}); |
And then also make sure you change the type used for .Grid() method
| Html.Telerik().Grid<LobregDisplay>() |
Rank 1
I created a viewmodel and tried to implement it as the document to which you referred me stated, but I now get different errors depending upon whether I try to implement Ajax in the Index view or in another view.
In the Index view, if I modify the home controller to pass in a model, do I have to specify that model in the @Page directive? If so, what do I put there?
I decided to leave the Index view alone, and add another view FindLobbyists that I could ajax-ify. Into that view, I pass my "viewmodel". I think FindLobbyists is receiving a <System.Data.Linq.DataQuery<TelerikAjax.Models.LobbyistViewModel>>. Is this correct?
In the view, I defined the grid as follows:
<%
Html.Telerik().Grid(Model)
.Name(
"grid1")
.Ajax(a => a.Action(
"AjaxGrid", "Home"))
.Columns(c =>
{
c.Bound(o => o.lobnum).ReadOnly();
c.Bound(o => o.year).ReadOnly();
c.Bound(o => o.lastname).ReadOnly();
c.Bound(o => o.firstname).ReadOnly();
c.Bound(o => o.initial).ReadOnly();
c.Bound(o => o.phone).ReadOnly();
c.Bound(o => o.email).ReadOnly();
})
.PrefixUrlParameters(
false)
.Pageable()
.Sortable()
.Filterable()
.Groupable()
.Render();
%>
I get the error: 'System.Data.Linq.DataQuery<TelerikAjax.Models.LobbyistViewModel>' is inaccessible due to its protection level
Any ideas would be quite welcome!
UPDATE: I am able to make Ajax binding work if I remove any associations from the table I am using. I should now be able to make the ViewModel approach work...
Rank 1
I had set up my classes using Linq-to-Sql and I used the actual associations that the tables have with each other.
According to the article that Georgi listed (see his response) I need to do as you say. I am still trying to make THAT work...
Anyway, your response was on thre right track!
Rank 1
I first made it work (even in the Index view!) by using only one table for which Linq-to-Sql creates a model. Then I re-created my Linq-to-Sql model using all tables and their associations, and it still worked. I must have done something wrong in my previous attempts.
I didn't have to change the model that the Index view uses. This surprises me. I would have thought the Index view would need to receive an IEnumerable<LobbyistViewModel>. Here is the working code from Index.aspx:
Html.Telerik().Grid<TelerikAjax.Models.
lobreg>("lobregs")
.Name(
"grid1")
.DataBinding(d => d.Ajax().Select(
"AjaxGrid", "Home"))
.Columns(c =>
{
c.Bound(o => o.lobnum).ReadOnly();
c.Bound(o => o.year).ReadOnly();
c.Bound(o => o.lastname).ReadOnly();
c.Bound(o => o.firstname).ReadOnly();
c.Bound(o => o.initial).ReadOnly();
c.Bound(o => o.phone).ReadOnly();
c.Bound(o => o.email).ReadOnly();
})
.PrefixUrlParameters(
false)
.Pageable()
.Sortable()
.Filterable()
.Groupable()
.Render();
And from HomeController:
public ActionResult Index()
{
var model = from l in new MVCLobbyingDataContext().lobregs
select new LobbyistViewModel
{
lobnum = l.lobnum,
year = l.year,
lastname = l.lastname,
firstname = l.firstname,
initial = l.initial,
email = l.email,
phone = l.phone,
};
return View(model);
}
[
GridAction]
public ActionResult AjaxGrid()
{
var model = from l in new MVCLobbyingDataContext().lobregs
select new LobbyistViewModel
{
lobnum = l.lobnum,
year = l.year,
lastname = l.lastname,
firstname = l.firstname,
initial = l.initial,
email = l.email,
phone = l.phone,
};
return View(new GridModel
{
Data = model
});
}