Kendo-Mvc grid ActionLink Column

22 posts, 0 answers
  1. Adiel
    Adiel avatar
    60 posts
    Member since:
    Jun 2012

    Posted 11 Jun 2012 Link to this post

    I'm trying to create grid with one column is "ActionLink". 
    The code look like - 
        col.Bound(o => o.BrunchCode);
                      @Html.ActionLink(@item.BrunchCode.ToString(), "Brunch", "Statistics",
                      new { brunchid = @item.BrunchCode })   
        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". 
  2. Atanas Korchev
    Atanas Korchev avatar
    8462 posts

    Posted 12 Jun 2012 Link to this post


     It seems that your grid is ajax bound. In this case you should also define a ClientTemplate for all template columns:

       @Html.ActionLink(@item.BrunchCode.ToString(), "Brunch", "Statistics", new { brunchid = @item.BrunchCode })  
      .ClientTemplate("<a href='/brunch/statistics/brunchid=#= BrunchCode#'>#=BrunchCode#</a>")

    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 12 Jun 2012 Link to this post

    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
  4. Daniel
    Daniel avatar
    2177 posts

    Posted 15 Jun 2012 Link to this post

    Hi 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.

    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Kai
    Kai avatar
    25 posts
    Member since:
    Jul 2012

    Posted 27 Jul 2012 Link to this post

    I'm late but try this, I got this working:

                        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, }));
  6. markg
    markg avatar
    2 posts
    Member since:
    Aug 2006

    Posted 29 Jul 2012 Link to this post


    I believe that wouldn't work with AJAX mode.
    In this case, you should set ClientTemplate.

  7. Mark
    Mark avatar
    8 posts
    Member since:
    Aug 2012

    Posted 29 Jul 2012 Link to this post

    Coincidently, I am trying to do something very similar myself, and failing miserably.  I wonder if anyone can help.

    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.

  8. Mark
    Mark avatar
    8 posts
    Member since:
    Aug 2012

    Posted 01 Aug 2012 Link to this post

    I'll answer my own question, now I have found something that works.  Hopefully this is useful for anyone as bemused about Templates and ClientTemplates.
    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() _
                End Function) _
        .Selectable(Function(selectable) selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)) _
                          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")
                          Just to demo a template: @p.Id
                                          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") _

    So, the ClientTemplates are really nice, just in need of clearer examples for idiots like me!

  9. Andrei
    Andrei avatar
    27 posts
    Member since:
    Nov 2008

    Posted 07 Sep 2012 Link to this post

    Hi 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
  10. Vlad
    Vlad avatar
    18 posts
    Member since:
    Sep 2012

    Posted 09 Oct 2012 Link to this post


    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

  11. Craig
    Craig avatar
    112 posts
    Member since:
    Nov 2011

    Posted 06 Mar 2013 Link to this post


    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.

  12. Andrej Zecevic
    Andrej Zecevic avatar
    5 posts
    Member since:
    Nov 2009

    Posted 27 Aug 2013 Link to this post

    Great solution Craig, thanks!
  13. ritesh
    ritesh avatar
    1 posts
    Member since:
    Mar 2011

    Posted 20 Nov 2013 Link to this post

    Thanks Craig, thats working..
  14. Bryan
    Bryan avatar
    24 posts
    Member since:
    Nov 2013

    Posted 17 Dec 2013 Link to this post

    Thanks, Craig. That was just what I needed.
  15. Rajesh
    Rajesh avatar
    1 posts
    Member since:
    Jul 2014

    Posted 28 Jul 2014 in reply to Atanas Korchev Link to this post

    Hi ,
     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.

  16. Pham
    Pham avatar
    12 posts
    Member since:
    Jun 2015

    Posted 05 Jun 2015 in reply to Rajesh Link to this post


     How to use client template to create a Total column = Price*Quantity . This is my grid, I try many solutions but my grid is diffirent. Can you help me ? Thank you.

    @model IEnumerable<dynamic>
               .DataSource(ds => ds.Ajax()
                                    .Model(m =>
                                        m.Field("Name", typeof(string));
                                        m.Field("Price", typeof(decimal));
                                        m.Field("Quantity", typeof(decimal));
                                        m.Field("ExpiredDate", typeof(DateTime));
                            .Read(r => r.Action("Read", "Home"))
                            .Update(u => u.Action("Update", "Home"))
                            .Destroy(u => u.Action("Destroy", "Home"))
                            .Create(u => u.Action("Create", "Home"))
                    .ToolBar(toolBar => toolBar.Create())
                    .Columns(columns =>
                        columns.Command(command =>
                    .Editable(editable => editable.TemplateName("ProductItem").Mode(GridEditMode.PopUp))
                        .Pageable(pageable => pageable

  17. Dimo
    Dimo avatar
    8406 posts

    Posted 10 Jun 2015 Link to this post

    Hello Pham,

    Please do not post the same question in multiple forum threads, as this creates confusion, overhead and delays.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  18. Len Simmons
    Len Simmons avatar
    6 posts
    Member since:
    Feb 2009

    Posted 15 Jun 2015 Link to this post

    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());




  19. Tiago
    Tiago avatar
    3 posts
    Member since:
    Mar 2015

    Posted 20 Aug 2015 Link to this post

    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.


  20. Brian
    Brian avatar
    4 posts
    Member since:
    Aug 2015

    Posted 09 Oct 2015 in reply to Atanas Korchev Link to this post


     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">
            .Columns(columns => {
                columns.Bound(e => e.Title);
                columns.Bound(e => e.EntryDate);
                columns.Bound(e => e.Text);
                columns.Bound(e => e.Creator);
                //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
            .DataSource(datasource => datasource
                .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);
                .Read(read => read.Action("GetEntries", "Project", new { projectId = Model.ProjectId }))

    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



  21. Dimo
    Dimo avatar
    8406 posts

    Posted 09 Oct 2015 Link to this post

    Hi Brian,

    Please check the following documentation sections and demo, and let me know if there is anything unclear.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  22. Brian
    Brian avatar
    4 posts
    Member since:
    Aug 2015

    Posted 12 Oct 2015 in reply to Dimo Link to this post

    Hi Dimo, 

    Thank you very much for the fast answer. I understood everything and now it's working without any problems



Back to Top