This is a migrated thread and some comments may be shown as answers.

customize add/delete/edit buttons

30 Answers 3899 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 25 Feb 2013, 10:55 AM
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

30 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 26 Feb 2013, 02:19 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 27 Feb 2013, 10:08 AM
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
0
Iliana Dyankova
Telerik team
answered on 28 Feb 2013, 08:27 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 01 Mar 2013, 08:27 AM
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
0
Iliana Dyankova
Telerik team
answered on 04 Mar 2013, 09:29 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 05 Mar 2013, 07:56 AM
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
0
Iliana Dyankova
Telerik team
answered on 05 Mar 2013, 10:13 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 07 Mar 2013, 01:12 PM
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
0
Daniel
Top achievements
Rank 1
answered on 13 Mar 2013, 01:28 PM
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,
0
Iliana Dyankova
Telerik team
answered on 15 Mar 2013, 05:40 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 18 Mar 2013, 07:31 AM
Ok,thank you i will try out your sugestions.
0
Daniel
Top achievements
Rank 1
answered on 17 Apr 2013, 08:13 AM
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
0
Iliana Dyankova
Telerik team
answered on 18 Apr 2013, 02:48 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 24 Apr 2013, 06:59 AM
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
0
Iliana Dyankova
Telerik team
answered on 25 Apr 2013, 04:47 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 07 May 2013, 07:33 AM
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
0
Iliana Dyankova
Telerik team
answered on 09 May 2013, 06:47 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 09 May 2013, 07:04 AM
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.
0
Iliana Dyankova
Telerik team
answered on 10 May 2013, 12:07 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 10 May 2013, 02:19 PM
so you mean there is not Editable,and still goes to the server only by setting in the .Datasource the actions?
is this enough?
0
Iliana Dyankova
Telerik team
answered on 14 May 2013, 12:11 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 16 May 2013, 07:14 AM
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
0
Accepted
Iliana Dyankova
Telerik team
answered on 18 May 2013, 02:54 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 20 May 2013, 06:48 AM
ok,i'll keep that in mind,thank you.
0
Steve
Top achievements
Rank 1
answered on 24 Nov 2016, 06:17 PM

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

0
Dimo
Telerik team
answered on 25 Nov 2016, 09:31 AM
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
Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
0
jjroman
Top achievements
Rank 2
answered on 05 Jun 2017, 12:33 AM
Have you add the example to the library?
0
Dimo
Telerik team
answered on 05 Jun 2017, 11:57 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
jjroman
Top achievements
Rank 2
answered on 10 Jun 2017, 05:09 PM
I only want to have a icon, just that, no a button.
0
Dimo
Telerik team
answered on 14 Jun 2017, 07:01 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Daniel
Top achievements
Rank 1
Steve
Top achievements
Rank 1
Dimo
Telerik team
jjroman
Top achievements
Rank 2
Share this question
or