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. Image for the cookie policy date
close icon

Adding view-only fields to an editable grid

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


5 Replies

RR Rajapandi Ravi Syncfusion Team December 19, 2022 01:01 PM UTC

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



AL Alex Lyashok December 19, 2022 10:03 PM UTC

I attached pictoral description @raj


Attachment: Picture2_e1578b83.zip


RR Rajapandi Ravi Syncfusion Team December 21, 2022 03:39 PM UTC

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




AL Alex Lyashok December 21, 2022 04:59 PM UTC

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




PS Pavithra Subramaniyam Syncfusion Team December 23, 2022 07:49 AM UTC

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

  }

 

}

 



Loader.
Live Chat Icon For mobile
Up arrow icon