Articles in this section
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");
    }
}
 
 

 

Grid with custom command column

Figure: Grid with custom command column

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied