Kendo UI角度上传/ Kendo网格集成

时间:2015-07-11 02:45:58

标签: javascript jquery angularjs asp.net-mvc-4 kendo-ui

好的,这是版本:

  • Kendo UI v2014.3.1119
  • AngularJS v1.3.6
  • jQuery v@1.8.1 jquery.com

问题如下:我有一个剑道上传,应该在读取excel文件后填充网格。我正在使用Kendo UI Angular Directives。以下是一些关键代码:

上传HTML

 <input name="files"
               type="file"
               kendo-upload
               k-async="{ saveUrl: '{{dialogOptions.ImportUrl}}', autoUpload: false, batch: true }"
               k-options="{localization: {uploadSelectedFiles: '{{messages.Global_Button_Import}}'}}"
               k-error="onImportError"
               k-select="onSelect"
               k-success="onImportSuccess" k-multiple="false" />

网格黑客

 <div kendo-grid="grid" k-options="gridOptions" k-ng-delay="gridOptions" k-rebind="gridOptions" >
        </div>

控制器上的关键部分

angular.module('global').controller('ImportResultsController', [
'$scope', 'BaseApi', 'ImportResultsService', 'GridUtil', '$http', '$q', '$timeout',
function ($scope, BaseApi, ImportResultsService, GridUtil, $http, $q, $timeout) {


$scope.gridOptions;
    $scope.gridColumns;
    $scope.results = new kendo.data.ObservableArray([]);

//These columns should come from the server, right now are harcoded

$scope.getGridColumns = function () {
        $scope.gridColumns = [
               { field: "Zone", width: 70, title: "Zone", template: "" },
               { field: "Aisle", width: 70, title: "Aisle", template: "" },
               { field: "Rack", width: 70, title: "Rack", template: "" },
               { field: "Shelf", width: 70, title: "Shelf", template: "" },
               { field: "Bin", width: 70, title: "Bin", template: "" },
               //{ field: "DateEffectiveFrom", width: 70, title: "Date" },
               { field: "BinStatus", width: 70, title: "BinStatus", template: "" }
        ];
    }


$scope.getClientGridOptions = function(columns,  data, pageSize) {

    var gridOptions = {
        sortable: true,
        dataSource: {
            data: data,
            pageSize: pageSize
        },
        selectable: 'row',
        columns: columns,
        pageable: {
            pageSize: pageSize,
            refresh: false,                
            pageSizes: [10, 20, 30],
            messages: $.kendoMessages
        },
    };

    return gridOptions
}

$scope.onImportSuccess = function (e) {
        var files = e.files;

        if (e.operation == "upload") {
            console.log(files);
            if (e.XMLHttpRequest.response != "") {
                var model = $.parseJSON(e.XMLHttpRequest.response); //This step does not fail, model return is always filled
                $scope.results = new kendo.data.ObservableArray([]);

                for (var i = 0; i < model.Data.length; i++) {
                    $scope.results.push(model.Data[i]);
                }

                $scope.gridOptions = $scope.getClientGridOptions($scope.gridColumns, $scope.results, 10);
                //$scope.grid.dataSource.data($scope.results); //This does not work

                $scope.isDataReady = true;

               // $("#grid").data("kendoGrid").dataSource.data($scope.results) //This does not work                  
               // $scope.grid.refresh(); //This does not work
                $scope.$apply()



            }               

        }                  

    }

}]);

问题各不相同。有时我会将数据绑定到第二个上传文件,在第三次之后,我开始接收“无法读取属性”#get;#39;未定义的&#39;错误。当第二个错误发生时,绑定工作,但错误存在。你知道它会是什么吗?

如果您需要上传的网址,请参阅此方法。是一个MVC .net应用程序。由于我总是正确得到答案并且它是一个Json数组,我相信那里没有问题,但不管怎么说。

dialogOptions.ImportUrl = LoadImportedBinLocations

MVC控制器

[System.Web.Http.HttpPost]
    public ActionResult LoadImportedBinLocations(IEnumerable<HttpPostedFileBase> files)
    {
        bool success = false;

        var importHistory = new PartsImportHistory();
        List<dynamic> data = null;
        try
        {
            //int divisor = 0;
            //var y = 5 / divisor;

            if (files != null)
            {
                using (var client = new ServiceLocator<IPartsService>())
                {
                    foreach (var file in files)
                    {
                        string extension = Path.GetExtension(file.FileName);
                        bool isExcelFile = extension == ".xls" || extension == ".xlsx";

                        if (isExcelFile)
                        {
                            var filePath = UploadAttachment(file);

                            //importHistory = client.Service.SavePartsImportHistory(new PartsImportHistory
                            //{
                            //    CreatedByName = CurrentContext.UserDisplayName,
                            //    CreatedByUserID = CurrentContext.UserId,
                            //    PartsImportStatus = (int)DMSModel.EnumStore.PartsImportStatus.InProgress,
                            //    FilePath = filePath
                            //});
                            data = new List<dynamic> 
                                { 
                                    new { Zone = "A", Aisle = "02", Rack = "06", Shelf = "20", Bin = "D", DateEffectiveFrom = DateTime.UtcNow, BinStatus = "Unblocked", IsValid= true, ImportError ="" },
                                    new { Zone = "B", Aisle = "02", Rack = "06", Shelf = "10", Bin = "D", DateEffectiveFrom = DateTime.UtcNow, BinStatus = "Blocked", IsValid=false, ImportError="Zone does not Exist" }
                                };

                            success = true;
                        }
                        else
                        {
                            throw new Exception(WarpDMS.Globalization.Resources.PartsAdmin_ImportParts_ErrorFileFormat);
                        }
                    }
                }
            }

            return Json(new { success = success, Data = data });
        }
        catch (Exception ex)
        {
            return Content(ex.Message ?? ex.ToString());
        }
    }

    private string UploadAttachment(HttpPostedFileBase item)
    {
        string path = string.Empty;
        string internalFileName = string.Empty;
        string basePath = ConfigManager.ATTACHMENTS_PATH;

        if (item != null && item.ContentLength > 0)
        {
            internalFileName = System.IO.Path.ChangeExtension(Guid.NewGuid().ToString(), System.IO.Path.GetExtension(item.FileName));
            path = Path.Combine(basePath, internalFileName);

            item.SaveAs(path);
        }

        return Path.Combine(basePath, internalFileName).Replace('\\', '/');
    }

0 个答案:

没有答案