84336

Remove k-button class from kendogrid command buttons

Question:

I am using edit, destroy buttons in kendogrid. These are rendered as buttons, but if I remove k-button class, these can be rendered as just icons.

Is it possible to remove the k-button class from all these buttons?

Answer1:

Yes, I had the same issue a while back. How I achieved this was by defining a template for the command buttons.

{"command": [ { "text": "Edit", "template": "<a role='button' class='k-button k-button-icontext k-grid-edit'><span class='k-icon k-i-edit'></span></a>" }, { "text": "Delete", "template": "<a role='button' class='k-button k-button-icontext k-grid-delete'><span class='k-icon k-i-close'></span></a>" } ] }

You might now be wondering how the delete and edit functions are bound to these custom buttons. The magic happens with the classes k-grid-delete and k-grid-edit I believe these are the classes kendo also uses to bind to its own functions.

If you need to bind to a custom edit/ delete function that is possible too. Refer the <a href="https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.command#columns.command.click" rel="nofollow">columns.command.click documentation</a>

Here is a <a href="https://dojo.telerik.com/abEGAjey/2" rel="nofollow">working example</a>

<strong>UPDATE</strong>

In order to mimic the update and clear functionality you can use a combination of command templates and <a href="https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods" rel="nofollow">grid methods</a>

<a href="https://dojo.telerik.com/abEGAjey/8" rel="nofollow">Here is an updated example</a>

Notice how I have utilized the <a href="https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.command#columns.command.click" rel="nofollow">command.click</a> method to programmatically manipulate the rows and show/hide the command buttons as needed with jQuery.

{ name: "cust-edit", template: "<a role='button' class='k-button k-button-icontext k-grid-cust-edit'><span class='k-icon k-i-edit'></span></a>", click(e){ var grid = $("#grid").data("kendoGrid"); var tr = $(e.target).closest("tr"); // get the current table row (tr) grid.editRow(tr); //manually trigger edit on row $(tr).find('.k-grid-cust-edit, .k-grid-delete').hide(); $(tr).find('.k-grid-cust-update, .k-grid-cust-clear').show(); } }

Also dont forget the CSS snippet introduced to hide the save update and clear changes buttons one page load.

Recommend

  • PE file - what's missing?
  • Intellij Idea Terminal shortcut not working
  • Passing a Scala type to a function
  • Pass nested C++ vector as built-in style multi-dimensional array
  • Ruby: FileUtils.cp truncates file; FileUtils.mv it does not?
  • Calling C function from lua
  • What is this strange character in chrome's resource css viewer?
  • How to repeat sections of a SQL query across UNIONs? (DRY in SQL)
  • Angular - routerLinkActive and queryParams handling
  • Is it possible to get the word under the mouse cursor in a ``?
  • Validate child input components on submit with Vee-Validate and vue js 2
  • Low TTL with Leveled Compaction, should I reduce gc_grace_seconds to improve read performance withou
  • TextToSpeech.setEngineByPackageName() triggers NullPointerException
  • Button click event not firing in jQuery
  • Webgrid not refreshing after delete MVC
  • Time complexity of a program which involves multiple variables
  • why overloaded new operator is calling constructor even I am using malloc inside overloading functio
  • NHibernate Validation Localization with S#arp Architecture
  • Adding a button at the bottom of a table view
  • Insert into database using onclick function
  • Getting last autonumber in access
  • Optimizing database types to compact database (SQLite)
  • javaw.exe and eclipse startup problems
  • Bug in WPF DataGrid
  • TFS: Get latest causes slow project reloading
  • output of program is not same as passed argument
  • Does CUDA 5 support STL or THRUST inside the device code?
  • Running a C# exe file
  • Redux, normalised entities and lodash merge
  • Statically linking a C++ library to a C# process using CLI or any other way
  • Web-crawler for facebook in python
  • Delete MySQLi record without showing the id in the URL
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Why winpcap requires both .lib and .dll to run?
  • GridView Sorting works once only
  • Python: how to group similar lists together in a list of lists?
  • Understanding cpu registers
  • how does django model after text[] in postgresql [duplicate]
  • Android Google Maps API OnLocationChanged only called once
  • Reading document lines to the user (python)