I'm trying to create grid with one column is "ActionLink".
The code look like -
col.Bound(o => o.BrunchCode);
col.Template(@<
text
>
@Html.ActionLink(@item.BrunchCode.ToString(), "Brunch", "Statistics",
new { brunchid = @item.BrunchCode })
</
text
>)
.Title("Test");
col.Bound(o => o.BrunName);
I got right html ( in chrom/fiddler) but then the kendo script override the grid and this column become "undefined".
Thanks
Adiel
2 Answers, 1 is accepted
It seems that your grid is ajax bound. In this case you should also define a ClientTemplate for all template columns:
col.Template(@<text>
@Html.ActionLink(@item.BrunchCode.ToString(),
"Brunch"
,
"Statistics"
,
new
{ brunchid = @item.BrunchCode })
</text>)
.ClientTemplate(
"<a href='/brunch/statistics/brunchid=#= BrunchCode#'>#=BrunchCode#</a>"
)
.Title(
"Test"
);
Atanas Korchev
the Telerik team
Useful answer - I had the same question.
However, does the @Html.ActionLink method still serve any purpose in this example? It seems the HTML anchor is now generated entirely from the markup specified by the ClientTemplate(...) parameter.
Regards, Ian
Yes, the ActionLink helper isn't used in the example. You could pass the result generated from the helper to the ClientTemplate by calling the ToHtmlString extension method but since the client expression "#= #" will be encoded, the route values will not be evaluated on the client.
Regards,
Daniel
the Telerik team
@Html.Kendo().Grid(Model).Name("grdSearchResults").Columns(column=>
{
column.Bound(c => c.FormID).Title("Form Number");
column.Bound(c => c.Country).Title("Country");
column.Bound(c => c.State).Title("State");
column.Template(c => @Html.ActionLink(c.Description, "foo", new { id = c.prop, }));
I believe that wouldn't work with AJAX mode.
In this case, you should set ClientTemplate.
Regards
I have an Ajax grid with MVC wrapper (VB and Razor). I want to put hyper links into grid cells, but the href and innertext both need to vary for each link. All the examples for hyperlinking in the grid seem to assume that there is only one variable.
As far as I can see, you can't reference two different properties of "p." within one bound column, for example p.title and p.href. Is this true?
If I can't handle two properties at once, then it seems like I need to pass the whole <a> link in the JSON. The trouble is I can't stop it getting HTML encoded. I have tried
column.Bound(Function(p) p.DecisionUrl).ClientTemplate("#: DecisionUrl #")
and .Encoded(False) seems to make no difference either.
For testing purposes I have hard coded the URL server-side in a string, so unless the HTML encoding must be coming from either the JSON or Kendo?
Thoughts anyone?
I can't help feeling a really comprehensive hyperlink example would be a plus in the documentation.
Cheers
Mark
This solution is for Ajax grids on the first formal release of the MVC wrappers. This is my opinion, and the Kendo admins may disagree.
1. The use of .template as above seems a bit pointless. You can use them, but it doesn't really do much in the relatively simple cases I have. As observed above, you need to use the ClientTemplate.
2. It seems you can reference any property in your data model within the ClientTemplate, even if you haven't bound a column to it. And any number of different properties, so you can build a <a> link easily. You reference a property like #=myProperty#
3. I still can't get the .Encode(false) option to work, but this doesn't seem to be a problem when using the client template. There is also an #:myProperty# option to not encode the property value, but I didn't seem to need to use it.
4. If you bind a column then apply a client template it looks to me like the sorting uses the bound column data, not the ClientTemplate output. Nice!
5. For hyperlinks, you just bind the hyperlink text as a column, then use a clienttemplate to create the <a> tags, reference an href property and the link text property.
So I have ended up with something like below -maybe the first VB example on the forum?
@( Html.Kendo().Grid(Of IssueManager.MeetingSummaryVM)() _
.Name("mgMainGrid") _
.Sortable() _
.Scrollable() _
.Filterable() _
.Events(Function(f)
f.Change("gridSelectUnSelect")
f.DataBound("gridOnActionSuccess")
End Function) _
.Selectable(Function(selectable) selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)) _
.Columns(Function(column)
column.Bound(Function(p) p.AgendaStatusText).ClientTemplate("<
a
class
=
'mgGoto'
href
=
'#=AgendaStatusHref#'
>#=AgendaStatusText#</
a
>").Title("Agenda status").Width(180)
column.Bound(Function(p) p.DecisionsStatusText).ClientTemplate("<
a
class
=
'mgGoto'
href
=
'#=DecisionsStatusHref#'
>#=DecisionsStatusText#</
a
>").Title("Decisions status").Width(180)
column.Bound(Function(p) p.MinutesStatusText).ClientTemplate("<
a
class
=
'mgGoto'
href
=
'#=MinutesStatusHref#'
>#=MinutesStatusText#</
a
>").Title("Minutes status").Width(180)
column.Bound(Function(p) p.StatusDescriptionImportant).Title("Status")
column.Template(Function(p)
@<
text
>
Just to demo a template: @p.Id
</
text
>
End Function).ClientTemplate("<
a
href
=
'#=DateTimeString#'
>#=DecisionsStatusText#</
a
>").Title("test").Width(180)
End Function) _
.DataSource(Function(dataSource) dataSource.Ajax() _
.Read(Function(read) read.Action("GridRead", "ManageMeetings") _
.Data("additionalData")))
)
So, the ClientTemplates are really nice, just in need of clearer examples for idiots like me!
Mark
But values (between #) in ClinetTemplate are not encoded. What if some text values in your example have not HTML encoded dangerous values. For example, one of your "AgendaStatusText" values will be something like "some text and <script type="text/javascript">alert('test')</script>". In this case you'll get an alert window.
I reported this issue for Telerik Mvc Extensions 6 months ago (here) but haven't got any response from them.
Kendo UI demo is also vulnerable. For example, have a look at this demo page. Fields suchs as "ContactName" won't be HTML encoded in client template
I had the same issue. I used Replace method to replace encoded values with #=XXX# value. Here is a link to my solution: Html.ActionLink and ClientTemplate
Just thought I'd add to this thread with a solution I found.
columns.Bound(o => o.Name).ClientTemplate(@Html.ActionLink("#=Name#", "Edit", new { ID = "#=ID#" }).ToHtmlString());
Using the ActionLink helper (rather than hard coding the tags) means we can tap into the routing system, making maintenance a lot
easier later on.
In the above code when i am trying to pass the BrunchCode to the controller it is passing null value for this.
Could you please help me with this.
Thanks,
Rajesh
Hi
How to use client template to create a Total column = Price*Quantity This is my grid, I try many my grid is . Can you help me Thank you.
@modenumerable<
dynamic
>
@(
HtmlKenel)Name"Gr
")
=> Ajax)
Modelm =>
{
"Id");
Field"Name", typeofstring));
Field"Price", typeofdecimal));
Field"Quantity", typeofdecimal));
Field"", typeofDateTime));
})
Read => Action"Read", "Home"))
Update => Action"Update", "Home"))
Destroy => Action"Destroy", "Home"))
Create => Action"Create", "Home"))
)
=> Create))
Columnscolumns =>
{
Bound"Name");
Bound"Price")Format"{0c}");
Bound"Quantity");
Bound"")Format"{0/MM/yyyy}");
Commandcommand =>
{
Edit);
Destroy);
});
})
=> TemplateName"ProductItem")ModeGridEditModePopUp))
=>
Refreshtrue)
true)
)
)
Filterable)
)
Please do not post the same question in multiple forum threads, as this creates confusion, overhead and delays.
Regards,
Dimo
Telerik
You can also use the Html.RouteLink to build the link in the ClientTemplate.
columns.Bound(o => o.Name).ClientTemplate(@Html.RouteLink("#=Name#", "ROUTENAME", new { ROUTEPARAMTER = "#=ID#" }).ToHtmlString());
How can i generate, using kendo ui grid with mvc, a qrcode for every row of grid with link to id page of this row element?
I have something like in the image.
Hello,
I'm new to Kendo UI and also to ASP.Net MVC and i have a grid with an ajax DataSource linked to a ViewModel and i can't figure out how to make ActionLinks in colums:
<
div
id
=
"entries"
>
@(Html.Kendo().Grid<
ApprenticeJournal.ViewModels.EntryViewModel
>()
.Name("entries")
.Columns(columns => {
columns.Bound(e => e.Title);
columns.Bound(e => e.EntryDate);
columns.Bound(e => e.Text);
columns.Bound(e => e.Creator);
//columns.Template(@<
text
>@Html.ActionLink(@)</
text
>)
//columns.Bound(e => e.EntryId).ClientTemplate(@Html.ActionLink("Entry", "Edit", new { id = "#=Id#" }).ToHtmlString());
//columns.Template(@<
text
> @Html.ActionLink("Entry", "Edit").ToHtmlString()</
text
>);
//columns.Template(c => @Html.ActionLink("Entry", "Delete", new { id = c.EntryId }).ToHtmlString());
})
.ToolBar(toolBar => toolBar.Template("<
a
class
=
'k-button k-button-icontext'
href
=
'../../Entry/Create'
></
span
>Create Entry</
a
>"))
//.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
)
.Sortable()
.DataSource(datasource => datasource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model => {
model.Id(e => e.EntryId);
model.Field(e => e.Title);
model.Field(e => e.EntryDate);
model.Field(e => e.Text);
model.Field(e => e.Creator);
})
.PageSize(20)
.Read(read => read.Action("GetEntries", "Project", new { projectId = Model.ProjectId }))
)
)
</
div
>
I don''t really understand how to use the #=something# thingy, where are they defined and how can I use them and also how can i access the @items
thanks for your help
Brian
Please check the following documentation sections and demo, and let me know if there is anything unclear.
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/configuration#clienttemplate
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-do-i-use-action-links
http://demos.telerik.com/aspnet-mvc/grid/index
Regards,
Dimo
Telerik
Hi Dimo,
Thank you very much for the fast answer. I understood everything and now it's working without any problems
Regards
Brian