1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Hide entry fields on dialog that are not editable

Hide entry fields on dialog that are not editable

Hi,

I have some fields that are not editable on several of my grids. Is there a way to hide those in the dialog pop up when someone is adding/editing row data instead of just graying them out?


5 Replies 1 reply marked as answer
VS Vignesh Sivagnanam Syncfusion Team October 9, 2020 01:09 PM UTC

Hi Jessica 

Thanks for contacting Syncfusion support 

Based on your query, we understand that you want to hide the unedited column in the Dialog popup. You can achieve your requirement using the actionBegin and actionComplete  events. Please refer the below code example for your reference 

Code Example : 
<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)="actionBegin($event)" 
     (actionComplete)="actionComplete($event)" height='273px'> 
……………….. 
……………….. 
……………….. 
actionBegin(args: EditEventArgs) { 
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { 
            for (const cols of this.grid.columns) { 
                if ((cols as Column).field === 'ShipCountry') { 
                    (cols as Column).visible = false; 
                } 
            } 
        } 
    } 
    actionComplete(args: SaveEventArgs) { 
        if (args.requestType === 'save') { 
            for (const cols of this.grid.columns) { 
                if ((cols as Column).field === 'ShipCountry') { 
                    (cols as Column).visible = true; 
                } 
            } 
            this.grid.refresh(); 
        } 
    } 

Please refer the below Sample and documentation for your reference  



Regards 
Vignesh Sivagnanam 


JG Jessica Goodrich October 9, 2020 10:30 PM UTC

Hi Vignesh,

This looks like a solution for angular, but I am not using angular. I am using ASP.NET Core.

VS Vignesh Sivagnanam Syncfusion Team October 12, 2020 10:42 AM UTC

  
Hi Jessica, 

Sorry for the inconvenience  

We have created a sample in ASP.NET Core to achieve your requirement and please download the sample from the below link 

Code Example:  

<div class="control-section"> 
        <ejs-grid id="Grid" dataSource="ViewBag.dataSource" actionBegin="actionBegin" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true"> 
            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings> 
            … 
            … 
            … 
        </ejs-grid> 

    <script> 
        function actionBegin(args) { 
            if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { 
                var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
                for (const cols of grid.columns) { 
                    if ((cols).field === 'ShipCountry') { 
                        (cols).visible = false; 
                    } 
                } 
            }  
        } 
        function actionComplete(args) { 
            if (args.requestType === 'save') { 
                var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
                for (const cols of grid.columns) { 
                    if ((cols).field === 'ShipCountry') { 
                        (cols).visible = true; 
                    } 
                } 
                grid.refresh(); 
            } 
        } 
         
    </script> 

Please refer the Sample for your reference  


Regards 
Vignesh Sivagnanam 


Marked as answer
JG Jessica Goodrich October 12, 2020 11:14 PM UTC

Thank you! This worked great.

VS Vignesh Sivagnanam Syncfusion Team October 13, 2020 08:27 AM UTC

Hi Jessica, 

We are happy to hear that the provided solution works fine at your end. 

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

Regards, 
Vignesh Sivagnanam 


Loader.
Up arrow icon