Kendo-Mvc grid ActionLink Column

2 Answers 6241 Views
Grid
Adiel
Top achievements
Rank 2
Adiel asked on 11 Jun 2012, 04:31 PM
Hi 
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

Sort by
0
Atanas Korchev
Telerik team
answered on 12 Jun 2012, 07:02 AM
Hi,

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

Regards,
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!
Ian
Top achievements
Rank 1
commented on 12 Jun 2012, 04:57 PM

Hi,
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
Daniel
Telerik team
commented on 15 Jun 2012, 02:54 PM

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.

Regards,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Kai
Top achievements
Rank 1
commented on 27 Jul 2012, 06:23 PM

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

@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, }));
markg
Top achievements
Rank 1
commented on 29 Jul 2012, 08:13 AM

Kai,

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


Regards
Mark
Top achievements
Rank 1
commented on 29 Jul 2012, 11:29 AM

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.

Cheers
Mark
Mark
Top achievements
Rank 1
commented on 01 Aug 2012, 03:51 PM

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() _
    .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
Andrei
Top achievements
Rank 1
commented on 07 Sep 2012, 05:27 AM

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
Vlad
Top achievements
Rank 1
commented on 10 Oct 2012, 01:47 AM

Hi,

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

Craig
Top achievements
Rank 1
commented on 06 Mar 2013, 09:54 AM

Hi 

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.

Andrej Zecevic
Top achievements
Rank 1
commented on 27 Aug 2013, 08:25 AM

Great solution Craig, thanks!
ritesh
Top achievements
Rank 1
commented on 20 Nov 2013, 12:01 PM

Thanks Craig, thats working..
Bryan
Top achievements
Rank 1
commented on 17 Dec 2013, 07:33 PM

Thanks, Craig. That was just what I needed.
Rajesh
Top achievements
Rank 1
commented on 28 Jul 2014, 06:41 AM

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.

Thanks,
Rajesh
Pham
Top achievements
Rank 1
commented on 05 Jun 2015, 07:32 PM

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

Dimo
Telerik team
commented on 10 Jun 2015, 02:05 PM

Hello Pham,

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

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Len Simmons
Top achievements
Rank 2
commented on 15 Jun 2015, 03:00 PM

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

 

 

 

Tiago
Top achievements
Rank 1
commented on 20 Aug 2015, 04:48 PM

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.

 

Brian
Top achievements
Rank 1
commented on 09 Oct 2015, 01:43 PM

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

 

0
Dimo
Telerik team
answered on 09 Oct 2015, 02:38 PM
Hi 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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Brian
Top achievements
Rank 1
commented on 12 Oct 2015, 12:26 PM

Hi Dimo, 

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

Regards

Brian

Tags
Grid
Asked by
Adiel
Top achievements
Rank 2
Answers by
Atanas Korchev
Telerik team
Dimo
Telerik team
Share this question
or