gpt4 book ai didi

angular - Kendo Grid Persist State 破坏了可编辑的弹出窗口功能

转载 作者:太空狗 更新时间:2023-10-29 19:34:16 25 4
gpt4 key购买 nike

在下面的示例中,如果我对网格进行更改(删除一列)、保存状态、进行另一项更改(删除另一列)、加载状态,则网格视觉效果会正确显示。

问题是,单击编辑或新建站点按钮不再有效。您可以看到弹出窗口没有完全呈现。在使用获取选项加载状态之前,弹出窗口工作正常。

有人知道怎么解决吗?

请在此处查看代码片段:http://dojo.telerik.com/@joe.gloeckner@rminsight.net/OHUSU

所有代码:

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">




<div id="wrapper">
<div class="box wide">
<a href="#" class="k-button" id="save">Save State</a>
<a href="#" class="k-button" id="load">Load State</a>
</div>

<div id="grid" kendo-grid="siteGrid" k-options="siteGridOptions"></div>


<script type="text/x-kendo-template" id="editSiteTemplate">
<div class="k-edit-form-container">
<div class="alert alert-danger" ng-show="crudError != ''">{{crudError}}</div>
<div class="k-edit-label"><label for="AMTAssetNumber">AMT Asset No.</label></div>
<div class="k-edit-field" data-container-for="AMTAssetNumber">
<input name="AMTAssetNumber" class="k-input k-textbox" required="required" type="text" ng-change="dataItem.dirty=true" ng-model="dataItem.AMTAssetNumber">
</div>
<div class="k-edit-label"><label for="Carrier">Carrier</label></div><div class="k-edit-field" data-container-for="Carrier">
<input name="Carrier" class="k-input k-textbox" required="required" type="text" ng-change="dataItem.dirty=true" ng-model="dataItem.Carrier">
</div>

<div class="k-edit-label"><label for="CarrierSiteNumber">Carrier Site Number</label></div><div class="k-edit-field" data-container-for="CarrierSiteNumber">
<input name="CarrierSiteNumber" class="k-input k-textbox" required="required" type="text" ng-change="dataItem.dirty=true" ng-model="dataItem.CarrierSiteNumber">
</div>

<div class="k-edit-label"><label for="InfinigyJobNumber">Infinigy Job Number</label></div><div class="k-edit-field" data-container-for="InfinigyJobNumber">
<input name="InfinigyJobNumber" class="k-input k-textbox" required="required" type="text" ng-change="dataItem.dirty=true" ng-model="dataItem.InfinigyJobNumber">
</div>


</div>

</div>
</script>



</div>
</div>


<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
var data = [
{
"Id": 1074,
"AMTAssetNumber": "5070",
"Carrier": "Verizon",
"CarrierSiteNumber": "62002",
"InfinigyJobNumber": "317-403"

},
{
"Id": 1075,
"AMTAssetNumber": "5070",
"Carrier": "T-MOBILE",
"CarrierSiteNumber": "A2P0014A",
"InfinigyJobNumber": "317-400"

},
{
"Id": 1076,
"AMTAssetNumber": "5130",
"Carrier": "Verizon",
"CarrierSiteNumber": "62008",
"InfinigyJobNumber": "317-403"
}];
var crudUrl = "";
$scope.siteGridOptions = {
toolbar: [{ name: "create", text: "New Site" },
{ template: "<span class='k-button k-primary' ng-click='exportFilteredData($event)'> Export Filtered</span>" }
],
editable: {
mode: "popup",
confirmation: "Are you sure you want to delete this site?",
template: kendo.template($("#editSiteTemplate").html())
},

dataSource: {
data: data,
pageSize: 15,
error: function (e) {
logError(e.errorThrown);
},

schema: {
model: {
id: "Id",
fields: {
Id: { defaultValue: 0, editable: false },
AMTAssetNumber: { editable: false, nullable: true, type: 'number' },
Carrier: { validation: { required: true } },
CarrierSiteNumber: { validation: { required: true } },
InfinigyJobNumber: { validation: { required: true } }

}
}
},
},
edit: function (e) {
var mod = e.container.find("input[name=ModifiedBy]");
e.model.ModifiedBy = "test";
mod.val("test");
},
dataBound: function (e) {
// $scope.siteGrid.resize(true);
var grid = this;
var dataSource = this.dataSource;

// iterate the data items and apply row styles where necessary
var dataItems = e.sender.dataSource.view();
for (var j = 0; j < dataItems.length; j++) {
var completed = dataItems[j].get("Completed");
var onhold = dataItems[j].get("OnHold");
var waiting = dataItems[j].get("Waiting");
var state = dataItems[j].get("State");

var row = e.sender.tbody.find("[data-uid='" + dataItems[j].uid + "']");
var lockedrow = e.sender.lockedTable.find("[data-uid='" + dataItems[j].uid + "']");

if (completed != undefined) {
if (completed) {
row.addClass("completed");
}
}

else if (waiting != undefined) {
if (waiting) {
row.addClass("waiting");
}
}

else if (onhold != undefined) {
if (onhold.toUpperCase() === "YES") {
row.addClass("onhold");
}
}

if (state != undefined) {
if ($.inArray(state, common.northeast) > -1 || $.inArray(state, common.midwest) > -1) {
lockedrow.addClass("northeast");
}
}

if (state != undefined) {
if ($.inArray(state, common.southeast) > -1) {
lockedrow.addClass("southeast");
}
}

if (state != undefined) {
if ($.inArray(state, common.west) > -1 || $.inArray(state, common.westcoast) > -1) {
lockedrow.addClass("west");
}
}



}

},
autoBind: true,
height: 690,
scrollable: true,
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: [10, 25, 50, 100, 250, 500, 1000, 'all'],
buttonCount: 5
},
columns: [
{
command: [
{
name: 'edit',
text: ""
}
], width: "155px", locked: true
},
{
field: "AMTAssetNumber", title: "AMT Asset #", width: "120px", filterable: {
ui: function (element) {
element.kendoNumericTextBox({

spinners: false,
format: "#",
decimals: 0
});
}
}
},
{
field: "Carrier", title: "Carrier", filterable: { multi: true, search: true }, width: "120px"
},
{
field: "CarrierSiteNumber", title: "Carrier Site #", width: "120px"
},
{
field: "InfinigyJobNumber", title: "Infinigy Job #", filterable: { multi: true, search: true }, width: "120px"
}

]
};



$("#save").click(function (e) {
e.preventDefault();
localStorage["kendo-grid-options"] = kendo.stringify($scope.siteGrid.getOptions());
});

$("#load").click(function (e) {
e.preventDefault();
var options = localStorage["kendo-grid-options"];
if (options) {
$scope.siteGrid.setOptions(JSON.parse(options));
}
});


})
</script>


</body>
</html>

最佳答案

JSON.stringify 不保留函数引用。在重新创建 Grid 实例之前,您需要手动将这些恢复到 options 对象。恢复还应该包括 kendo.template() 调用,因为它也返回一个函数。

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

关于angular - Kendo Grid Persist State 破坏了可编辑的弹出窗口功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45473839/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com