Hidden column on add and edit dialog

[Arif Nurdiansyah]

Hello, so i have grid with many column, and there are a template to generate link, and when i click add the column is showing, which is that column is useless in add menu and edit menu, so i want to hide it

Code

var grid = new ej.grids.Grid({

            dataSource: data,

            editSettings: {

                allowEditing: true,

                allowAdding: true,

                allowDeleting: true,

                mode: 'Dialog',

                showConfirmDialog: true,

                showDeleteConfirmDialog: true,

            },

            allowPaging: false,

            allowExcelExport: true,

            allowPdfExport: true,

            toolbar: ['Add', 'Edit', 'Delete', 'ExcelExport', 'PdfExport'],

            height: 500,

            columns: [

                { field: 'detail', width: 140, headerText: 'Details', type: 'string', template: '#details' },

                { field: 'id', isPrimaryKey: true, visible: false, headerText: 'id', textAlign: 'Right', width: 120, type: 'number' },

                { field: 'nik', width: 140, headerText: 'NIK', type: 'string' },

                { field: 'nama', width: 140, headerText: 'Nama', type: 'string' },

                { field: 'email', width: 140, headerText: 'Email', type: 'string' },

                { field: 'nomorHp', width: 140, headerText: 'No HP', type: 'string' },

                //{ field: 'officePerusahaanId', width: 140, headerText: 'Office', type: 'string' },

                {

                    field: 'jenisKelamin', width: 140, headerText: 'Jenis Kelamin', type: 'string', validationRules: { required: true },

                    foreignKeyField: 'jenisKelamin', foreignKeyValue: 'value', dataSource: jenkel

                },

                { field: 'tanggalLahir', width: 140, headerText: 'Tanggal Lahir', type: 'string', editType: 'datepickeredit', format: { skeleton: 'yMMMEd', type: 'date' }, validationRules: { required: true } },

                { field: 'pendidikan', width: 140, headerText: 'Pendidikan', type: 'string' },

                { field: 'universitas', width: 140, headerText: 'Universitas', type: 'string' },

                { field: 'statusPernikahan', width: 140, headerText: 'Status Pernikahan', type: 'string' },

                { field: 'jumlahAnak', width: 140, headerText: 'Jumlah Anak', type: 'string' },

                { field: 'alamatTingal', width: 140, headerText: 'Alamat Tinggal', type: 'string' },

                { field: 'agama', width: 140, headerText: 'Agama', type: 'string' },

                { field: 'kesehatan', width: 140, headerText: 'Kesehatan', type: 'string' },

                { field: 'ukuranPakaian', width: 140, headerText: 'Ukuran Pakaian', type: 'string' },

                { field: 'ukuranSepatu', width: 140, headerText: 'ukuranSepatu', type: 'string' },

                {

                    field: 'officePerusahaanId', headerText: 'Office', width: 80, validationRules: { required: true },

                    foreignKeyField: 'id', foreignKeyValue: 'namaOffice', dataSource: office

                },

                {

                    field: 'jabatanId', headerText: 'Jabatan', width: 80, validationRules: { required: true },

                    foreignKeyField: 'id', foreignKeyValue: 'jabatanName', dataSource: jabatan

                },

                {

                    field: 'departmentId', headerText: 'Departemen', width: 80, validationRules: { required: true },

                    foreignKeyField: 'id', foreignKeyValue: 'departmentName', dataSource: departemen

                },

                { field: 'cabang', width: 140, headerText: 'Cabang', type: 'string' },

                { field: 'golongan', width: 140, headerText: 'Golongan', type: 'string' },

                { field: 'statusKepegawaian', width: 140, headerText: 'Status Kepegawaian', type: 'string' },

                { field: 'tahunCuti', width: 140, headerText: 'Tahun Cuti', type: 'string' },

                { field: 'jatahCuti', width: 140, headerText: 'Jatah Cuti', type: 'string' },

                { field: 'cutiTerpakai', width: 140, headerText: 'Cuti Terpakai', type: 'string' },

                { field: 'cutiSisa', width: 140, headerText: 'Sisa Cuti', type: 'string' },

                { field: 'isActivated', width: 140, headerText: 'Activate', displayAsCheckBox: true, type: 'boolean', editType: "booleanedit" },

                { field: 'isApprover', width: 140, headerText: 'Approver', displayAsCheckBox: true, type: 'boolean', editType: "booleanedit" },

                { field: 'isMasuk', width: 140, headerText: 'Masuk', displayAsCheckBox: true, type: 'boolean', editType: "booleanedit" },

                { field: 'kodeAktivasi', width: 140, headerText: 'Kode', type: 'string' },

                { field: 'udid', width: 140, headerText: 'UDID', type: 'string' },

                { field: 'jamMasukDefault', width: 140, headerText: 'Jam Masuk Default', type: 'string', validationRules: { required: true } },

                { field: 'jamPulangDefault', width: 140, headerText: 'Jam Pulang Default', type: 'string', validationRules: { required: true } },

                { field: 'isEastTimeZone', width: 140, headerText: 'East Time Zone', displayAsCheckBox: true, type: 'boolean', editType: "booleanedit" },

            ],

            actionComplete: function (args) {

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

                    var drpdwn = this.getContentTable("#Grid").find("#detailGridNik").ejDropDownList("instance");

                    console.log(drpdwn);

                    drpdwn.setSelectedValue(2);

                }

            }

        });

        grid.appendTo('#Grid');

The column that i mean is details

Please help me, thx you

[Thavasianand Sankaranarayanan]

Hi Arif, 

Greetings from Syncfusion. 

Query: Need to disable/hide the column that is not useful in add, edit menu dialog. 

By default, we have allowEditing property in columns API, which will disable/enable the column in edit form. So, we suggest you to set allowEditing property as false for that template column in Grid.  

In the below mentioned code example we have set allowEditing as false for “CustomerID” column in Grid. 

var grid = new ej.grids.Grid({ 

    dataSource: data, 

    //selectionSettings: { type: 'Multiple' }, 

     showColumnChooser: true, 

        allowPaging: true, 

        editSettings: { 

            allowEditing: true, 

            allowAdding: true, 

            allowDeleting: true, 

            mode: 'Dialog', 

            showConfirmDialog: true, 

            showDeleteConfirmDialog: true, 

        }, 

        allowExcelExport: true, 

        allowPdfExport: true, 

        toolbar: ['Add', 'Edit', 'Delete', 'ExcelExport', 'PdfExport'], 

    columns: [ 

         

        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 

        { field: 'CustomerID', headerText: 'Customer ID', allowEditing: false, width: 150 }, 

        { field: 'Freight', width: 150 }, 

        { field: 'OrderDate', headerText: 'Order Date', width: 150 } 

    ], 

     

    height: 315 

}); 

Refer the below screen shot. 

 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/documentation/api/grid/column/#allowediting 

If you want to hide that column in dialog editing then we suggest you to follow the below code example. 

var grid = new ej.grids.Grid({ 

    dataSource: data, 

    //selectionSettings: { type: 'Multiple' }, 

     showColumnChooser: true, 

        allowPaging: true, 

        editSettings: { 

            allowEditing: true, 

            allowAdding: true, 

            allowDeleting: true, 

            mode: 'Dialog', 

            showConfirmDialog: true, 

            showDeleteConfirmDialog: true, 

        }, 

        allowExcelExport: true, 

        allowPdfExport: true, 

        toolbar: ['Add', 'Edit', 'Delete', 'ExcelExport', 'PdfExport'], 

    columns: [ 

         

        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 

        { field: 'CustomerID', headerText: 'Customer ID', width: 150 }, 

        { field: 'Freight', width: 150 }, 

        { field: 'OrderDate', headerText: 'Order Date', width: 150 } 

    ], 

    actionBegin: function(args){ 

 

        if(args.requestType == "beginEdit" || args.requestType == 'add') 

            this.columns[1].visible = false; 

        else if(args.requestType == "save" || args.requestType == "cancel") 

            this.columns[1].visible = true; 

    }, 

    height: 315 

}); 

Refer the below screenshot. 

 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/documentation/api/grid/column/#visible 

Link: https://ej2.syncfusion.com/documentation/api/grid/#actionbegin 

Regards, 

Thavasianand S. 

[Arif Nurdiansyah]

It's working!
Thanks you for your answer, never figure out visible function can do this haha

[Madhu Sudhanan P]

Hi Arif, 

Thanks for the update. We are glad that your requirement has been achieved. 

Regards, 

Madhu