How to add command column and its function in auto-generated columns

[Prem]

- How to add command column and its function in auto-generated columns

- When I hide column edit grid function is not working is same grid.

I tried the below code without success.

    @(Html.EJS().Grid("externalColumn").ActionComplete("ExternalGridComplete").DataBound("dataBoundExternal")

                                                  .DataSource((System.Data.DataTable)ViewBag.Rate)

                           .EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Update", "Cancel", "Delete" }).Render())

function dataBoundExternal(args) {

        debugger

        var grid11 = document.getElementById('externalColumn').ej2_instances[0];

        if (this.isInitialLoad) { 

      

        var column = grid11.columns[0];

            column.isPrimaryKey = true;

            //column.allowEditing = false;

            //for (var i = 0; i < this.columns.length; i++) {

            //    if (this.columns[i].field == "Nepali") {

            //        this.columns[i].visible = false;

            //    }

            //    else if (this.columns[i].field == "ShipCountry") {

            //        this.columns[i].visible = true;

            //    }

            //}

       // column.visible = false;

        // var column1 = grid11.getColumnByField('PackageOfferItemId');

       // column1.width = 150;

       // column1.visible = false;

       // column1.isPrimaryKey = 'true';

       // column1.allowEditing = false;

       // var column12 = grid11.getColumnByField('PackageOfferId');

        //column12.width = 33;

        //column12.visible = false;

       // var column123 = grid11.getColumnByField('Type');

        //column123.width = 33;

        //column123.visible = false;

       // var columnType = grid11.getColumnByField('RateRefId');

       // columnType.width = 33;

        //columnType.visible = false;

       // grid11.hideColumns(['CostItem']); //hide by HeaderText

        var obj = { headerText: "Commands", width: 120, commands: this.commands };

       // grid.columns.push(obj);

        //grid11.refreshColumns(); 

        //this.refreshColumns(); 

            //grid11.refresh();

            var columnss = Object.assign([], grid11.columns);

            //var obj = {

            //    headerText: "Commands",

            //    width: 120,

            //    commands: this.commands,

            //};

            //columnss.push(obj);

            //grid11.columns = columnss;

        }

        //for (var i = 0; i < this.columns.length; i++) {

        //    if (this.columns[i].field == "") {

        //        this.columns[i].visible = false;

        //    }

        //    else if (this.columns[i].field == "ShipCountry") {

        //        this.columns[i].visible = true;

        //    }

        //}

[Manivel Sellamuthu]

Hi Prem, 

Greetings from Syncfusion support. 

Query: How to add command column and its function in auto-generated columns 

 

You can add command column to auto-generated columns and it’s functionalities like in the below demonstrated code example. Please refer the below code example for more information. 

@Html.EJS().Grid("Grid").DataBound("DataBound").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowPaging(). 

EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Render() 

  

 

<script> 

    var flag = true; 

    function DataBound() { 

        if (flag) { 

            flag = false; 

            var commandColumn = { 

                headerText: 'Manage Records', width: 160, 

                commands: [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } }, 

                { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } }, 

                { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } }, 

                { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }] 

            }; 

            this.columns[0].isPrimaryKey = true; 

            this.columns.push(commandColumn); 

            this.refreshColumns(); 

        } 

    } 

</script> 

Query: When I hide column edit grid function is not working is same grid 

 

From this query we are unable to get your exact query. Could you please explain more about this requirement. 

Regards, 

Manivel