Adding view-only fields to an editable grid

[Alex Lyashok]

Hello

What is the best way to show additional fields in a grid (i.e. some stats for each record) but not have them interfere with editing functionality?

I.e. in my DB I have a table and a corresponding view that has some additional fields for each row.

I'd like the grid to show all columns from the view but then adding/editing is broken. Is there a way to add columns from the view into the grid but keep field set the

[Rajapandi Ravi]

Hi Alex,

Greetings from Syncfusion support

Before we start providing solution to your query, we need some information for our clarification. So, please share the below details that will be helpful for us to provide better solution.

1)         Share your requirement scenario in video demonstration format.

2)         Share your exact requirement scenario with detailed description and pictorial representation.

Regards,

Rajapandi R

[Alex Lyashok]

I attached pictoral description @raj

Attachment: Picture2_e1578b83.zip

[Rajapandi Ravi]

Hi Adrian,

Thanks for the update

From validating your update, we could see that you like to hide column in the edit dialog. So based on your requirement we have prepared a sample and achieved your requirement by using actionBegin event of Grid.

In this below sample we have hide the ShipCountry column in the edit dialog.

 

actionBegin: function(args) {

                if (args.requestType === "beginEdit" || args.requestType === "add") {

                    // change the columns state

                    for (var i = 0; i < this.columns.length; i++) {

                        if (this.columns[i].field == "ShipCountry") {

                            this.columns[i].visible = false;

                        }

                    }

                }

                if (args.requestType === "save") {

                    // reset the columns state

                    for (var i = 0; i < this.columns.length; i++) {

                         if (this.columns[i].field == "ShipCountry") {

                            this.columns[i].visible = true;

                        }

                    }

                }

       

            }

Sample: https://stackblitz.com/edit/b2r3ea?file=index.ts,index.html

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

[Alex Lyashok]

This is helpful, however it does not solve my problem:

I have 2 odata sources - campaign (the one where i need to create new records) and  campaign_view that returns  campaign+3 extra columns that i need to show in the grid

What is the correct way to do it?

A. Use campaign as data source for the grid and add 3 more columns dynamically? If yes then how can it be done?

B. Use  campaign_view as data source but hide extra fields in the Add dialog and point it somehow to  campaign odata for record crearion. If yes then how can i point the Add dialog to another source?

Thanks

Alex

[Pavithra Subramaniyam]

Hi Alex,

Query#A: Use campaign as data source for the grid and add 3 more columns dynamically? If yes then how can it be done?

From your query, we understood that you want to add new columns which are not present in the Grid data Source and use these columns for display purposes only. If yes, you can achieve your requirement by using the “Colum Template” in which you can show the custom values for the corresponding Grid data from the “campaign” dataSource. Also, you can hide the template column using the “actionBegin” event as we suggested earlier. Please refer to the below documentation for more information.

https://ej2.syncfusion.com/documentation/grid/columns/column-template/

Query#B: Use  campaign_view as data source but hide extra fields in the Add dialog and point it somehow to  campaign odata for record crearion. If yes then how can i point the Add dialog to another source?

You can hide the columns in edit/add dialog using “actionBegin” event. But we could not redirect to another OData service for adding/editing with the default Editing feature. So, you can cancel the default save action inside the “actionBegin” event and send your own OData request with the given values. And inside the success method of the request, you can call the “grid.refresh()” method to see the changes. Please refer to the below code example for more information.

actionBegin: function(args) {

  if (args.requestType === "beginEdit" || args.requestType === "add") {

    // change the columns state

    for (var i = 0; i < this.columns.length; i++) {

      if (this.columns[i].field == "ShipCountry") {

        this.columns[i].visible = false;

      }

    }

  }

  if (args.requestType === "save") {

    // reset the columns state

    for (var i = 0; i < this.columns.length; i++) {

      if (this.columns[i].field == "ShipCountry") {

        this.columns[i].visible = true;

      }

    }

    args.cancel = true;

    //args.data will contain the edited/added data

    // here you can send the request

  }

 

}