How I can use column template from client side to show anchor tag with my another column value

5 posts, 1 answers
  1. Hasibul
    Hasibul avatar
    2 posts
    Member since:
    Oct 2012

    Posted 20 Mar 2013 Link to this post

    I am new on Kendo UI.
    I am using Kendo Grid from Client Side. I am also bound data from Client side.
    Consider following code which i have used to bind json data.
    var people = [
                 { firstName: "Hasibul", lastName: "Haque", email: "hasibul@yahoo.com" }
           ];
     
           $('#grid').kendoGrid({
               scrollable: true,
               sortable: true,
               pageable: true,
               selectable: "row",
               filterable: true
     
             , dataSource: { data: people, pageSize: 10 }
             , columns:
                 [
                   { field: "firstName", title: "First Name" }
                 , { field: "lastName", title: "Last Name" }
                 , { field: "email", title: "email" }
                 , {
                     field: "action", title: "Action",
                     template: "I want to put action linke here by using field value(firstName)"
                   }
                 ]
                
     
           });

    I just want to show another column called action column. From where user can do perform another action. In my action link i want to show First name. How i can do that?
    I can populate action column from server side but now i want to do everything from client side.
    If i consider server side
    column.Template(c => @Html.ActionLink(c.Description, "foo", new { id = c.prop, })
    I want something similar on client side.

    Hope you will help me. 
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2284 posts

    Posted 20 Mar 2013 Link to this post

    Hello Hasibul,


    To specify an action column with a link, you could use the following syntax.
    E.g.
    {
       title: "Action",
       template: "<a href='/foo?firstName=#=firstName#'>#=firstName#</a>"
    }

    Additional information about Kendo Templates can be found in the Demos and in the Documentation.

     

    Kind regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Hasibul
    Hasibul avatar
    2 posts
    Member since:
    Oct 2012

    Posted 20 Mar 2013 Link to this post

    Thanks for making replay.
    How i can get specific row data.
    Here i am putting 
    <a href='/foo?firstName=#=firstName#'>#=firstName#</a>

    but it shows #=firstName# on display. How i can assign value ?
    Hope you people will help me...

  4. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2284 posts

    Posted 20 Mar 2013 Link to this post

    Hello Hasibul,

    With #=firstName# I am referencing the value of the firstName property of the current item. Take a look at the following JS Bin Example which demonstrates this. Please let me know if this was the information, that you were looking for.
     

    All the best,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Hasibul
    Hasibul avatar
    2 posts
    Member since:
    Oct 2012

    Posted 20 Mar 2013 Link to this post

    Thanks a lot Dimiter Madjarov. Its working.
Back to Top