Drew Auman
Top achievements
Rank 1
Rank 1
Drew Auman
asked on 12 Apr 2013, 07:56 PM
I am running Chrome version 26.0.1410.60M. In this version of my browser, from within the grid I cannot seem to modify and change the check boxes. When I click on the true or false within grid, it does change the OptOut field from true or false to a checkbox. But then when I try to update the checkbox, the grid doesn't let me, and it just toggles back to True or false. Here is the HTML from the page. Is there something I'm doing wrong on the page, or is this an issue with the kendo libraries?
Attached is the cshtml file that generated the code, and the final HTML.
Thanks!
File1:
@model Pipeline.Web.Models.EmailPreferencesViewModel@{
ViewBag.Title = "title";
// Layout = "About.cshtml";
}<h2>title</h2>
<script>
$(document).ready(function() {
// window.emailTemplateGrid = @Html.Raw(Json.Encode(Model.emailTemplateSelectionsViewModel)); var dataSource = new kendo.data.DataSource({
data: @Html.Raw(Json.Encode(Model.emailTemplateSelectionsViewModel)),
schema: {
model: {
id: "ID",
fields: {
ID: { type: "number" },
NotificationName: { type: "string" },
Description: { type: "string" },
OptOut: { type: "boolean",editable:true }
}
}
},
pageSize: 20
}); //var dataSource = new kendo.data.DataSource({
// data: [
// { ID:1,NotificationName:"test1",Description: "Test Desc",OptOut:true },
// { ID:2,NotificationName:"test2",Description: "Test Desc2",OptOut: false}
// ]
// ,
// schema: {
// model: {
// id:"ID",
// fields: {
// ID: { type: "number" },
// NotificationName: { type: "string" },
// Description: { type: "string" },
// OptOut: { type: "boolean" }
// }
// }
// },
// pageSize: 20
//}); console.log("Client Contact Grid Data: " + JSON.stringify(dataSource, null, 4));
var grid = $("#emailTemplateGrid").kendoGrid({
dataSource:dataSource,
pageable:true,
columns: [
{ title: "ID", field: "ID", hidden: true },
{ title: "Notification Name", field: "NotificationName" },
{ title: "Description", field: "Description" },
{ field: "OptOut", title: "OptOut", width:210}],
editable: true
});
//{ command: ["edit", "destroy"], title: " ", width: "172px" } $("#btnSave").click(function() {
// var notes = $("#ATPNotes").data("kendoEditor").value();
var emailTemplate = [];
$.each(dataSource._data, function (index, value) {
var emailTemplateSelectionsViewModel = { };
emailTemplateSelectionsViewModel.ID = value.ID;
emailTemplateSelectionsViewModel.NotificationName = value.NotificationName;
emailTemplateSelectionsViewModel.Description = value.Description;
emailTemplateSelectionsViewModel.OptOut = value.OptOut;
emailTemplate.push(emailTemplateSelectionsViewModel);
console.log("emailTemplateSelectionsViewModel: " + JSON.stringify(emailTemplateSelectionsViewModel, null, 4));
});
// var searchTeam = [];
// $.each(window.searchTeamGridData, function(index, value) {
// searchTeam.push(value.ID);
// });
var DTO = { 'emailTemplateSelectionsViewModels': emailTemplate }; $.ajax({
type: 'POST',
url: "@Url.Action("EmailPreferencesUpdate", "DataService")",
contentType: 'application/json;charset=utf-8',
data: JSON.stringify(DTO),
dataType: 'json'
// success: function(data) {
// $("#ATPhoneCall").data("kendoWindow").close();
// location.reload(true);
// }
});
});
});
</script>
<div id="emailTemplateGrid"></div>
<BR /><strong>Regional Approvers:</strong><br/>
<div id="searchTeam"><!-- Filled from jquery load call --></div>
<br/> <input id="btnSave" type="button" value="Save" />
Final HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>title - Pipeline</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/Main.css" rel="stylesheet"/> <link href="/Content/Kendo/kendo.common.css" rel="stylesheet"/>
<link href="/Content/Kendo/kendo.default.css" rel="stylesheet"/>
<script src="/Scripts/Lib/jquery-1.9.1.js"></script> <script src="/Scripts/Kendo/kendo.web-2013.1.319.js"></script>
<script src="/Scripts/Kendo/kendo.aspnetmvc-2013.1.319.js"></script> <script src="/Scripts/Lib/modernizr-2.5.3.js"></script> <script src="/Scripts/pipeline.dataservice.js"></script> <script src="/Scripts/pipeline.utilities.js"></script> </head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><a href="/">your logo here</a></p>
</div>
<div class="float-right">
<section id="login">
Hello, <span class="username">CTNET\adm_kkess</span>!
</section>
<nav>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Admin">Admin</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<h2>title</h2>
<script>
$(document).ready(function() {
// window.emailTemplateGrid = [{"ID":3,"NotificationName":"1OnListToGet","Description":"Another to send","OptOut":false},{"ID":4,"NotificationName":"2LOETestEveryoneCanOptOut","Description":"LOE Test Email Avail to everyone and can opt out","OptOut":true}]; var dataSource = new kendo.data.DataSource({
data: [{"ID":3,"NotificationName":"1OnListToGet","Description":"Another to send","OptOut":false},{"ID":4,"NotificationName":"2LOETestEveryoneCanOptOut","Description":"LOE Test Email Avail to everyone and can opt out","OptOut":true}],
schema: {
model: {
id: "ID",
fields: {
ID: { type: "number" },
NotificationName: { type: "string" },
Description: { type: "string" },
OptOut: { type: "boolean",editable:true }
}
}
},
pageSize: 20
}); //var dataSource = new kendo.data.DataSource({
// data: [
// { ID:1,NotificationName:"test1",Description: "Test Desc",OptOut:true },
// { ID:2,NotificationName:"test2",Description: "Test Desc2",OptOut: false}
// ]
// ,
// schema: {
// model: {
// id:"ID",
// fields: {
// ID: { type: "number" },
// NotificationName: { type: "string" },
// Description: { type: "string" },
// OptOut: { type: "boolean" }
// }
// }
// },
// pageSize: 20
//}); console.log("Client Contact Grid Data: " + JSON.stringify(dataSource, null, 4));
var grid = $("#emailTemplateGrid").kendoGrid({
dataSource:dataSource,
pageable:true,
columns: [
{ title: "ID", field: "ID", hidden: true },
{ title: "Notification Name", field: "NotificationName" },
{ title: "Description", field: "Description" },
{ field: "OptOut", title: "OptOut", width:210}],
editable: true
});
//{ command: ["edit", "destroy"], title: " ", width: "172px" } $("#btnSave").click(function() {
// var notes = $("#ATPNotes").data("kendoEditor").value();
var emailTemplate = [];
$.each(dataSource._data, function (index, value) {
var emailTemplateSelectionsViewModel = { };
emailTemplateSelectionsViewModel.ID = value.ID;
emailTemplateSelectionsViewModel.NotificationName = value.NotificationName;
emailTemplateSelectionsViewModel.Description = value.Description;
emailTemplateSelectionsViewModel.OptOut = value.OptOut;
emailTemplate.push(emailTemplateSelectionsViewModel);
console.log("emailTemplateSelectionsViewModel: " + JSON.stringify(emailTemplateSelectionsViewModel, null, 4));
});
// var searchTeam = [];
// $.each(window.searchTeamGridData, function(index, value) {
// searchTeam.push(value.ID);
// });
var DTO = { 'emailTemplateSelectionsViewModels': emailTemplate }; $.ajax({
type: 'POST',
url: "/DataService/EmailPreferencesUpdate",
contentType: 'application/json;charset=utf-8',
data: JSON.stringify(DTO),
dataType: 'json'
// success: function(data) {
// $("#ATPhoneCall").data("kendoWindow").close();
// location.reload(true);
// }
});
});
});
</script>
<div id="emailTemplateGrid"></div>
<BR /><strong>Regional Approvers:</strong><br/>
<div id="searchTeam"><!-- Filled from jquery load call --></div>
<br/> <input id="btnSave" type="button" value="Save" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2013 - My ASP.NET MVC Application</p>
</div>
</div>
</footer> </body>
</html>
Attached is the cshtml file that generated the code, and the final HTML.
Thanks!
File1:
@model Pipeline.Web.Models.EmailPreferencesViewModel@{
ViewBag.Title = "title";
// Layout = "About.cshtml";
}<h2>title</h2>
<script>
$(document).ready(function() {
// window.emailTemplateGrid = @Html.Raw(Json.Encode(Model.emailTemplateSelectionsViewModel)); var dataSource = new kendo.data.DataSource({
data: @Html.Raw(Json.Encode(Model.emailTemplateSelectionsViewModel)),
schema: {
model: {
id: "ID",
fields: {
ID: { type: "number" },
NotificationName: { type: "string" },
Description: { type: "string" },
OptOut: { type: "boolean",editable:true }
}
}
},
pageSize: 20
}); //var dataSource = new kendo.data.DataSource({
// data: [
// { ID:1,NotificationName:"test1",Description: "Test Desc",OptOut:true },
// { ID:2,NotificationName:"test2",Description: "Test Desc2",OptOut: false}
// ]
// ,
// schema: {
// model: {
// id:"ID",
// fields: {
// ID: { type: "number" },
// NotificationName: { type: "string" },
// Description: { type: "string" },
// OptOut: { type: "boolean" }
// }
// }
// },
// pageSize: 20
//}); console.log("Client Contact Grid Data: " + JSON.stringify(dataSource, null, 4));
var grid = $("#emailTemplateGrid").kendoGrid({
dataSource:dataSource,
pageable:true,
columns: [
{ title: "ID", field: "ID", hidden: true },
{ title: "Notification Name", field: "NotificationName" },
{ title: "Description", field: "Description" },
{ field: "OptOut", title: "OptOut", width:210}],
editable: true
});
//{ command: ["edit", "destroy"], title: " ", width: "172px" } $("#btnSave").click(function() {
// var notes = $("#ATPNotes").data("kendoEditor").value();
var emailTemplate = [];
$.each(dataSource._data, function (index, value) {
var emailTemplateSelectionsViewModel = { };
emailTemplateSelectionsViewModel.ID = value.ID;
emailTemplateSelectionsViewModel.NotificationName = value.NotificationName;
emailTemplateSelectionsViewModel.Description = value.Description;
emailTemplateSelectionsViewModel.OptOut = value.OptOut;
emailTemplate.push(emailTemplateSelectionsViewModel);
console.log("emailTemplateSelectionsViewModel: " + JSON.stringify(emailTemplateSelectionsViewModel, null, 4));
});
// var searchTeam = [];
// $.each(window.searchTeamGridData, function(index, value) {
// searchTeam.push(value.ID);
// });
var DTO = { 'emailTemplateSelectionsViewModels': emailTemplate }; $.ajax({
type: 'POST',
url: "@Url.Action("EmailPreferencesUpdate", "DataService")",
contentType: 'application/json;charset=utf-8',
data: JSON.stringify(DTO),
dataType: 'json'
// success: function(data) {
// $("#ATPhoneCall").data("kendoWindow").close();
// location.reload(true);
// }
});
});
});
</script>
<div id="emailTemplateGrid"></div>
<BR /><strong>Regional Approvers:</strong><br/>
<div id="searchTeam"><!-- Filled from jquery load call --></div>
<br/> <input id="btnSave" type="button" value="Save" />
Final HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>title - Pipeline</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/Main.css" rel="stylesheet"/> <link href="/Content/Kendo/kendo.common.css" rel="stylesheet"/>
<link href="/Content/Kendo/kendo.default.css" rel="stylesheet"/>
<script src="/Scripts/Lib/jquery-1.9.1.js"></script> <script src="/Scripts/Kendo/kendo.web-2013.1.319.js"></script>
<script src="/Scripts/Kendo/kendo.aspnetmvc-2013.1.319.js"></script> <script src="/Scripts/Lib/modernizr-2.5.3.js"></script> <script src="/Scripts/pipeline.dataservice.js"></script> <script src="/Scripts/pipeline.utilities.js"></script> </head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><a href="/">your logo here</a></p>
</div>
<div class="float-right">
<section id="login">
Hello, <span class="username">CTNET\adm_kkess</span>!
</section>
<nav>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Admin">Admin</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<h2>title</h2>
<script>
$(document).ready(function() {
// window.emailTemplateGrid = [{"ID":3,"NotificationName":"1OnListToGet","Description":"Another to send","OptOut":false},{"ID":4,"NotificationName":"2LOETestEveryoneCanOptOut","Description":"LOE Test Email Avail to everyone and can opt out","OptOut":true}]; var dataSource = new kendo.data.DataSource({
data: [{"ID":3,"NotificationName":"1OnListToGet","Description":"Another to send","OptOut":false},{"ID":4,"NotificationName":"2LOETestEveryoneCanOptOut","Description":"LOE Test Email Avail to everyone and can opt out","OptOut":true}],
schema: {
model: {
id: "ID",
fields: {
ID: { type: "number" },
NotificationName: { type: "string" },
Description: { type: "string" },
OptOut: { type: "boolean",editable:true }
}
}
},
pageSize: 20
}); //var dataSource = new kendo.data.DataSource({
// data: [
// { ID:1,NotificationName:"test1",Description: "Test Desc",OptOut:true },
// { ID:2,NotificationName:"test2",Description: "Test Desc2",OptOut: false}
// ]
// ,
// schema: {
// model: {
// id:"ID",
// fields: {
// ID: { type: "number" },
// NotificationName: { type: "string" },
// Description: { type: "string" },
// OptOut: { type: "boolean" }
// }
// }
// },
// pageSize: 20
//}); console.log("Client Contact Grid Data: " + JSON.stringify(dataSource, null, 4));
var grid = $("#emailTemplateGrid").kendoGrid({
dataSource:dataSource,
pageable:true,
columns: [
{ title: "ID", field: "ID", hidden: true },
{ title: "Notification Name", field: "NotificationName" },
{ title: "Description", field: "Description" },
{ field: "OptOut", title: "OptOut", width:210}],
editable: true
});
//{ command: ["edit", "destroy"], title: " ", width: "172px" } $("#btnSave").click(function() {
// var notes = $("#ATPNotes").data("kendoEditor").value();
var emailTemplate = [];
$.each(dataSource._data, function (index, value) {
var emailTemplateSelectionsViewModel = { };
emailTemplateSelectionsViewModel.ID = value.ID;
emailTemplateSelectionsViewModel.NotificationName = value.NotificationName;
emailTemplateSelectionsViewModel.Description = value.Description;
emailTemplateSelectionsViewModel.OptOut = value.OptOut;
emailTemplate.push(emailTemplateSelectionsViewModel);
console.log("emailTemplateSelectionsViewModel: " + JSON.stringify(emailTemplateSelectionsViewModel, null, 4));
});
// var searchTeam = [];
// $.each(window.searchTeamGridData, function(index, value) {
// searchTeam.push(value.ID);
// });
var DTO = { 'emailTemplateSelectionsViewModels': emailTemplate }; $.ajax({
type: 'POST',
url: "/DataService/EmailPreferencesUpdate",
contentType: 'application/json;charset=utf-8',
data: JSON.stringify(DTO),
dataType: 'json'
// success: function(data) {
// $("#ATPhoneCall").data("kendoWindow").close();
// location.reload(true);
// }
});
});
});
</script>
<div id="emailTemplateGrid"></div>
<BR /><strong>Regional Approvers:</strong><br/>
<div id="searchTeam"><!-- Filled from jquery load call --></div>
<br/> <input id="btnSave" type="button" value="Save" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2013 - My ASP.NET MVC Application</p>
</div>
</div>
</footer> </body>
</html>
1 Answer, 1 is accepted
0
Hi Drew,
Vladimir Iliev
the Telerik team
This issue is related to the existing WebKit bug which will be fixed in next WebKit versions. Until then possible workaround is to enable the grid navigatable option. For convenience I updated the provided jsFiddle.
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!