[Solved] Razor : Grid containing Ajax Link.

[Adam]

Hi all,

I am wanting to use a template column within a grid using the razor engine.

Using the code below, no actually ajax link is rendered. Can anyone see where i am going wrong?

@(Html.Telerik().Grid(Model)

.Name(

 

"gvList")
.Columns(columns =>
{
    columns.Bound(a => a.ID).Title("ID").Width(20);
    columns.Bound(a => a.Name).Title("Name");
    columns.Template(a =>
    {
        @Ajax.ActionLink("[ Select ]", "GetById", "Other", new { id = a.ID }, 
        new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "otherDiv" });
    }
    );
 })
)

The intention is when the select link is clicked, a separate partial is render asynchronously.

Any insight appreciated.

Cheers,

 

[Atanas Korchev]

Hi Adam,

 This is not the proper way to use templates in razor. Try this:

columns.Template(@Ajax.ActionLink("[ Select ]", "GetById", "Other", new { id = @item.ID }, 
        new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId ="otherDiv" }));

You can always check our online demos - there is a razor version of every one of them.

Regards,
Atanas Korchev
the Telerik team

[Adam]

Hi there,

columns.Template(@Ajax.ActionLink(

 

"[ Select ]", "GetById", "Other", new { id = @item.ID }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "otherList" }));

 

The suggested syntax above produces the following error:

Using the code above i get the following error: CS1502: The best overloaded method match for 'Telerik.Web.Mvc.UI.Fluent.GridColumnFactory<MyModel>.Template(System.Action<MyModel>)' has some invalid arguments

Using the same @Ajax.ActionLink code outside of the grid works of course.

Thanks.

[Atanas Korchev]

Hi Adam,

I think I mislead you in my last reply. Please try with this:

columns.Template(<text>
@Ajax.ActionLink("[ Select ]", "GetById", "Other", new { id = @item.ID }, 
        new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId ="otherDiv" })
</text>
);

Here is how the template in our razor demo looks like:

columns.Template(
                @<text>
                    <img 
                        alt="@item.CustomerID " 
                        src="@Url.Content("~/Content/Grid/Customers/" + item.CustomerID + ".jpg") " 
                      />
                </text>
            ).Title("Picture");

Regards,
Atanas Korchev
the Telerik team

[Adam]

Hi,

Prepending @text simply renders the that actual source code to the browser.

The examples (from the demo's) i have scene are only dealing with text based rendering.

My requirement is to add a column template containing an ajax helper CONTROL, which doesn't appear to be covered.

Do column templates support adding actual controls, not just markup!?

Thanks.

[T. Tsonev]

Hi Adam,

Nesting controls is indeed possible, as seen in the Server Templates demo.

Since you're using an expression inside the template you need to wrap the grid in a code block instead of an expression:

@{ Html.Telerik().Grid(Model)
    .Name("gvList")
    .Columns(columns =>
    {
        // ...
        columns.Template(a =>
        {
            @Ajax.ActionLink("[ Select ]", "GetById", "Other", new { id = a.ID },
            new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "otherDiv" });
        }
        );
    })
    .Render();
}

Note that you need to call Render() when using a code block.
I hope this helps.

Best Regards,

Tsvetomir Tsonev
the Telerik team

[Adam]

Hi

Implementing the code above does not result in any errors (that i can see), but also doen't not render the required ajax link either?

Adam

[T. Tsonev]

Hi Adam,

You are correct, the last solution doesn't produce an output. My mistake is that I didn't omit the lambda syntax (a=>{ }) that is not supported in Razor.

Here's the correct syntax:

columns.Template(
        @<text>
            @Ajax.ActionLink("[ Select ]", "GetById", "Other", new { id = item.Id },
            new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "otherDiv" })
        </text>
);

Note that we're using item instead of explicitly named variable. I've attached a working example.

Greetings,
Tsvetomir Tsonev
the Telerik team

[Adam]

Tsvetomir ,

Thanks, that was the correct approach!

Adam

[Alfredo]

Hi, 
sorry to repost to an answered post, but I won't open a new it for a similar issue.
In my case I have an actionlink in a grid declared as: 

columns.Template(@<text>
@Ajax.ActionLink("Visualizza", "DetailsMessage", new { idM = item.IDMessage }

new  AjaxOptions() { UpdateTargetId = "divBody", OnSuccess = "updatePlaceholder", HttpMethod = "POST" })

</text>);

but, I'm a bit confused about what I must return, because I don't want to load a partial view, but only apply a string to the div(this is the script).

function updatePlaceholder(context) {

       // the HTML output of the partial view
       var html = context.get_data();

       // the DOM element representing the placeholder
       var placeholder = context.get_updateTarget();

       // use jQuery to update the placeholder. It will execute any JavaScript statements
       $(placeholder).html(html);

       // return false to prevent the automatic update of the placeholder
       return false;
   }

And in the controller:

[HttpPost]
public ActionResult DetailsMessage(int idM)
{
    Messaggio messaggio = this._messaggioRepository.Get(idM);
    return Json(messaggio.Testo);
}

In this way I obtain a not found page, because it tries to search a page /DetailsMessage after the response. How I can handle this?

Thanks in advance!

[Alfredo]

I solved using an Html.ActionLink

@Html.ActionLink("Visualizza", "DetailsMessage", new { idM = item.IDMessaggio})

$(function () {
        $('td a').click(function () {
            // send ajax request
            $.get(this.href, function (result) {
                // The ajax request succeeded => do something with the results
                //alert(result);
                if (result != null && result != "") {
                    $("#divBody").html(result);
                    $("#divBody").dialog();
                }
            });
            // make sure you cancel the default redirect action
            return false;
        });
    });

And in the controller:

public string DetailsMessage(int idM)
{
    Messaggio messaggio = this._messaggioRepository.Get(idM);
    return messaggio.Testo;
}

Hope this helps someone.

[Craig]

I've read this thread end-to-end and looked carefully at the sample at http://demos.telerik.com/aspnet-mvc/razor/grid/templatesserverside and still this is not working. The page throws no error but the column doesn't render anything. I'm using version 2011.1.315.340, my code is as follows:

@{
    Html.Telerik().Grid<BusinessEntities.Client>()
       .Name("grid-clients")
       .NoRecordsTemplate("No clients found.")
       .Columns(columns =>
       {
           columns.Template(
            @<text>
                @Html.ActionLink("Click me", "Index", "Portfolio", new { id = item.AccountNumber })
            </text>).Title("Links");
           columns.Bound(c => c.AccountNumber).Title("Account");
           columns.Bound(c => c.Name);
       })
       .DataBinding(dataBinding => dataBinding.Ajax().Select("ClientsGridAsync", "Clients"))
       .Sortable()
       .Groupable()
       .Filterable()
       .Pageable(pager =>
       {
           pager.PageSize(15);
       }).Render();
}

[Craig]

If it's of any use to anybody, I got it working with the following:

@(
    Html.Telerik().Grid<BusinessEntities.Client>()
       .Name("grid-clients")
       .NoRecordsTemplate("No clients found.")
       .Columns(columns =>
       {
           columns.Template(c =>
               {
                   Html.ActionLink("Click me", "Index", "Portfolio", new { id = c.AccountNumber });
               })
               .ClientTemplate("<a href=\"" + Url.Action("Index", "Portfolio") + "/<#=AccountNumber#>" + "\">Click me</a>");
           columns.Bound(c => c.AccountNumber).Title("Account");
           columns.Bound(c => c.Name);
       })
       .DataBinding(dataBinding => dataBinding.Ajax().Select("ClientsGridAsync", "Clients"))
       .Sortable()
       .Groupable()
       .Filterable()
       .Pageable(pager =>
       {
           pager.PageSize(15);
       })
)

The example on this page omits the equals (=) in the preprocessor binding expression, but the rest is good:
http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-troubleshooting.html#ClientTemplates