We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Hidden column on add and edit dialog

Thread ID:

Created:

Updated:

Platform:

Replies:

141835 Jan 7,2019 09:16 AM UTC Jan 9,2019 04:09 AM UTC JavaScript - EJ 2 3
loading
Tags: Grid
Arif Nurdiansyah
Asked On January 7, 2019 09:16 AM UTC

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 [Syncfusion]
Replied On January 8, 2019 06:43 AM UTC

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. 


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. 



Regards, 
Thavasianand S. 


Arif Nurdiansyah
Replied On January 9, 2019 03:41 AM UTC

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

Madhu Sudhanan P [Syncfusion]
Replied On January 9, 2019 04:09 AM UTC

Hi Arif, 
Thanks for the update. We are glad that your requirement has been achieved. 
Regards, 
Madhu 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon