Creating Button Column in KendoGrid using Template

6 posts, 0 answers
  1. Manju
    Manju avatar
    6 posts
    Member since:
    Apr 2014

    Posted 22 Apr 2014 Link to this post

    Hi All

       This is my first Post on telerik, I usually browse to fix any code issues i got, but currently I am facing little bit tough time to fix it, its just adding a button column on the KendoGrid, where I am able to get Checkbox(both row and headertemplate) but I am not able to add simple button in kendogrid, so that on click of that button on each row it should redirect to "ActionResult" controller for further steps, I tried different ways to add button but couldn't succeeded, Please check the code and let me know am I missing anything wrong

    CODE(part of the code)

    , columns: [
                    { field: "ID", Title: "ID", filterable: false, sortable: false, hidden: true },
                    { field: "RowID", Title: "RowID", filterable: false, sortable: false, hidden: true },
                    { field: "Bill", Title: "Bill", filterable: false, sortable: false,hidden:true },
                    { field: "ServiceName", Title: "ServiceName",width:600 },
                    { field: "ServiceStatus", Title: "ServiceStatus",width:150 }
    // Creating template column
                   , {
                       field: "Action", title: "Is Action", template: "<input type=\"checkbox\"    #= Action ? checked='checked' : '' #  class=\"check_row\"/> ", editable: false,                   
        headerTemplate: '<label>  <input type="checkbox" id="checkAll"/>Print All</label>', filterable: false, sortable: false, width: 100,                     

     let me know code to create button related to above code and i want it to the end of all columns

  2. Dimiter Madjarov
    Dimiter Madjarov avatar
    2312 posts

    Posted 25 Apr 2014 Link to this post

    Hello Manju,

    To achieve this you could specify a template column and add the link in it. If you would like to achieve the look of the Kendo UI Commands, you could add the k-button class to it.
    template: "<a class='k-button' href='/Home/Index'>Redirect</a>"

    Dimiter Madjarov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. abhinandhu
    abhinandhu avatar
    1 posts
    Member since:
    Oct 2019

    Posted 10 Oct 2019 Link to this post

    can you tell us the solution
  4. Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 15 Oct 2019 Link to this post

    Hello, Abhinandhu,

    My colleague has shared a solution which shows how to add a template to the column which generates a button that redirects via an anchor tag href attribute.

    Here is a runnable example using the provided solution:

    In case you have any issues implementing that in your scenario, please provide more details regarding the desired outcome and sample code with the current attempt.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Steve
    Steve avatar
    1 posts
    Member since:
    Sep 2020

    Posted 19 Mar in reply to Alex Hajigeorgieva Link to this post

    Hello! The original post clearly shows a grid with an array of columns, and the stubbed code to include an additional column. The answer provided does not answer the question; rather it shows a grid with a single column.

    I am trying to do the same thing in an existing grid, and this blog stops short of a meaningful solution.
  6. Anton Mironov
    Anton Mironov avatar
    203 posts

    Posted 24 Mar Link to this post

    Hi Steve,

    In order to achieve the desired behavior, I would recommend using the approach from the following demo:

    Try the template with the details and let me know if this functionality is a working solution for the needs of your application.

    Furthermore, the click event handler of the custom command button("showDetails" function in the example) could be used for creating an Ajax request to the actions in the BackEnd if needed.

    I hope this information helps.

    Kind Regards,
    Anton Mironov
    Progress Telerik

    Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Back to Top