In the following sample, if I make a change to the grid (remove a column), Save State, make another change (remove another column), Load State, the grid visual appears correctly.
The problem is, clicking the edit or New Site button no longer works. You can see the popup does not fully render. The popup works fine before loading status with get options.
Does anyone know how to resolve this?
Please see snippet here :http://dojo.telerik.com/@joe.gloeckner@rminsight.net/OHUSU
All Code:
<!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>