Enable Combo Box for Grid Column and Export the grid to Excel

[abdul]

Hi,

We have a requirement, where we have a kendo grid, from the grid columns we need one or multiple columns as a dropdown/combobox.

Along with the above requirement we have the below requirements. 

1. Grid column with Dropdown/Combobox should work when paste in grid
2. Export also should work with dropdown/combobox columns.

To add new rows in the grid, we have to copy the rows from excel and paste in the grid, so after the paste all the new records should appear even in the dropdown/combobox field. The export is a client side export. 

And for the grid we have a button for exporting the grid data in excel. If for specific column which will be dropdown/combobox which will be of complex type then after export how that column will display in the excel.

 

Note: We have already tried with dropdownlist in the grid. We created a UI component and user that inside EditorTemplateComponentName

in the cshtml file. We are able to render the dropdown for that particular column inside the grid. But the problem is with dropdownlist column when we try to copy and paste records from excel to grid, paste is not working for dropdown column.

And also the dropdown column is a complex type so when we export the grid, the dropdown column value is not render in the excel file.

So, we are thinking to achieve the above requirements with a combo box, please provide the solution for the above requirements.

[Eyup]

Hi Abdul,

 

Thank you for reaching out.

Using ComboBox for Grid Columns with Paste and Export Functionality

You can use the Kendo ComboBox as an editor for your grid columns to meet your requirements. Here’s how you can address each scenario:

---

1. ComboBox Filtering on Paste

• By default, the ComboBox filters options only when typing. To enable filtering when pasting (Ctrl+V or mouse paste), you can attach a paste event handler to the ComboBox input and trigger a keydown event. This will initiate filtering after pasting:

var comboBox = input.kendoComboBox({
    // your ComboBox configuration
}).data("kendoComboBox");

comboBox.input.on("paste", function() {
    comboBox.input.trigger("keydown");
});

• This workaround ensures the ComboBox filters its options even when text is pasted.

---

2. Handling Complex Types for Paste and Export

• Paste Support for Complex Types:
  When pasting data from Excel into the grid, you need to map the pasted value to the corresponding ComboBox item. If your ComboBox is bound to complex objects (e.g., { id, name }), implement logic in the grid’s edit or save event to match the pasted text to the correct object in your data source.

• Exporting Complex Types to Excel:
  By default, the grid exports the underlying value (e.g., ID) of the ComboBox column. To display the text (e.g., name) in Excel, use the grid’s excelExport event to modify the exported value:

$("#grid").kendoGrid({
    // grid configuration
    excelExport: function(e) {
        var sheet = e.workbook.sheets[0];
        sheet.rows.forEach(function(row) {
            row.cells.forEach(function(cell) {
                // Replace the cell value with the ComboBox text
                // Example: cell.value = getComboBoxText(cell.value);
            });
        });
    }
});

• You’ll need to implement getComboBoxText to map the value to the display text based on your data source.

I hope this information is helpful and on point. Keep me updated on the result.

 

Regards,
Eyup
Progress Telerik