1. Home
  2. Forum
  3. Angular - EJ 2
  4. Data Grid edit template with combo box finish edit value as object

Data Grid edit template with combo box finish edit value as object

Hello! I have a data grid with a column that is templated the edit in batch mode. The cell template is a combo box that builds his values depending on the row selected.
Here is the code of the column:

        <e-column field='property.selectedUnit' headerText="{{'txt.Unit' | translate}}">
<!--            <ng-template #template let-data>-->
<!--                {{data.property.selectedUnit | translate}}-->
<!--            </ng-template>-->
            <ng-template #editTemplate let-data>
                <ejs-combobox id="unitCombo"
                              [sortOrder]="'Ascending'"
                              [showClearButton]="false"
                              [fields]="{text: 'name', value: 'name'}"
                              [dataSource]="data.property.unitProfilesSet"
                              [value]="data.property.selectedUnit"
                              (valueChange)="unitChange($event,data)"
                >
                </ejs-combobox>
<!--                <ng-template #template let-upData>-->
<!--                    {{upData.name | translate}}-->
<!--                </ng-template>-->
            </ng-template>
        </e-column>
The data source of the combo box is in the data row as an array of objects (in the fields the id is the 'name' and the value is the name). When I enter edit mode in the cell, the combox is draw correctrly, with the selectedUnit current value selected. When I changed the value and finish edit, the cell draw the selectedUnit as an Object (screenshot attached). I'm not sure why this is happening, the data of the row the selectedUnit is the string of name. 
The other thing that I need is to detect the edit ending of the cell to to some code.

Thanks.

Attachment: Screenshot_2_3ec9629e.zip

9 Replies
CS Cesar Smerling April 13, 2020 03:49 PM UTC

Debugging a little bit, addint in the grid cellSaved event, logged that event and the new value is and {} object. I don't know why.



SK Sujith Kumar Rajkumar Syncfusion Team April 14, 2020 09:04 AM UTC

Hi Cesar, 

Greetings from Syncfusion support. 

We suspect the problem you are facing might be occurring due to the improper field values bound to the combo box causing the object value to be returned to the Grid. And since the grid column type does not support object type the problem occurs. So instead of the edit template we suggest you to use the cell edit template method to render combo-box for editing in the Grid columns. Using this the value to be saved in the Grid is returned in the application level function so you will be able to return the proper value to the Grid. This is demonstrated in the below code snippet, 

<ejs-grid #grid id='grid' allowPaging='true' [pageSettings]='pageSettings' [dataSource]='pData' [editSettings]='editSettings' [toolbar]='toolbar'> 
    <e-columns> 
        <e-column field='City' headerText='City' [edit]='cbParams' width=150></e-column> 
    </e-columns> 
</ejs-grid> 

export class AppComponent implements OnInit { 
        . 
        . 
  public elem: HTMLElement; 
  public comboboxObj: ComboBox; 
  public cbParams: IEditCell; 
   
  ngOnInit() { 
    this.cbParams = { 
      create: () => { 
          // Input element is created for appending the combo box 
          this.elem = document.createElement('input'); 
          return this.elem; 
      }, 
      read: () => { 
        // The combo box value to be saved in the Grid is returned here  
        return this.comboboxObj.value; 
      }, 
      destroy: () => { 
          this.comboboxObj.destroy(); 
      }, 
      write: (args: { rowData: object, column: Column }) => { 
          // Combo box is created and appended to the form element 
          this.comboboxObj = new ComboBox({ 
              sortOrder: "Ascending", 
              showClearButton: false, 
              fields: {text: 'name', value: 'name'}, 
              dataSource: this.comboData, 
              value: args.rowData["City"] 
          }); 
          this.comboboxObj.appendTo(this.elem); 
      } 
  }; 
  } 
 
} 

We have prepared a sample based on this for your reference which you can find below, 


More details on the cell edit template can be found in the below documentation link, 


Let us know if you have any concerns. 

Regards, 
Sujith R 


CS Cesar Smerling April 14, 2020 12:01 PM UTC

Hello! 
Thanks works perfect now.

The only thing I want to know is there is a way to add the template to combo box created by code?. I'm using a pipe to translate the value. Using this template would be easier for me than translate each value in the combo or the data source.
Thanks

  <ng-template #template let-upData>
         {{upData.name | translate}}
  </ng-template>

SK Sujith Kumar Rajkumar Syncfusion Team April 15, 2020 10:08 AM UTC

Hi Cesar, 

We are glad to hear that the provided solution worked for you. 

On using cell edit template the control must be defined in the write function of the edit params as demonstrated in the previous update. If the control is defined using ng-template only the template reference can be accessed in the TS file based which the component cannot be appended to the element in this function. So you would need to define the control with its properties in the write method. 

Let us know if you have any concerns. 
  
Regards, 
Sujith R 


CS Cesar Smerling April 15, 2020 01:12 PM UTC

Thanks!

Can you give an example of templating the combobox by code. The current selected value and the dropdown list ?



SK Sujith Kumar Rajkumar Syncfusion Team April 16, 2020 09:22 AM UTC

Hi Cesar, 

We are not able to clearly understand your requirement from your query so can you please elaborate on it. Like, do you want example of defining the combo box through the ng-template or define the template using column’s editTemplate in TS file? If the requirement is different from this can you provide the details for it. Based on your response we will further validate and provide you the update. 

Let us know if you have any concerns. 

Regards, 
Sujith R 


CS Cesar Smerling April 16, 2020 11:27 AM UTC

Hi! Sorry for not be very clear.

Since I cannot use object in the template with in the grid I want to know how to use the template in the TS file. I was looking the template engine to add it to the itemTemplate but I don't get it working. So my question is how can I template the combo box values and the dropdownlist in the TS file (component), so I can use a pipe (maybe pipe don't work but I can use a service to translate the value)

Thanks

CS Cesar Smerling April 16, 2020 12:09 PM UTC

The other problem I have is that my compiler complains on the type of data of the dataSource property in the TS file. I have created and array of Objects of the type DataSource (my implementation), how can I  solve this? When I map to type {[key:string]: Object} the combo box display empty values.

In the attachet file is the screeshot of the error.

Attachment: Screenshot_2_68d1cbc3.zip

SK Sujith Kumar Rajkumar Syncfusion Team April 17, 2020 12:01 PM UTC

Hi Cesar, 
 
Query – 1: “Defining template in TS file” 
 
From your query we are able to understand that you wish to render the itemTemplate for the combo box component. You can achieve it by defining it as a string in the TS file where you can translate the required values and append to it. 
 
export class AppComponent implements OnInit { 
    // Here you can translate the required values and append it to the below template string 
    public comboTemplate = "<span class='custom'>${name}</span>" 
               . 
               . 
    // Edit params function 
    this.cbParams = { 
               . 
               . 
      write: (args: { rowData: object, column: Column }) => { 
          this.comboboxObj = new ComboBox({ 
               . 
               . 
            itemTemplate: this.comboTemplate, 
            fields: { text: 'name', value: 'name' } 
          }); 
          this.comboboxObj.appendTo(this.elem); 
      } 
} 
 
Query – 2: “Type issues with combo box data source” 
 
Since the combobox data source accepts only the following types – “{[key: string]: Object;} [] | DataManager | string[] | number[] | boolean[]” we suggest you to either define the values in any of the mentioned types or assign your pre-defined data as this type. 
 
dataSource: (this.comboData as { [key: string]: Object; } []), 
 
We have modified the previously provided sample based on the above queries for your reference. You can download it from the following link, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


Loader.
Up arrow icon