Unable to add °Multicolumn ComboBox° in data grid

[Giovanni Michielin]

Hello,

is there any example that shows how to add °Multicolumn ComboBox° component inside a data grid.

I did try without success.

Best regards,

Giovanni 

[Indrajith Srinivasan]

Hi Giovanni,

Greetings from Syncfusion support.

To render a MultiColumn ComboBox inside a data grid,  you can use editTemplate for the column using ng-template. We have prepared a sample to render a Multicolumn ComboBox component in the Customer Name column of the Syncfusion Grid. 

 

Sample - Link

 

<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'

                (actionBegin)='actionBegin($event)'>

    <e-columns>

      <e-column field='CustomerID' headerText='Customer Name' width='120'>

         <ng-template #editTemplate let-data>

<ejs-multicolumncombobox id='multicolumn' popupWidth='500px' [(ngModel)]='orderData.CustomerID' 

               [dataSource]='employeeData' [fields]='fields'>

             <e-columns>

               <e-column field='EmpID' header='Employee ID' width='70'></e-column>

               <e-column field='Name' header='Name' width='100'></e-column>

<e-column field='Designation' header='Designation' width='100'></e-column>

             </e-columns>

           </ejs-multicolumncombobox>

         </ng-template>

   </e-column>

...

 </e-columns>

</ejs-grid>

Screenshot



Could you please check and get back to us if you need any further assistance?

Regards,
Indrajith

[Giovanni Michielin]

Hello,

thank you for your reply.

Unfortunately I need to add a multicolumn combo box from typescript not from HTML 

Example

new Grid({

          dataSource: data,

          height: 505,

          width: 'auto',

          columns: [

            { field: 'Subject', headerText: 'Subject', width: 120 },

            { field: 'Description', headerText: 'Description', width: 120 },

            { field: 'StartTime', headerText: 'StartTime', width: 120, format: { type: 'dateTime', format: 'M/d/y hh:mm a' } },

            { field: 'EndTime', headerText: 'EndTime', width: 120, format: { type: 'dateTime', format: 'M/d/y hh:mm a' } },

          ]

        });

[Shanmugarajan Saravanan]

Hi Giovanni,

Thank you for your update. We have modified the provided sample in TypeScript to demonstrate your requirement. Please check the sample below and let us know if you need any further assistance.

Sample - Link

let grid: Grid = new Grid({

    dataSource: data,

    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },

    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],

    columns: [

        { field: 'CustomerID', headerText: 'Customer Name', width: 120, 

        edit: {

            create: function () {

                multiColumnElem = document.createElement('input');

                return multiColumnElem;

            },

            read: function () {

                return multiColumnObj.value

            },

            destroy: function () {

                multiColumnObj.destroy();

            },

            write: function (args) {

                let rowData = args.rowData;

                multiColumnObj = new MultiColumnComboBox({

                    dataSource: employeeData,

                    value: rowData.CustomerID,

                    popupWidth: '500px',

                    fields: { text: 'Name', value: 'Name' },

                    columns: columnsData,

                    change: function (e) {

                        rowData.CustomerID = e.value;

                    }

                });

                multiColumnObj.appendTo(args.element);

            }

        }

        },

...

    ],

    height: 273

});

grid.appendTo('#Grid');

Screenshot

Regards,
Shanmugarajan S.