customize add/delete/edit buttons

[Daniel]

Hello,
Can i customize the default buttons for CRUD operations(add,delete,edit) ?for example remove or change text,add only a custom image,add a tooltip.something just like   the Grid RadControl where i can customize all that.

Regards,
Daniel

[Iliana Nikolova]

Hi Daniel,

You can change the text of the CRUD buttons via the configuration options. For example:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
  //....
  .ToolBar(toolbar => toolbar.Create().Text("CustomCreateText"))
  .Columns(columns => {
     //....
      columns.Command(command => {
          command.Edit()
             .Text("CustomEditText")
             .UpdateText("CustomUpdateText")
             .CancelText("CustomCancelText");
          command.Destroy().Text("CustomDestroyText");
    })
)

Also, I recommend you checking this code library project which demonstrates how to change the built-in buttons of the Grid with images and also how to create custom buttons.

Regarding the tooltip - you can set title attribute via the HtmlAttributes. Like here: 

command.Edit().Text("CustomEditText").HtmlAttributes(new { title = "UpdateButtonTooltip" }); command.Destroy().Text("CustomDestroyText").HtmlAttributes(new { title = "DeleteButtonTooltip" });

Regards,
Iliana Nikolova
the Telerik team

[Daniel]

the code library project is uncompatible with visual studio 2010 that i have.in what version was made?can you convert it for VS2010?

Regards,
Daniel

[Iliana Nikolova]

Hello Daniel,

The project is created with Visual Studio 2012, however I converted it for you to Visual Studio 2010 - you can find the modified project attached.
 
Regards,
Iliana Nikolova
the Telerik team

[Daniel]

Thank you ,now is working the project.So in order to have an image on a button,i cannot add it,on the build-in commands?only on new custom commands?

Regards

[Iliana Nikolova]

Hi Daniel,

By design the command buttons in Kendo UI Grid have default icons and in order to change them you need to override the styles which are applied to the following CSS classes:

• k-add
• k-edit
• k-delete 

For example: 

.k-grid .k-edit
{
   background-position: 0 0 ;
   background-image: url('....') ;
}

Regards,
Iliana Nikolova
the Telerik team

[Daniel]

all this classes are in what css file?
and how can i know which class what is does and for what control/element it is?

Regards,
Daniel

[Iliana Nikolova]

Hello Daniel,

In order to achieve the desired outcome you should just add the suggested CSS rule into your page. For this purpose you can use both internal and external style sheet. For more detailed information about "How to insert CSS" you can check this article.

On a side note, Kendo UI widgets share a lot of CSS classes and behave consistently. For more detailed information about the "Appearance and styling" in Kendo UI you can check this help topic. For additional customization you can inspect the HTML output (using Firebug or other browser inspector), see what HTML elements and CSS classes are responsible for the visual appearance of the particular object and add custom CSS rules. In order to successfully override Kendo styles you have to be familiar with the concept of CSS specificity.

Regards,

Iliana Nikolova
the Telerik team

[Daniel]

i was refering only to kendo styling,and what i was looking for was that link you gave me regarding appearance and styling,thank you.

Best Regards

[Daniel]

1. i was testing these days the example for custom  image buttons and i do not understand why is necesary to put a text as value ,for the anchor tag.
2. I removed it,and in IE,ti doesn't appear at all the buttons anymore.i tried to clear the cache,and still this strange behavior BUT if i put back the text it appears also the image and the text over,very ugly.i added three pictures,one with the code in the view and one when i run the page.
3.also,in this scenario,when there is a template as image button,how can i get the data for that row,because the sender is not the grid ,insteed is an image button.

Regads,

[Iliana Nikolova]

Hello Daniel,

Apologies for not getting back to you earlier.

I believe the reason for 1. and 2. is the lack of the following CSS rule:

.abutton {
    display:inline-block;
    width:16px;
    height:16px;
    text-align:center;
    text-indent:-444px;
    min-width:0;
    border:0;
}

 
Please have in mind <a> is an inline element and in order to set background image to it you should change the display mode and set width/height.

As for 3. -> You can get the data for the row using the Grid's dataItem() method. For example: 

var grid = $("#Grid").data("kendoGrid");
var getFirstRow = $("#Grid tbody tr:first");
grid.dataItem(getFirstRow );

Kind regards,
Iliana Nikolova
the Telerik team

[Daniel]

Ok,thank you i will try out your sugestions.

[Daniel]

Hello ,i still have a question here.
In the attached example project,for the custom buttons,it doesn't  go on the server to make the delete for the orders,so how can i make the delete operation to work for that custom image buttons?
do i have to make it manually via ajax, the call to server?

Regards,
Daniel

[Iliana Nikolova]

Hi Daniel,

I am not quite sure if I understand you correctly - I tested the example and the Delete operation is working as expected. Please take a look at this short capture and let me know if I am missing something?
 
Regards,
Iliana Nikolova
the Telerik team

[Daniel]

in this demo i do not see the custom delete buttons.
In previous project that you sent me,there is built-in edit/delete buttons and also customs  edit/delete buttons.
In your grid,i notice that is editmode.inline,if there is no editmode,just read-only because i do not want to use inline edit the grid should remain read-only,instead a custom button to make the edit and delete from database,how can i do it?i have to do it myself,manually via ajax?

Regards,
Daniel

[Iliana Nikolova]

Hello Daniel,

I am not quite sure if I understand your scenario correctly, however if you wouldn't like to edit the Grid you can use its cancelRow() / closeCell() methods. If this does not fit your requirements please elaborate a bit more on the exact functionality you would like to achieve.

On a side note, it is recommended to post different questions is separate tickets - this way the request will reach the corresponding staff member and will answered faster and more accurately. Thank you in advance for your understanding. 

Regards,
Iliana Nikolova
the Telerik team

[Daniel]

i am still talking about the scope of this post, custom buttons that do the crud operations.
In your video i didn't saw the custom buttons for delete operation.i reviewed the atached project,and i did saw that the custom buttons,work for inline mode,but what if there is no editmode,only a read-only grid,but i still want to put custom image buttons,that will do delete/edit/add on server.this is the scenario i want to use.

Regards,
Daniel

[Iliana Nikolova]

Hello Daniel,

I am not sure if I understand you - in the example there are custom buttons for delete operation (screencast capture). Also the custom buttons from the example work as expected if the Grid is not configured as Editable (video). In case I am missing something please elaborate a bit more. 

Kind regards,
Iliana Nikolova
the Telerik team

[Daniel]

in yor video ,just before you play it,i can see the index.chtml
and there you are using the line
.Editable(editable=>editable.Mode(GridEditMode.InLine)

also you use this mode in the demo that you sent me kendoimagebuttondemo.zip
and i was talking about leaving that line out( remove it),so there is no .Editable method for the grid
than it should be a read-only grid,but still i would like to use that buttons for edit/add/delete operations on server.

[Iliana Nikolova]

Hi Daniel,

Did you check the second video which I sent in my last reply - there the .Editable(editable=>editable.Mode(GridEditMode.InLine) row is commented? 

On a side note, have in mind that you could control if a particular field is editable or not from the model (link). 

Regards,
Iliana Nikolova
the Telerik team

[Daniel]

so you mean there is not Editable,and still goes to the server only by setting in the .Datasource the actions?
is this enough?

[Iliana Nikolova]

Hi Daniel,

As I stated in my previous reply, you could control if a particular field is editable or not from the model. Hence in case there is no Editable option set in the Grid's configuration you still can perform CRUD operations (using the Grid's API), however you should implement your custom logic and controller actions. 
 
Regards,
Iliana Nikolova
the Telerik team

[Daniel]

ok,in order to understand maybe better the problem.i will attach your demo code,modified
i removed the built-in commands .Command(cmd=>cmd.Destroy;cmd.Edit);

also removed the .Editable(EditMode.Inline);

The action and controller remains at .DataSource , and i put a breakpoint in the server-side on delete and update action and is not going there.
so  with this modifications is not working,he doesn't go anymore to the server,for edit and delete custom buttons.
and my question that was if i left only that datasource method,and no .Editable, how he knows how to go to the server?

i had to put some ajax on client in the deleteRow or EditRow,to go to that action on server,because just by putting
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.OrderID);
model.Field(p => p.OrderID).Editable(false);
})
.Create(create => create.Action("ForeignKeyColumn_Create", "Home"))
.Destroy(destroy => destroy.Action("ForeignKeyColumn_Delete", "Home"))
.Read(read => read.Action("ForeignKeyColumn_Read", "Home"))
.Update(update => update.Action("ForeignKeyColumn_Update", "Home"))
)

he doesn't go to the server, and on client with this code

function deleteRow(element) {
grid = $("#Grid").data("kendoGrid");
grid.removeRow($(element).closest("tr"));
}

he only deletes the row from grid,not from database too.

So what are the solutions for this modified demo?
custom buttons are there,but also do the operations on server.

Regards,
Daniel

[Iliana Nikolova]

Hello Daniel,

Thank you for the details. You are right - the update / delete actions are not reached. In order to achieve this you should manually call the sync() method. As an example: 

function deleteRow(element) {
    grid = $("#Grid").data("kendoGrid");
    grid.removeRow($(element).closest("tr"));
    grid.dataSource.sync();
}

On a side note, have in mind the idea of the code library example is to demonstrate how to change the built-in buttons of the Grid with images and how to create custom buttons (not implementing custom CRUD operations).

Regards,
Iliana Nikolova
the Telerik team

[Daniel]

ok,i'll keep that in mind,thank you.

[Steve]

This seems to be changed since the date of the positing:

 

.k-grid .k-grid-add {

}

Or course edit and delete follow same pattern.

Additionally, I'm using ASP.NET Core and the associate KendoUI packages.

I am SERIOUSLY considering writing my 21st book: the true documentation on Kendo <lol>

Steve

[Dimo]

Hi Steve,

k-grid-add is a CSS class applied to the "Add New Record" button. This has not changed.

What the thread discusses is the icon element classes, that were previously k-add/k-edit/k-delete, and now are k-i-add/k-i-edit/k-i-delete. We added the "-i-" part to distinguish icon classes more easily, and prevent naming conflicts. Two of the above classes also have aliases (k-i-plus and k-i-pencil).

http://demos.telerik.com/kendo-ui/styling/icons

http://docs.telerik.com/kendo-ui/styles-and-layout/icons-web

http://demos.telerik.com/kendo-ui/grid/editing

Regards,
Dimo
Telerik by Progress

[jjroman]

Have you add the example to the library?

[Dimo]

Hello Javier,

As of R1 2017 Kendo UI is using font icons. A full list of the available icon images and the corresponding CSS classes is available on the following documentation page:

http://docs.telerik.com/kendo-ui/styles-and-layout/icons-web#list-of-font-icons

There is an example that shows how to customize the CRUD buttons' icons to use FontAwesome:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/font-awesome-icons-in-custom-grid-command-buttons

It is also possible to override the default Kendo UI styles and replace the icons with any others, following a generic CSS override approach (described in the first posts above).

Let me know if you need more information.

Regards,
Dimo
Progress Telerik

[jjroman]

I only want to have a icon, just that, no a button.

[Dimo]

Hi Javier,

Grid editing buttons with no text can be achieved if you set the text of all commands to a space.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.command.text

columns: [
  { command: [
    { name: "edit", text: { edit: " ", update: " ", cancel: " " } },
    { name: "destroy", text: " " }
  ] }
]

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-toolbar.text

toolbar: [{name: "create", text: " "}]

In addition, some default margins of the buttons' icons need to be reset to zero:

.k-grid .k-grid-toolbar .k-grid-add,
.k-grid tbody .k-grid-edit,
.k-grid tbody .k-grid-update,
.k-grid tbody .k-grid-cancel,
.k-grid tbody .k-grid-delete {
  min-width: 0;
}

.k-grid .k-grid-toolbar .k-grid-add .k-icon,
.k-grid tbody .k-grid-edit .k-icon,
.k-grid tbody .k-grid-update .k-icon,
.k-grid tbody .k-grid-cancel .k-icon,
.k-grid tbody .k-grid-delete .k-icon {
  margin: 0;
}

Here is an example:

http://dojo.telerik.com/ojoViD

The same can be achieved with the MVC Grid wrapper as well.


Regards,
Dimo
Progress Telerik