使用JayData插入KendoGrid

时间:2013-11-20 18:20:00

标签: jquery kendo-ui kendo-grid jaydata

我有一个使用JayData作为数据源的kendo网格。网格中有3个下拉控件。一切都很适合编辑。但是当我尝试进行插入时,带有下拉列表的字段不会更新到后备对象。

作为一种绝望的尝试,我在后备对象的三个相应字段中添加了默认值。现在,下拉列表会填充支持字段,但前提是您单击并更改选择。

以下是我的代码:

            <script src="Scripts/bootstrap.min.js"></script>
            <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
            <script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
            <script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
            <script src="http://include.jaydata.org/jaydata.js"></script>
            <script src="http://include.jaydata.org/jaydatamodules/kendo.js"></script>

            <script type="text/javascript">

                var baseAssetMgmtURL = "http://localhost/AssetManagementAPI/odata/";
                var crudServiceComputerBaseURL = baseAssetMgmtURL + "Computers/";
                var computerTypes = [];
                var osTypes = [];
                var brandModelTypes = [];

                var init = 0;

                var computer = $data.define("computer", {
                    ComputerId: { type: Number, key: true },
                    AssetTag: Number,
                    BrandModel: String,
                    ComputerModelTypeId: { type: Number, defaultValue: init },
                    ComputerTypeId: { type: Number, defaultValue: init },
                    ComputerType: String,
                    PurchaseDate: Date,
                    OperatingSystemTypeId: { type: Number, defaultValue: init },
                    OperatingSystemType: String,
                    ComputerName: String,
                    Notes: String,
                    MHIPSConnection: Date,
                    RetiredDate: Date
                });

                var ds = computer.asKendoDataSource({
                    provider: 'oData',
                    url: crudServiceComputerBaseURL,
                    batch: false,
                    pageSize: 10,
                    serverPaging: false
                });

                var setGrid = function () {
                    $("#grid").kendoGrid({
                        dataSource: ds,
                        columns: [
                            { title: "AssetTag", field: "AssetTag", filterable: false },
                            {
                                title: "Brand Type", field: "ComputerModelTypeId", filterable: false,
                                editor: brandTypeDropDownEditor, template: "#= getModelType(ComputerModelTypeId) #"
                            },
                            {
                                title: "Computer Type", field: "ComputerTypeId", filterable: false,
                                editor: computerTypeDropDownEditor, template: "#= getComputerType(ComputerTypeId) #"
                            },
                            { title: "PurchaseDate", field: "PurchaseDate", filterable: false },
                            {
                                title: "OS Type", field: "OperatingSystemTypeId", filterable: false,
                                editor: osTypeDropDownEditor, template: "#= getOSType(OperatingSystemTypeId) #"
                            },
                            { title: "Name", field: "ComputerName", filterable: false },
                            { title: "Notes", field: "Notes", filterable: false },
                            { title: "MHIPSConnection", field: "MHIPSConnection", filterable: false },
                            { title: "Retired", field: "RetiredDate", filterable: false },
                            { command: ["edit"], title: "&nbsp;" }
                        ],
                        pageable: true,
                        sortable: false,
                        scrollable: false,
                        editable: "popup",
                        toolbar: ["create"]
                    });
                };

                function loadLookupTypes(url, cb) {
                    var container = [];
                    $.getJSON(url,
                        function (data) {
                            var lookUpTypeString = JSON.stringify(data.value);
                            container = JSON.parse(lookUpTypeString);
                            cb(container);
                        });

                    return container;
                };

                function getComputerType(typeId) {
                    for (var i = 0, length = computerTypes.length; i < length; i++) {
                        if (computerTypes[i].ComputerTypeId === typeId) {
                            return computerTypes[i].CompType;
                        }
                    }
                };

                function getOSType(typeId) {
                    for (var i = 0, length = osTypes.length; i < length; i++) {
                        if (osTypes[i].OperatingSystemTypeId === typeId) {
                            return osTypes[i].SystemType;
                        }
                    }
                };

                function getModelType(typeId) {
                    for (var i = 0, length = brandModelTypes.length; i < length; i++) {
                        if (brandModelTypes[i].ComputerModelTypeId === typeId) {
                            return brandModelTypes[i].BrandModel;
                        }
                    }
                };

                function computerTypeDropDownEditor(container, options) {
                    $('<input name="ComputerTypeId" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            dataTextField: "CompType",
                            dataValueField: "ComputerTypeId",
                            dataSource: computerTypes
                        });
                };

                function osTypeDropDownEditor(container, options) {
                    $('<input name="OperatingSystemTypeId" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            dataTextField: "SystemType",
                            dataValueField: "OperatingSystemTypeId",
                            dataSource: osTypes
                        });
                };

                function brandTypeDropDownEditor(container, options) {
                    $('<input name="ComputerModelTypeId" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            dataTextField: "BrandModel",
                            dataValueField: "ComputerModelTypeId",
                            dataSource: brandModelTypes
                        });
                };


                $(document).ready(function () {
                    loadLookupTypes(baseAssetMgmtURL + "ComputerTypes", function (data) {
                        computerTypes = data;
                    });

                    loadLookupTypes(baseAssetMgmtURL + "OperatingSystemTypes", function (data) {
                        osTypes = data;
                    });

                    loadLookupTypes(baseAssetMgmtURL + "ComputerModelTypes", function (data) {
                        brandModelTypes = data;
                    });

                    setGrid();
                });

            </script>

0 个答案:

没有答案