Using Telerik UI Components in Custom HTML Helper

[Leroy]

To reduce the code I have in views I try to create Helpers that do the bulk of the viewing work for me.

The following code (in razor) occurs very often:

@{ Html.Telerik()
    .Grid(Model)
    .Name("Grid")
    .Columns(columns => {
        columns.Template(o => o.Name);
        columns.Template(o => @Html.ActionLink("Edit", "Edit", new { id = o.Id }));
        columns.Template(o => @Html.ActionLink("Delete", "Delete", new { id = o.Id }));
    })
    .Render();
}

And I would like to create an HTML helper that will simply call this whole function block and render it to the page.

I have created a helper with a static method and included the Telerik.Web.Mvc.UI namespace.

However, when I try to use this namespace from code I'm having a hard time creating even a simple grid. The Grid class in the namespace is generic (as opposed to the one used in views) and requires a viewContext and other parameters that I cannot instantiate. I get the feeling I'm not using the correct approach here.

[Leroy]

I already fixed the problem myself, silly how explaining your problem can be so insightful.

The solution is to use the helper object directly passed in your extension method of your custom HTML helper

You need to declare: using Telerik.Web.Mvc.UI;

Then you can use the HtmlHelper as follows:

public static void NamedGrid(this HtmlHelper helper, IList<NamedEntity> Model)
        {
            helper.Telerik().Grid(Model).Name("Grid").Columns(columns => {
                    columns.Template(o => o.Name);
                    columns.Template(o => helper.ActionLink("Edit", "Edit", new { id = o.Id }));
                    columns.Template(o => helper.ActionLink("Delete", "Delete", new { id = o.Id }));
                })
                .Render();
        }

Topic can be closed :)

[Dadv]

Note that instead of using template you could use the inbuilt telerik custom command :

columns.Command(c => c.Custom("Edit").ButtonType(GridButtonType.Text).Action("Edit","Tracking").Text("Edit").SendDataKeys(true));
this command is "datakeys free" (you don't need to know the name of the Id key.

the only thing to do in your grid is to add :

.DataKeys(c => c.Add(d => d.Id).RouteKey("Id")) (change the Id name is necessary)

so you can create a extender like this :

public static GridActionColumnBuilder Edit<T>(this GridColumnFactory<T> builder)
            where T : class
        {
            return builder.Command(c => c.Custom("Edit").ButtonType(GridButtonType.Text).Action("Edit", "Edit").Text("Edit").SendDataKeys(true));
        }


public static GridActionColumnBuilder Delete<T>(this GridColumnFactory<T> builder)
            where T : class
        {
            return builder.Command(c => c.Custom("Delete").ButtonType(GridButtonType.Text).Action("Delete", "Delete").Text("Delete").SendDataKeys(true));
        }

@{ Html.Telerik()

    .Grid(Model)
      .DataKeys(c => c.Add(d => d.Id).RouteKey("Id"))  


    .Name("Grid")

    .Columns(columns => {

        columns.Bound(o => o.Name);

        columns.Edit();

        columns.Delete();

    })

    .Render();

}

But in all the case it's more efficient to use internal Edit/Delete command with the inbuilt databinding.