Creating Button Column in KendoGrid using Template

4 Answers 9511 Views
Grid
Manju
Top achievements
Rank 1
Manju asked on 22 Apr 2014, 10:53 AM
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,                     
               }
               ,{
                  // PLANNED TO GET A BUTTON HERE SO THAT I CAN HAVE BUTTON ON EACH ROW AT LAST COLUMN
                }
             ]

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

Regards
Manju

4 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 25 Apr 2014, 07:57 AM
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.
E.g.
template: "<a class='k-button' href='/Home/Index'>Redirect</a>"

Regards,
Dimiter Madjarov
Telerik
 

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.

 
abhinandhu
Top achievements
Rank 1
commented on 10 Oct 2019, 09:47 AM

can you tell us the solution
0
Alex Hajigeorgieva
Telerik team
answered on 15 Oct 2019, 09:03 AM

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:

https://dojo.telerik.com/@bubblemaster/ADotiXOz

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.
0
Steve
Top achievements
Rank 1
answered on 19 Mar 2021, 03:45 PM
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.
0
Anton Mironov
Telerik team
answered on 24 Mar 2021, 09:29 AM

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.

Tags
Grid
Asked by
Manju
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Alex Hajigeorgieva
Telerik team
Steve
Top achievements
Rank 1
Anton Mironov
Telerik team
Share this question
or