Kendo grid custom command

Sign in Email. Forgot your password? Ask a Question. Custom command in kendo UI grid.

While trying to display a list of data in a Kendo UI grid for which the data was loaded via Ajax, I wanted to have a custom command that loaded a new page to edit a row. The project I was working on used ASP. The key to loading a new page was inserting a clickable link that could call a controller action and pass in the ID of the row to edit. To keep things consistent, I also wanted my link to look like a normal Kendo UI grid edit button. While I could find examples of how to include custom links when a Kendo Grid was server bound, finding out how to do the same things for an Ajax bound grid was more difficult. In the end I found that specifying a column template like this worked:. Note that the first argument to the Html.

Kendo grid custom command

While working with Kendo Grid in MVC, many times we come across a requirement when we want to have some images instead of default buttons of the grid. I had a similar kind of requirement and as I was new to Kendo, it took me a lot of time to implement the same. After doing a lot of search and trying various methods for achieving the same, finally I got a perfect way to achieve this. I decided to write a post for this so that it can save time for others working with Kendo. Below, I am going to explain how to add a delete image in my grid which will act as delete button of the grid. So we can see in the above example MyData is the class my grid is based on. In this MyData class, along with the other required properties, we can add an extra property and name it as Delete. Now, while defining columns in the grid, we can have one column for this Delete property too as we are going to have for Id and Name. As shown in the above code, for the Delete column, we have an image delete. We can have an onclick event for this image where we can implement the functionality we want for our custom button.

To keep things consistent, I also wanted my link to look like a normal Kendo UI grid edit button. Posted 1-Dec pm wa. Quoted Text.

.

All Telerik. Now enhanced with:. Represents the command columns of the Grid. For more information and examples, refer to the Command Column Directives article. Indicates whether the column will be resized during initialization so that it fits its header and row content. Sets the custom CSS classes to the column cells. Under the hood, to apply the property, the class option uses the NgClass directive. See example.

Kendo grid custom command

All Telerik. Now enhanced with:. The Grid enables you to use templates and customize the built-in editing functionality in Reactive Angular Forms. You can add custom validations, input controls, and take full control over the editing operations applied to the Grid. By default, when a row or cell enters edit mode, the Grid renders a specific input control based on the editor property of the column. The default value is text , which renders a TextBox editor component. The other components are:. To render custom input components depending on the specific configurations of the project:.

Madness fancy dress

You have not shown how the delete is linked into the Kendo grid, or the server. To keep things consistent, I also wanted my link to look like a normal Kendo UI grid edit button. I decided to write a post for this so that it can save time for others working with Kendo. We can have an onclick event for this image where we can implement the functionality we want for our custom button. Layout: fixed fluid. Best guess. In the above code, as you may see I am calling a javascript method "deleteRow this " on onclick event of the image. Hey man! I want to write some codes that can show details of my item by using the Action method. Please Sign up or sign in to vote. Paste as-is.

All Telerik. Now enhanced with:. The configuration of the column command s.

Forgot your password? Note that the first argument to the Html. Usually, we have a model class on which our kendo grid is based. Add a Solution. Submit your solution. Chances are they have and don't get it. Forgot your password? The result of the above client template for a column in a Kendo grid is that an edit button like the following is displayed:. Width ;. So we can see in the above example MyData is the class my grid is based on. Posted 1-Dec pm wa. You have not shown how the delete is linked into the Kendo grid, or the server. Please Sign up or sign in to vote.