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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to hide table columns, but show them in edit/add dialog?

Thread ID:

Created:

Updated:

Platform:

Replies:

143898 Apr 9,2019 09:58 PM UTC Apr 11,2019 08:39 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
derekb
Asked On April 9, 2019 09:58 PM UTC

Hello,

I'm using a DataGrid to display a model (Account) that has a large number of fields. I've hidden some of the columns by specifying "visible=false", so that the table fits on the screen. However, I want users to be able to edit ALL fields, even if they're not visible on the main table. I also want users to have control over all fields when adding a new row. I'm using "mode=Dialog" for my edit settings.

To be clear, I do NOT want to create two custom templates (for the edit and add dialogs respectively), because that's unmaintainable, and I'm happy with the default Syncfusion dialog styling. I'm looking for an automatic way to do this, or at least one with the minimal amount of code.

Thanks,
DerekB

Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 10, 2019 10:47 AM UTC

Hi Derek, 

Greetings from Syncfusion support. 

We can achieve your requirement using the dialog template edit mode in Grid. 

Refer the below documentation for further details. 


Please let us know if you need further assistance on this. 

Regards, 
Thavasianand S. 


derekb
Replied On April 10, 2019 04:37 PM UTC

Hi Thavasianand,

As I said, I don't want to create templates. First I have to specify all the columns manually for the main table, because data annotations aren't supported, and now I have to do it again for two templates (edit and add)? That's a lot of code duplication. Isn't there any other way to do this? I only need two or three extra fields in my edit / add dialogs compared to the main table, so I would like to be able to simply add the columns (or maybe mark them as visible?) for those dialogs, instead of having to specify each and every field in my entity.

Thanks,
DerekB

Pavithra Subramaniyam [Syncfusion]
Replied On April 11, 2019 08:39 AM UTC

Hi Derekb, 
 
You can achieve this requirement by simply change that particular columns visible property value in while perform the edit action. Please refer the following code snippet, 
 
<ejs-grid id="Grid" dataSource="ViewBag.data" allowPaging="true" actionBegin="actionBegin" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"> 
    <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Dialog"></e-grid-editSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="100"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column> 
        <e-grid-column field="Freight" headerText="Freight" visible="false" format="C2" editType="numbericedit" width="120"></e-grid-column> 
        <e-grid-column field="OrderDate" headerText="Order Date" visible="false" editType="datepickeredit" format="yMd" width="130"></e-grid-column> 
        <e-grid-column field="ShipCity" headerText="Ship City" editType="dropdownedit" width="120"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<script type="text/javascript"> 
    var fields = []; 
    function actionBegin(args) { 
        if (args.requestType == "beginEdit" || args.requestType == "add") { 
            for (var i = 0; i < this.columns.length; i++) { 
                if (!this.columns[i].visible) { 
                    fields.push(this.columns[i].field); 
                    this.columns[i].visible = true; 
                } 
            } 
        } 
        if (args.requestType == "save" || args.requestType == "cancel") { 
            for (var i = 0; i < this.columns.length; i++) { 
                for (var j = 0; j < fields.length; j++) { 
                    if (this.columns[i].field == fields[j]) { 
                        this.columns[i].visible = false; 
                    } 
                } 
            } 
        } 
    } 
</script> 
 
In this code we have changed the visible property value simultaneously while perform CRUD action in Grid. We have prepared the sample based on this requirement and you can download that sample from the below link, 
 
                               https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#visible 
 
 
                                    
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


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