Category / Section
How to hide/show the command column buttons in JavaScript Grid?
6 mins read
This knowledge base explains the way to hide/show the command column buttons based on the record details in JavaScript DataGrid.
To hide/show the command column buttons, use the rowDataBound event of the Grid and add the class ‘e-hide’ to the buttons based on the respective column value.
Render the Grid with custom command column and rowDataBound event.
HTML
<div id="Grid"></div>
JS
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
editSettings: { allowDeleting: true },
pageSettings: { pageSize: 8 },
rowDataBound: "rowDataBound",
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true },
{ field: "EmployeeID", headerText: "Employee ID" },
{ field: "Freight", headerText: "Freight", format: "{0:C}" },
{
headerText: "Manage Records", textAlign: "center",
commands: [
{ type: "Delete", buttonOptions: { width: "80%", text: "Delete" } },
{ type: "Undo delete", buttonOptions: { width: "80%", text: "Undo Delete" } }
],
width: 130
}
]
});
});
RAZOR:
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.PageSettings(pg=>pg.PageSize(8))
.EditSettings(edit => edit.AllowDeleting())
.ClientSideEvents(eve => { eve.Load("load"); })
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Add();
col.Field("Freight").HeaderText("Freight").Format("{0:C2}").Add();
col.HeaderText("Manage Records")
.TextAlign(TextAlign.Center)
.Width(130)
.Commands(cmd => {
cmd.ButtonOptions(new ButtonProperties() {
Width = "100%",
Text = "Delete"
}).Type("Delete").Add();
cmd.ButtonOptions(new ButtonProperties() {
Width = "100%",
Text = "Undo Delete"
}).Type("Undo Delete").Add();
}).Width(130).Add();
})
.ClientSideEvents(e => e.RowDataBound("rowDataBound"))
)
C#
namespace Sample.Controllers
{
public class GridController : Controller
{
public ActionResult GridFeatures()
{
ViewBag.datasource = new NorthwindDataContext().OrdersViews.ToList();
return View();
}
}
}
ASPX
<ej:Grid id="Grid" runat="server" AllowPaging="true">
<PageSettings PageSize="8" />
<EditSettings AllowDeleting="True" ></EditSettings>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" />
<ej:Column Field="Freight" Format ="{0:C2}"/>
<ej:Column HeaderText="Manage Records" Width="130" TextAlign="Center">
<Command>
<ej:Commands Type="Delete">
<ButtonOptions Width="100%" Text="Delete"></ButtonOptions>
</ej:Commands>
<ej:Commands Type="Undo Delete">
<ButtonOptions Width="100%" Text="Undo Delete"></ButtonOptions>
</ej:Commands>
</Command>
</ej:Column>
</Columns>
<ClientSideEvents RowDataBound="rowDataBound" />
</ej:Grid>
namespace sqlbinding
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = order;
this.Grid.DataBind();
}
}
}
.Net Core
@using Syncfusion.JavaScript.Models;
<ej-grid id="Grid" allow-paging="true" datasource="ViewBag.dataSource" row-data-bound="rowDataBound">
<e-page-settings page-size="8"/>
<e-edit-settings allow-deleting="true"></e-edit-settings>
<e-columns>
<e-column field="OrderID" header-text="Order ID" is-primary-key="true"></e-column>
<e-column field="EmployeeID" header-text="Employee ID"></e-column>
<e-column field="Frieght" format="{0:C2}"></e-column>
<e-column header-text="Manage Records" text-align="Center" width=130>
<e-column-commands>
<e-column-command type="Delete">
<e-button-options width="100%" text="Delete"></e-button-options>
</e-column-command>
<e-column-command type="Undo Delete">
<e-button-options width="100%" text="Undo Delete"></e-button-options>
</e-column-command>
</e-column-commands>
</e-column>
</e-columns>
</ej-grid>
namespace core1.Controllers
{
public partial class GridController : Controller
{
public static List<Orders> order = new List<Orders>();
public ActionResult GridFeatures()
{
ViewBag.dataSource = order;
return View();
}
}
}
Angular2:
<ej-grid #grid [dataSource]="gridData" allowPaging="true" (rowDataBound)="rowDataBound($event)" [editSettings]="editSettings">
<e-columns>
<e-column field="OrderID" headerText="Order ID" [isPrimaryKey]="true"></e-column>
<e-column field="EmployeeID" headerText="Employee ID"></e-column>
<e-column field="Frieght" format="{0:C2}"></e-column>
<e-column headerText="Manage Records" width="130" textAign="center" [commands]="btnCmds"></e-column>
</e-columns>
</ej-grid>
TypeScript:
import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core';
import { EJComponents } from "ej-angular2/src/ej/core";
import { data } from "./data";
@Component({
selector: 'ej-app',
templateUrl: 'src/grid/grid.component.html',
})
export class GridComponent {
public gridData: any;
public editSettings: any;
public btnCmds: any;
@ViewChild('grid') Grid: EJComponents<any, any>;
constructor() {
this.gridData = data;
this.editSettings = { allowDeleting: true };
this.btnCmds = [
{ type: "Delete", buttonOptions: { text: "Delete", width: "100%" } },
{ type: "Undo Delete", buttonOptions: { text: "Undo Delete", width: "100%" } }
];
}
}
Define the rowDataBound event with the required functionalities.
function rowDataBound(args) {
var btn = args.rowData.Deleted ? "Delete" : "Undodelete";
args.row.find(".e-" + btn + "button").addClass("e-hide");
}
TypeScript:
import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core';
import { EJComponents } from "ej-angular2/src/ej/core";
import { data } from "./data";
@Component({
selector: 'ej-app',
templateUrl: 'src/grid/grid.component.html',
})
export class GridComponent {
constructor() {
}
rowDataBound(e) {
var btn = e.rowData.Deleted ? "Delete" : "UndoDelete";
e.row.find(".e-" + btn + "button").addClass("e-hide");
}
}
Figure: Grid with custom command column
Conclusion
I hope you enjoyed learning on how to hide/show the command column buttons in JavaScript Grid.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
