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

[derekb]

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]

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. 

Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/?no-cache=1#dialoginline-template 

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

Regards, 

Thavasianand S. 

[derekb]

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]

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, 

 

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

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

 

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid2099419390.zip 

 

                                    

Please get back to us for further assistance. 

 

Regards, 

Pavithra S. 

[Danyelle]

This is not working for me. I also tried to follow your example in the guide and when I put the ActionBecgin part in my grid it returns a blank page with this error in the javascript browser.

Here is my code:

<div class="inventoryGrid">

    @Html.EJS().Grid("InventoryGrid").DataSource(DataManager => { DataManager.Json(@Model.Inventory.ToArray()).InsertUrl("/Home/AddInventoryItem").UpdateUrl("/Home/UpdateInventoryItem").Adaptor("RemoteSaveAdaptor"); }).AllowFiltering(true).AllowSorting(true).ActionBegin("actionBegin").Columns(col =>

    {

    col.Field("InventoryID").HeaderText("Id").IsPrimaryKey(true).IsIdentity(true).AllowEditing(false).Width("40").Add();

    col.Field("HECNumber").HeaderText("HEC Number").Width("50").Visible(false).Add();

   

    }).AllowPaging(true).FilterSettings(filter => filter.Columns(filterColumns)).SortSettings(sort => sort.Columns(sortColumns)).PageSettings(page => page.PageSize(15)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit" }).Render()

</div>

@Html.EJS().ScriptManager()

<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;

                    }

                }

            }

        }

    }

[Vignesh Sivagnanam]

Hi Danyelle 

Greetings from Syncfusion support 

Based on your query we have prepared a sample using your code example and we are able to reproduce the reported issue at our end. To resolve the mentioned issue we suggest to add the ScriptManager at the bottom of the page. Please refer the below code example for your reference 

Code Example:   

@Html.EJS().Grid("RemoteSaveAdaptor").DataSource(dataManager => { dataManager.Json(@Model.orderData.ToArray()).InsertUrl("/Home/Insert").RemoveUrl("/Home/Delete").UpdateUrl("/Home/Update").Adaptor("RemoteSaveAdaptor"); }).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("30%").Add(); 

    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add(); 

    col.Field("CustomerID").HeaderText("CustomerID").Width("70").Visible(false).Add(); 

}).AllowPaging().ActionBegin("actionBegin").ActionComplete("actionComplete").AllowSorting(true).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Render() 

<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; 

        } 

      } 

    } 

  } 

  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; 

        } 

      } 

    } 

  } 

</script> 

@Html.EJS().ScriptManager() 

Documentation : https://ej2.syncfusion.com/aspnetmvc/documentation/grid/getting-started-mvc/#adding-scriptmanager-in-layout-page 

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

Regards, 

Vignesh Sivagnanam 

[SeattlePSE]

Can you please advise on how to do this with syncfusion web forms?

this.columns does not see to be a valid array of column names?

[Rajapandi Ravi]

Hi SeattlePSE, 

Thanks for the Update 

We have analyzed your query and we could see that you are facing the problem with column names. In our previous update, we have taken the column field name (this.columns[i].field) which was already defined in the datasource. Before we start providing solution on your query, we need some information for our clarification. So please share the below details that would be helpful for us to provide better solution. 

1)      Please confirm whether you are using EJ1 or EJ2 Grid. 

2)      Please share your complete Grid rendering code. 

Regards,
Rajapandi R 

[SeattlePSE]

EJ1 with a SQL Data Source. (without a template)

Thanks

 

               

               

               

                   

                   

                   

                   

                   

                   

               

                 

               

               

           

[SeattlePSE]

EJ1 with a SQL Data Source. (without a template)

Thanks

 

               

               

               

                   

                   

                   

                   

                   

                   

               

                 

               

               

           

really need a code block on this form, keeps wiping this out when I edit my post.

 <ej:Grid ID="Grid1" runat="server" AllowPaging="True" AllowResizing="True" CssClass="" DataSourceCachingMode="None" DataSourceID="SqlDataSource1" EnableLoadOnDemand="False" MinWidth="0" AllowFiltering="True" AllowMultiSorting="True" AllowSorting="True">

                <ToolbarSettings ShowToolbar="True" ToolbarItems="search,add,edit,delete">

                </ToolbarSettings>

                <Columns>

                    <ej:Column DataType="number" Field="Supplier_ID" EditType="DropdownEdit" Visible="true">

                    </ej:Column>

                    <ej:Column AllowEditing="False" DataType="number" Field="ID" IsIdentity="True" IsPrimaryKey="True" Visible="False">

                    </ej:Column>

                    <ej:Column DataType="string" Field="inputEmail" HeaderText="Reviewer Email" Visible="false">

                    </ej:Column>

                </Columns>

                <ClientSideEvents ActionBegin="actionBegin" /> 

                <PageSettings PageSize="35" />

                <EditSettings AllowAdding="True" AllowDeleting="True" AllowEditing="True" EditMode="Dialog" ShowDeleteConfirmDialog="True" />

            </ej:Grid>

[Farveen Sulthana Thameeztheen Basha]

Hi Seattle, 

We have checked your query and while using EJ1 Grid, the reported requirement (show columns only on Editing) is not feasible while using Dialog EditMode. We can only show visible columns in EditForm. To achieve this requirement we suggest you to use DialogTemplate EditMode. By using Dialog Template Editing you can use your own customized form (For ex:- you can define your desired field inside the Template and it will display only on Editing). We can show additional columns only on Template mode of Editing in EditForm.  

Refer to the documentation and Demo links:- 

https://help.syncfusion.com/aspnet/grid/editing#dialog-template-form 

https://asp.syncfusion.com/demos/web/grid/dialogonlocaldata.aspx 

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

Regards, 

Farveen sulthana T