Grid array field formatting

Question

Hi,my datasource returns a product object with categories in the form of : {            "id": "40807282-ac75-49c3-8339-7b6924f783b6",            "name": "Licensed Steel Soap",            "collections": [                "Autunno"            ],            "categories": [                "Clothing",                "Electronics",                "Outdoors"            ],            "price": 86.32,            "description": "My co-worker Nile has one of these. He says it looks crooked.",            "material": "Plastic",            "availability": "1-2 weeks",            "featured": false,            "picture": "http://lorempixel.com/640/480/fashion",            "additionalPictures": [                "http://lorempixel.com/640/480/fashion",                "http://lorempixel.com/640/480/fashion",                "http://lorempixel.com/640/480/fashion"            ],            "tenantId": null,            "type": "product",            "active": true        }I would like to display the categories in the grid as a comma delimited string (e.g Clothing, Electronics, Outdoors ) and in the edit dialog as a dropdownbox to which items can be deleted or added.Any help is appreciated

Venkatesh Ayothi Raman · Answer

Hi Alberto, Thanks for contacting Syncfusion support. Query: I would like to display the categories in the grid as a comma delimited string (e.g Clothing, Electronics, Outdoors ) and in the edit dialog as a dropdownbox to which items can be deleted or added. We have analyzed your query and we can achieve your requirement by valueAccessor event and multiselect dropdown component. In the below sample, we have used edit property to add the multiselect dropdown to the grid column. In the edit property of the grid, create, read, write and destroy methods are used. Write property is to create the multiselect dropdown with its own properties such as dataSource to bind data to the dropdown, mode as checkbox for the selection and value property to map the listed value to the datasource. Please refer to the below sample and documentation for your reference. Code Example: [app.component.ts] ... import { GridComponent ,IEditCell, EditService, ToolbarService, EditSettingsModel, ToolbarItems, Column} from '@syncfusion/ej2-ng-grids'; import { DropDownList, MultiSelect, CheckBoxSelection } from '@syncfusion/ej2-dropdowns'; ... MultiSelect.Inject(CheckBoxSelection); @Component({ selector: 'app-root', template: `

`, styleUrls: ['./app.component.css'] }) export class AppComponent { public data: Object[]; public editSettings: Object; public elem: HTMLElement; public dpParams: IEditCell; public dropdownObj: DropDownList; public msObject: MultiSelect; public toolbar: string[]; public dropdownData = [{ //dataSource for the multiselect dropdown "categories": ["Clothing","Electronics","Electricals","Furniture","Outdoors"] }]; public valueAccess = (field: string, data: Object, column: Object) => { return data['categories']; //to bind the data to the categories column } ngOnInit(): void { this.data = stringData; this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; this.dpParams = { create: () => { this.elem = document.createElement('input'); return this.elem; }, read: () => { return this.msObject.value; }, destroy: () => { this.msObject.destroy(); }, write: (args: any) => { this.msObject = new MultiSelect({ // bind the dropdownData to datasource property dataSource: this.dropdownData[0].categories, //set the placeholder to MultiSelect input placeholder:"Select categories", // set the type of mode for checkbox to visualized the checkbox added in li element. mode: 'CheckBox', value: args.rowData['categories'] }); //render the component this.msObject.appendTo(this.elem); } } } } Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/multiselect-dd1818840543 Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns.html#valueaccessor https://ej2.syncfusion.com/documentation/multi-select/api-multiSelect.html?lang=typescript#datasource https://ej2.syncfusion.com/documentation/multi-select/api-multiSelect.html?lang=typescript#mode https://ej2.syncfusion.com/documentation/multi-select/api-multiSelect.html?lang=typescript#value https://ej2.syncfusion.com/angular/documentation/grid/edit.html#cell-edit-template Please get back to us for further assistance. Regards, Venkatesh Ayothiraman.

Sathyanarayanan Srinivasan · Answer

Works like a charm... Thanks for this question and the solution. I have multiple array and complex object fields in a row. i would like to know the following:

* How do I add a label for the field with valueAccesor and edit (IEditCell)?

* For the dropdown, if I have to bifurcate the display user-friendly option and value (selected from drop down action)?

* For the complex object, I have a map (not a strongly typed object), I want to display the key-value pairs in the grid and want to be able to edit in the dialog as well. How to achieve the same?

Thanks and best regards,

Sathya

Thavasianand Sankaranarayanan · Answer

Hi Sathyanarayanan, 
 
Query: How do I add a label for the field with valueAccesor and edit (IEditCell)? 
 
We have validated your query and we suspect that you want to show placeholder before selecting an item in the multiselect dropdown. You can achieve your requirement by using placeholder property. Refer below code snippets for reference. 
 




ngOnInit(): void { 
    ... 
 
    this.dpParams = { 
      create: () => { 
        this.elem = document.createElement('input'); 
        return this.elem; 
      }, 
      read: () => { 
        return this.multiSelectObj.value; 
      }, 
      destroy: () => { 
        this.multiSelectObj.destroy(); 
      }, 
      write: (args) => { 
        this.multiSelectObj = new MultiSelect({ 
          dataSource: this.multiSelectData, 
          popupHeight: '200px', 
          fields: { value: 'ShipCountry', text: 'ShipCountry' }, 
          placeholder: 'Ship Country', 
          mode: 'CheckBox', 
        }); 
        this.multiSelectObj.appendTo(this.elem); 
      } 
    }; 
  } 
} 
 
 
Query: For the dropdown, if I have to bifurcate the display user-friendly option and value (selected from drop down action)? 
 
Based on your requirement, we have provided multiselect dropdown dataSource as array of objects(key & value pair). Refer the below code snippets for your reference. 
 
[code snippets] 




... 
 
  ngOnInit(): void { 
    this.data = orderDataSource; 
    this.pageSettings = { pageCount: 5 }; 
    this.filterSettings = { type: 'Menu' }; 
    this.city = ["Denmark", "Brazil", "Germany", "France", "Belgium"]; 
    this.multiSelectData = [ 
      { sid: '1', ShipCountry: 'Denmark' }, 
      { sid: '2', ShipCountry: 'Brazil' }, 
      { sid: '3', ShipCountry: 'Germany' }, 
      { sid: '4', ShipCountry: 'France' }, 
      { sid: '5', ShipCountry: 'Belgium' }, 
    ]; 
    ... 
 
    this.dpParams = { 
      create: () => { 
        this.elem = document.createElement('input'); 
        return this.elem; 
      }, 
      read: () => { 
        return this.multiSelectObj.value; 
      }, 
      destroy: () => { 
        this.multiSelectObj.destroy(); 
      }, 
      write: (args) => { 
        this.multiSelectObj = new MultiSelect({ 
          dataSource: this.multiSelectData, 
          popupHeight: '200px', 
          fields: { value: 'ShipCountry', text: 'ShipCountry' }, 
          placeholder: 'Ship Country', 
          mode: 'CheckBox', 
        }); 
        this.multiSelectObj.appendTo(this.elem); 
      } 
    }; 
  } 
} 

Query: For the complex object, I have a map (not a strongly typed object), I want to display the key-value pairs in the grid and want to be able to edit in the dialog as well. How to achieve the same? 
 
Based on your query we suspect that you want to use foreign key column in Grid. 
 
Please follow the below online demo and documentation link.  
 
Demo: https://ej2.syncfusion.com/demos/#/material/grid/foreign-key.html  

Help documentation: https://ej2.syncfusion.com/documentation/grid/columns/?no-cache=1#foreign-key-column 

Please ensure whether the mentioned feature is suitable for you.  

Regards, 
Thavasianand S.