Adding an Edit column to a telerik grid using ASP.Net MVC 2 and Telerik MVC (2010 Q1)

Question

I have been successful with creating a Telerik grid to display a list of products, however I've gone through some difficulty adding the column to allow a user to edit (I'm not even trying to edit within the grid - I simply want a link to an edit view)

When I add the custom column, I get the following lines in my error screen when I debug (Line 24 in red):

Line 22:                          columns.Add(o => o.ProductIsActive);
Line 23:                          columns.Template(o =>
Line 24:                          {
Line 25:                              
Line 26:                              %><%=Html.ActionLink("Edit", "Edit", new { id = o.ProductID })%><% }).Title("Edit");

My Compiler Error Message is Compiler Error Message: CS1525: Invalid expression term ')'

Here is my View Code:

<%= Html.Telerik().Grid<NationalPetVax.Models.Product>()
          .Ajax(ajax => ajax.Action("_Index", "Products"))
          .DataKeys(dataKeys => dataKeys.Add(c => c.ProductID))
          .DataBinding(dataBinding => dataBinding.Ajax().Update("Update", "Home"))

          .Name("Grid")
                 .Columns(columns =>
                 {
                     columns.Add(o => o.ProductName).Width(81);
                     columns.Add(o => o.ProductPrice).Width(200);
                     columns.Add(o => o.ProductType.ProductTypeName);
                     columns.Add(o => o.Specy.SpeciesName);
                     columns.Add(o => o.ProductIsActive);
                     columns.Template(o =>
                     {

                         %><%=Html.ActionLink("Edit", "Edit", new { id = o.ProductID })%><% }).Title("Edit");

                     })
          .Sortable()
          .Scrollable()
          .Pageable();
    %>

Has anyone ever seen this issue? I have followed the tutorials over and over and am about to give up on the telerik grids all together, although I really like them and want to include in my projet.

Solution 1

I don't know about Telerik. But it looks like the problem is about the closing/opening tags inside the expression. Try this :

columns.Template(o =>
              { 
                  Response.Write(Html.ActionLink("Edit", "Edit", 
                  new { id = o.ProductID })); 
              }).Title("Edit");

Solution 2

The following code will solve your issue and will make code little tidy.

columns.Bound(o => o.ProductId).Format(
             Html.ActionLink("Edit", "Edit", new {Id = "{0}"}).ToString());

Also Bound is the new Add in 2010 Q1 release

Solution 3

If you want to keep your "gator tags" in your code like

columns.Template(o =>
                     {

                         %><%=Html.ActionLink("Edit", "Edit", new { id = o.ProductID })%><% }).Title("Edit");

                     })

You just need to change how you are calling this. At the top you are doing a

<%=

Change that to

<%

And just call

.Render()

at the end of your grid declaration. That will prevent the "invalid expression term" error. Your entire new code should look like

<% Html.Telerik().Grid<NationalPetVax.Models.Product>()
          .Ajax(ajax => ajax.Action("_Index", "Products"))
          .DataKeys(dataKeys => dataKeys.Add(c => c.ProductID))
          .DataBinding(dataBinding => dataBinding.Ajax().Update("Update", "Home"))

          .Name("Grid")
                 .Columns(columns =>
                 {
                     columns.Add(o => o.ProductName).Width(81);
                     columns.Add(o => o.ProductPrice).Width(200);
                     columns.Add(o => o.ProductType.ProductTypeName);
                     columns.Add(o => o.Specy.SpeciesName);
                     columns.Add(o => o.ProductIsActive);
                     columns.Template(o =>
                     {

                         %><%=Html.ActionLink("Edit", "Edit", new { id = o.ProductID })%><% }).Title("Edit");

                     })
          .Sortable()
          .Scrollable()
          .Pageable()
          .Render();
    %>

Solution 4

i want to add some review for the code. try this, it's work

columns.Add(c => c.CustomerID).Format( Html.ActionLink("Edit", "Home", new { id = "{0}"}}) ).Encoded(false).Title("Edit");

Solution 5

Its a very late reply but may prove helpful to others. You can't use only server template columns in Ajax mode for the Telerik grid. If you just want to add an extra column to your grid which is not bound to anything (while still maintaining Ajax mode) try something like this

columns.Template(o=>{}).ClientTemplate(
    Html.ActionLink("<Link text here>", "<action name>", "<controller name>", 
        new { id = "<#= ID #>" }, new { @class = "Edit" }).ToString()
).Title("Edit Column")

This will render properly and any data that you want with the link will be taken care of too.

View more solutions