Disable commands column based on another column

[Sheldon]

How can the command column in the Grid be disabled based on another columns value. Example. based on the Accountable column and the user that is logged in I want to disable or hide the command column if the current user is not the accountable person assigned.

I do have edit canceled using actionBegin but would like to also disable delete.

@{

    List<object> commands = new List<object>();

    commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } });

    commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } });

    commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } });

    commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } });

}

<ejs-toast id="warning" width="300" cssClass="e-toast-danger">

    <e-toast-position X="Right" Y="Top"></e-toast-position>

</ejs-toast>

<ejs-grid id="Grid" height="100%" allowTextWrap="true" allowGrouping="true" allowPaging="true" allowFiltering="true" allowSorting="true" allowSelection="false" load="onLoad" actionFailure="onActionFailure" actionBegin="actionBegin" rowDataBound="rowDataBound" toolbar="@( new List<object>() { "Add" })">

    <e-grid-editsettings allowDeleting="true" allowEditing="true" allowAdding="true" showDeleteConfirmDialog="true"></e-grid-editsettings>

    <e-data-manager url=... adaptor="UrlAdaptor"></e-data-manager>

    <e-grid-filtersettings type="Excel"></e-grid-filtersettings>

    <e-grid-pagesettings pageCount="5" pageSizes="true" pageSize="20"></e-grid-pagesettings>

    <e-grid-columns>

        ...

        <e-grid-column field="Accountable" headerText="Accountable" foreignKeyField="Text" foreignKeyValue="Value" dataSource="@Model.AccountableDD"></e-grid-column>

        <e-grid-column headerText="" width="100" commands="commands"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

<script>

function onActionFailure(e) {

        console.log(e);

    }

    function onLoad() {

        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];

    }

    function onChange() {

        var gridObj = document.getElementById("Grid").ej2_instances[0], dropdpwnObj = document.getElementById("filtertype").ej2_instances[0];

        gridObj.filterSettings.type = dropdpwnObj.value;

    }

    function actionBegin(args) {

        if (args.requestType == "beginEdit") {

            if (args.rowData.Accountable != null && args.rowData.Accountable != "" && args.rowData.Accountable != userName) {

                showMessage(args);

                args.cancel = true;

            }

        }

    }

    function showMessage(args) {

        setTimeout(

            () => {

                var toastObj = document.getElementById('warning').ej2_instances[0];

                toastObj.content = "Only the Accountable person can edit.";

                toastObj.target = '#Grid';

                toastObj.show();

            }, 500);

    }

</script>

[Sujith Kumar Rajkumar]

Hi Sheldon, 

 

Greetings from Syncfusion support. 

 

You can achieve your requirement of hiding the command column for particular rows based on the row values by setting the display property of the command buttons parent element to ‘none’ in the Grid’s rowDataBound event handler. This is demonstrated in the below code snippet, 

 

// Grid’s rowDataBound event handler 

function onRowDataBound(args) { 

        // Check the required row data value condition 

        if (!args.data["Accountable"]) { 

            args.row.querySelector('.e-unboundcelldiv').style.display = "none"; 

        } 

} 

 

We have prepared a sample based on this for your reference. You can download it from the following link, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/155447/ze/GridCommandColumn1020544458  

 

If you wish to just disable these buttons then you can achieve it by setting the button’s disabled property as true for the command buttons using its instance as demonstrated in the below code snippet, 

 

var gridInstance = document.getElementById('Grid').ej2_instances[0]; 

gridInstance.element.querySelector('.e-unboundcelldiv').querySelectorAll('button').forEach(ele => {     

     ele.ej2_instances[0]; 

     ele.disabled = true 

}); 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Sheldon]

The onRowDataBound worked great. 

I can just hide the command buttons when a user is not the assigned accountable person for the project.

[Sujith Kumar Rajkumar]

Hi Sheldon, 

We are glad to hear that. Please get back to us if you require any further assistance. 

Regards, 

Sujith R