This is a migrated thread and some comments may be shown as answers.

Using Telerik UI Components in Custom HTML Helper

2 Answers 111 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Leroy
Top achievements
Rank 1
Leroy asked on 13 Mar 2012, 10:24 AM
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.

2 Answers, 1 is accepted

Sort by
0
Leroy
Top achievements
Rank 1
answered on 13 Mar 2012, 12:00 PM
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 :)
0
Dadv
Top achievements
Rank 1
answered on 21 Mar 2012, 12:01 PM
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.
Tags
General Discussions
Asked by
Leroy
Top achievements
Rank 1
Answers by
Leroy
Top achievements
Rank 1
Dadv
Top achievements
Rank 1
Share this question
or