Show or Hide columns in Dialog editing - Error in documentation

[Avinash]

Hi,

I want to hide a column from the grid, only in the add/edit dialog.

The solution to explained in the documentation at https://ej2.syncfusion.com/aspnetmvc/documentation/grid/how-to/show-hide-columns-in-dialog-editing/

<script>
    function actionBegin(args) {
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            for (var i = 0; i < this.columns.length; i++) {
               if (this.columns[i].field == "CustomerID") {
                   this.columns[i].visible = true;
               }
               else if (this.columns[i].field == "ShipCountry") {
                   this.columns[i].visible = false;
               }
            }
        }
    }

    function actionComplete(args) {
        if (args.requestType === 'save') {
            for (var i = 0; i < this.columns.length; i++) {
                if (this.columns[i].field == "CustomerID") {
                    this.columns[i].visible = false;
                }
                else if (this.columns[i].field == "ShipCountry") {
                    this.columns[i].visible = true;
                    }
                }
        }
    }
</script>

However this is not working correctly in Asp.NET Core 3.1 (Syncfusion version 18.1.0.57). 
When the add/edit dialog closes, the grid only makes the column header visible but the body of the column is still hidden. This makes the data rows misaligned with the header.

The following code works. Please correct this in the documentation. I spent a few hours trying to debug this. Hopefully it will help someone else.

<script>
    function actionBegin(args) {
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            for (var i = 0; i < this.columns.length; i++) {
               if (this.columns[i].field == "CustomerID") {
                   this.columns[i].visible = true;
               }
               else if (this.columns[i].field == "ShipCountry") {
                   this.columns[i].visible = false;
               }
            }
        }

        if (args.requestType === 'save' || args.requestType === 'cancel') {
            for (var i = 0; i < this.columns.length; i++) {
                if (this.columns[i].field == "CustomerID") {
                    this.columns[i].visible = false;
                }
                else if (this.columns[i].field == "ShipCountry") {
                    this.columns[i].visible = true;
                    }
                }
        }
    }
</script>

Thanks

Avinash Tauro

[Praveenkumar Gajendiran]

Hi Avinash Tauro,

Greetings from Syncfusion support.

In our documentation, We change the Column visibility at successfully completed ‘save’ action through actionComplete event because the reason is, We want to retain the edit state when it failure at the beginning of save action.

In your code, We found that you change the Column visibility in the beginning of save process through actionBegin event. So you can use based on your requirement.

Let us know if have any concerns.

Regards,
Praveenkumar G 

[Avinash]

Yes it makes sense to have the code in actionEnd. However this does not work for single columns, so I had to put all the code in actionBegin.

In your documentation sample if you keep only ShipCountry in the javascript and remove Customerid as in the code below, it does not work. 
The ShipCountry header is shown in the grid but the data cells are still hidden. Is there a workaround to that?

<script>
    function actionBegin(args) {
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            for (var i = 0; i < this.columns.length; i++) {
               if (this.columns[i].field == "ShipCountry") {
                   this.columns[i].visible = false;
               }
            }
        }
    }

    function actionComplete(args) {
        if (args.requestType === 'save') {
            for (var i = 0; i < this.columns.length; i++) {
                if (this.columns[i].field == "ShipCountry") {
                    this.columns[i].visible = true;
                    }
                }
        }
    }
</script>

[Praveenkumar Gajendiran]

Hi Avinash Tauro,

Thanks for your update,

We checked your reported problem at our end but unfortunately were unable to reproduce it from our end. 

In our documentation sample, We change the column visibility (ShipCountry column is hide in the Dialog only) while editing only. Once you are completed the edit operation, then the ShipCountry column is automatically displayed in Grid. 

Please check below sample and screenshot for your reference,


Sample:  https://www.syncfusion.com/downloads/support/forum/155473/ze/GridDialogEidt-403919696.zip
Screenshot: 

 

In the above reference, We set visible false to ‘ShipCountry’ column field while editing.


If we misunderstood anything wrongly, Please share the below details that will be helpful for us to provide better solution.

1. Share the complete Grid rendering code. 

2. If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample. 

3. Share the screenshot and video demonstration of an issue.

Regards,
Praveenkumar G