Asp.net MVC - 将excel / csv数据绑定到kendoUI网格

时间:2014-06-12 10:33:20

标签: c# asp.net-mvc excel kendo-grid

情境: 用户可以上传excel文件。 excel中的所有标题列都以网格形式显示,并带有映射选项,以将其映射到本地数据库。

之后,用户可以选择要从excel导入的记录数。

为此,我有两个KendoUI网格,一个用于列映射,另一个用于选择记录。

我使用dynamic ExpandoObject对象来读取excel文件。我能够在结果中获得excel列和数据行。

public CustomDataTabel ReadExcelFile(string file)
{
var response = new ServiceResponse<BulkDataTable> { IsSuccess = false };

                    using (var reader = new ExcelReader(new FileInfo(file)))
                    {
                        var csvTable = reader.CreateDataTable(true);
                        if (csvTable != null)
                        {
                            var table = new CustomDataTabel ();
                            int i = 1;
                            foreach (System.Data.DataColumn column in csvTable.Columns)
                            {
                                table.Columns.Add(
                                    new BulkDataColumn
                                    {
                                        Order = i,
                                        ColumnTitle = column.Caption,
                                        Key = column.ColumnName
                                    });
                                i++;
                            }

                            var j = 0;
                            for (j = 0; j < csvTable.Rows.Count; j++)
                            {
                                dynamic rowRecord = new System.Dynamic.ExpandoObject();
                                var tableRow = csvTable.Rows[j];
                                foreach (var dataColumn in table.Columns)
                                {
                                    var value = tableRow[dataColumn.Order - 1];
                                    ImpromptuInterface.Impromptu.InvokeSet(rowRecord, dataColumn.Key, value);
                                }

                                table.DataRows.Add(rowRecord);
                            }

                            response.Data = table;
                            response.IsSuccess = true;
                        }
                    }
                    return response;
}

我能够绑定列映射网格。但对于行(数据)绑定存在问题。数据(来自excel的行)是一个带有键值数据的dynamic对象,并且无法序列化为json,因此Kendo Grid无法绑定数据。我能够看到总数网格中的记录。

绑定Grid的逻辑如下:

var bulkDataColumn = null;
var bulkDataRow = null;

var loadColumnMapping = function (data) {
bulkDataColumn = data.BulkDataColumns;
 bulkDataRow = data.BulkDataRows;// this returns dynamic rows


 // Code to bind first grid i.e. Column mapping grid
 // I am able to bind the first grid with column details

 // Second grid (data) grid
 $("#dataGrid").kendoGrid({
                dataSource: {
                    data: bulkDataRow,
                    pageSize: 10,
                    batch: true,
                    schema: {
                        model: {
                            id: "Order",
                            fields: { // --> i don't know how to define fields, because data  and fields can be different depends on the file upload by user
                                Key: { type: "string", editable: false },
                                Value: { type: "string", editable: false },
                            }
                        }
                    }
                },
                pageSize: 10,
                editable: "incell",
                scrollable: true,
                sortable: true,
                filterable: true,
                edit: function (e) {
                    if (!e.model.IsSelected) {
                        //revert edited cell back to `read` mode
                        this.closeCell();
                    }
                }
                ,
                pageable: true,

                columns: [
                    { field: "Key", title: "Key", width: "130px" },
                    { field: "Value", title: "Value", width: "130px" },
                ]
            });
}

关于如何将dynamic对象与kendoUI网格绑定的任何想法? 在此先感谢。

0 个答案:

没有答案