customize add/delete/edit buttons

31 posts, 1 answers
  1. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 25 Feb 2013 Link to this post

    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
  2.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 26 Feb 2013 Link to this post

    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!
  5. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 27 Feb 2013 Link to this post

    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
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 28 Feb 2013 Link to this post

    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!
  9. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 01 Mar 2013 Link to this post

    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
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 04 Mar 2013 Link to this post

    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!
  13. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 05 Mar 2013 Link to this post

    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
  14.
  15. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Mar 2013 Link to this post

    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!
  17. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 07 Mar 2013 Link to this post

    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
  19. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 13 Mar 2013 Link to this post

    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,
  20.
  21. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 15 Mar 2013 Link to this post

    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!
  23. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 18 Mar 2013 Link to this post

    Ok,thank you i will try out your sugestions.
  25. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 17 Apr 2013 Link to this post

    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
  26.
  27. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 Apr 2013 Link to this post

    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!
  29. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 24 Apr 2013 Link to this post

    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
  31. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 25 Apr 2013 Link to this post

    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!
  33. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 07 May 2013 Link to this post

    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
  35. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 09 May 2013 Link to this post

    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!
  37. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 09 May 2013 Link to this post

    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.
  38.
  39. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 10 May 2013 Link to this post

    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!
  41. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 10 May 2013 Link to this post

    so you mean there is not Editable,and still goes to the server only by setting in the .Datasource the actions?
    is this enough?
  43. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 14 May 2013 Link to this post

    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!
  45. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 16 May 2013 Link to this post

    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
  47. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 May 2013 Link to this post

    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!
  49. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 20 May 2013 Link to this post

    ok,i'll keep that in mind,thank you.
  50.
  51. Steve
    Steve avatar
    17 posts
    Member since:
    Oct 2014

    Posted 24 Nov 2016 in reply to Iliana Nikolova Link to this post

    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

  53. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 25 Nov 2016 Link to this post

    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.
  55. jjroman
    jjroman avatar
    6 posts
    Member since:
    Mar 2007

    Posted 04 Jun 2017 Link to this post

    Have you add the example to the library?
  56.
  57. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 05 Jun 2017 Link to this post

    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.
  59. jjroman
    jjroman avatar
    6 posts
    Member since:
    Mar 2007

    Posted 10 Jun 2017 in reply to Dimo Link to this post

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