Category / Section
How to hide/show the command column buttons based on row details?
1 min 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