I have a editable grid which has a list view in it. List view is getting populated properly but when i when i select a listview item within editable grid, All the fields get updated except the listview items.
Below is the code:
(function ($) {
// UpdateAPI url
var UPDATEUSER_API_URL = '/api/UserManagement/PostUpdateUser';
// Create API url
var CREATEUSER_API_URL = '/api/UserManagement/PostUpdateUser';
// Delete API url
var DELETEUSER_API_URL = '/api/UserManagement/DeleteUser';
// Search API url
var GETUSER_API_URL = '/api/UserManagement/GetUser';
// Search By Id API url
var GETUSERBYID_API_URL = '/api/UserManagement/GetUserById';
// Get Role url
var GETROLE_API_URL = '/api/RoleManagement/GetRole';
var isCreating = false;
$(function () {
userSource =
new kendo.data.DataSource({
transport: {
read: {
url: GETUSER_API_URL,
dataType: "json"
},
update: {
url: CREATEUSER_API_URL,
contentType: 'application/json;charset=utf-8',
dataType: "json",
type: "POST"
},
destroy: {
url: DELETEUSER_API_URL,
contentType: 'application/json;charset=utf-8',
type: "DELETE",
dataType: "json",
},
create: {
url: CREATEUSER_API_URL,
contentType: 'application/json;charset=utf-8',
type: "POST"
},
parameterMap: function (options, operation) {
//console.log(operation);
if (operation == "destroy" && options.models.length > 0) {
return JSON.stringify(options.models[0]);
}
else if (operation !== "read" && options.models.length > 0) {
return JSON.stringify(options.models[0]);
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "UserProfileId",
fields: {
UserProfileId: { editable: false, nullable: true },
Password: {
type: "string", validation: {
required: true,
password: function (input) {
input.attr("data-password-msg", "Password cannot be greater than 50 characters!");
return input.val().length <= 50;
}
},
},
Username: {
validation: {
required: true,
username: function (input) {
input.attr("data-username-msg", "Username cannot be greater than 50 characters!");
return input.val().length <= 50;
}
},
},
FirstName: {
type: "string", validation: {
required: true,
firstname: function (input) {
input.attr("data-firstname-msg", "Firstname cannot be greater than 50 characters!");
return input.val().length <= 50;
}
},
},
LastName: {
type: "string", validation: {
required: true,
lastname: function (input) {
input.attr("data-lastname-msg", "Lastname cannot be greater than 50 characters!");
return input.val().length <= 50;
}
},
},
EmailAddress: { nullable: false, validation: { required: true } },
IsSuperUser: { type: "boolean", validation: { required: false } },
RoleName: { validation: { required: true } },
}
}
}
});
$("#grid").kendoGrid({
dataSource: userSource,
pageable: true,
height: 400,
toolbar: ["create"],
columns: [
"Username",
{ field: "Password", title: "Password", width: ".1px" },
"FirstName",
"LastName",
{ field: "EmailAddress", title: "Email Address", width: "170px" },
{ field: "IsSuperUser", title: "SuperUser", width: "90px" },
{
field: "RoleName", title: "Roles", width: "150px", editor: role_editor
},
{ command: ["edit", "destroy"], title: " ", width: "210px" }],
editable: "popup",
edit: function (e) {
debugger;
if (isCreating) {
var window = e.container.data("kendoWindow");
window.title("Add new record");
e.container.find("a.k-grid-update").html('<span class="k-icon k-update"></span>Create');
//reset the flag
isCreating = false;
}
else {
//e.container.find("k-input k-textbox").html('<input type="text" class="k-input k-textbox" name="Username" disabled="true"/>');
//e.model.container.find("k-input k-textbox").html('<input type="text" class="k-input k-textbox" name="Username" disabled="true"/>');
document.getElementsByName("Username")[0].disabled = "true";
}
}
});
$(".k-grid-add").on("click", function (e) {
debugger;
isCreating = true;
document.getElementsByName("Username")[0].disabled = "false";
});
});
function role_editor(container, options) {
$(function () {
$("div[data-container-for=" + options.field + "]").kendoListView({
dataSource: {
type: "json",
transport:
{
read: GETROLE_API_URL,
}
},
pageable: true,
selectable: "multiple",
navigatable: true,
editable: true,
template: "<li>${RoleName}</li>",
editTemplate: '<li><input type="text" data-bind="value:RoleName" name="RoleName" required="required"/></li>'
});
});
}
})(jQuery);
Function written for binding the listview within the grid is marked in bold. While updating/creating any record, i am not able to insert/update the listview items in the database.
Below is the code:
(function ($) {
// UpdateAPI url
var UPDATEUSER_API_URL = '/api/UserManagement/PostUpdateUser';
// Create API url
var CREATEUSER_API_URL = '/api/UserManagement/PostUpdateUser';
// Delete API url
var DELETEUSER_API_URL = '/api/UserManagement/DeleteUser';
// Search API url
var GETUSER_API_URL = '/api/UserManagement/GetUser';
// Search By Id API url
var GETUSERBYID_API_URL = '/api/UserManagement/GetUserById';
// Get Role url
var GETROLE_API_URL = '/api/RoleManagement/GetRole';
var isCreating = false;
$(function () {
userSource =
new kendo.data.DataSource({
transport: {
read: {
url: GETUSER_API_URL,
dataType: "json"
},
update: {
url: CREATEUSER_API_URL,
contentType: 'application/json;charset=utf-8',
dataType: "json",
type: "POST"
},
destroy: {
url: DELETEUSER_API_URL,
contentType: 'application/json;charset=utf-8',
type: "DELETE",
dataType: "json",
},
create: {
url: CREATEUSER_API_URL,
contentType: 'application/json;charset=utf-8',
type: "POST"
},
parameterMap: function (options, operation) {
//console.log(operation);
if (operation == "destroy" && options.models.length > 0) {
return JSON.stringify(options.models[0]);
}
else if (operation !== "read" && options.models.length > 0) {
return JSON.stringify(options.models[0]);
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "UserProfileId",
fields: {
UserProfileId: { editable: false, nullable: true },
Password: {
type: "string", validation: {
required: true,
password: function (input) {
input.attr("data-password-msg", "Password cannot be greater than 50 characters!");
return input.val().length <= 50;
}
},
},
Username: {
validation: {
required: true,
username: function (input) {
input.attr("data-username-msg", "Username cannot be greater than 50 characters!");
return input.val().length <= 50;
}
},
},
FirstName: {
type: "string", validation: {
required: true,
firstname: function (input) {
input.attr("data-firstname-msg", "Firstname cannot be greater than 50 characters!");
return input.val().length <= 50;
}
},
},
LastName: {
type: "string", validation: {
required: true,
lastname: function (input) {
input.attr("data-lastname-msg", "Lastname cannot be greater than 50 characters!");
return input.val().length <= 50;
}
},
},
EmailAddress: { nullable: false, validation: { required: true } },
IsSuperUser: { type: "boolean", validation: { required: false } },
RoleName: { validation: { required: true } },
}
}
}
});
$("#grid").kendoGrid({
dataSource: userSource,
pageable: true,
height: 400,
toolbar: ["create"],
columns: [
"Username",
{ field: "Password", title: "Password", width: ".1px" },
"FirstName",
"LastName",
{ field: "EmailAddress", title: "Email Address", width: "170px" },
{ field: "IsSuperUser", title: "SuperUser", width: "90px" },
{
field: "RoleName", title: "Roles", width: "150px", editor: role_editor
},
{ command: ["edit", "destroy"], title: " ", width: "210px" }],
editable: "popup",
edit: function (e) {
debugger;
if (isCreating) {
var window = e.container.data("kendoWindow");
window.title("Add new record");
e.container.find("a.k-grid-update").html('<span class="k-icon k-update"></span>Create');
//reset the flag
isCreating = false;
}
else {
//e.container.find("k-input k-textbox").html('<input type="text" class="k-input k-textbox" name="Username" disabled="true"/>');
//e.model.container.find("k-input k-textbox").html('<input type="text" class="k-input k-textbox" name="Username" disabled="true"/>');
document.getElementsByName("Username")[0].disabled = "true";
}
}
});
$(".k-grid-add").on("click", function (e) {
debugger;
isCreating = true;
document.getElementsByName("Username")[0].disabled = "false";
});
});
function role_editor(container, options) {
$(function () {
$("div[data-container-for=" + options.field + "]").kendoListView({
dataSource: {
type: "json",
transport:
{
read: GETROLE_API_URL,
}
},
pageable: true,
selectable: "multiple",
navigatable: true,
editable: true,
template: "<li>${RoleName}</li>",
editTemplate: '<li><input type="text" data-bind="value:RoleName" name="RoleName" required="required"/></li>'
});
});
}
})(jQuery);
Function written for binding the listview within the grid is marked in bold. While updating/creating any record, i am not able to insert/update the listview items in the database.