Kendo UI :Web development framework- Part 2

The MVVM model is most popular now a days . Here we will see with the sample example the use of MVVM in MVC.

To start with  MVVM  we need to first create a View Model, A view model is an observable object. This object has properties and methods. Each property will be bound to something in the HTML. In MVVM, this binding is two way, meaning that if the binding changes on the UI, the model changes, and vice versa.

Let us take a sample example where we will take display a grid and a drop down box, firstly i will create a HTML controls for grid and drop-down. And grid will be using a Template column.

   

${ UserName }
${ GroupName }





<div id="userGrid" data-role="grid" data-bind="source: User.UsersOf"
data-row-template="rowTemplate" data-columns='["User", "Group", "Remove" ]' data-pageable='{"pageSize":10}'>








<select id="dduser" data-role="dropdownlist" data-value-field="Id" data-text-field="Name"
data-bind="source: User.AllowableUsers, value: selectedUser, events: { change : userSelectChange }" />

<select id="ddgroup" data-role="dropdownlist" data-value-field="Id" data-text-field="Name"
data-bind="source: User.AllowableGroups, value: selectedGroup, events: { change : groupSelectChange }" />





Add New Group



Add New Type


Here we have created a UserViewModel that is binded to the div id :UserTab, This example also shows how to add and delete user using MVVM pattern.

   
$(document).ready(function () {
var UserViewModel = kendo.observable({
UserSource: new kendo.data.DataSource({
transport: {
read: {
url: document.URL + "/GetUser/",
dataType: "json",
type: "post",
complete: function (e) {
if (UserViewModel.UserSource == null) return;
UserViewModel.set("User", UserViewModel.UserSource.at(0));
},
data: { Id: 0, TypeId: 0 }
},
update: {
url: document.URL + "/AddUserToUser/",
dataType: "json",
type: "post",
complete: function (e) { }
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models)
return { models: kendo.stringify(options.models) };
return options;
}
},
schema: {
model: { id: "Id" }
}
}),
User: null,
selectedGroup: null,
selectedUser: null,
Id: 0,
TypeId: 0,
btnSaveIsEnabled: false,
addUserText: 'Add',
groupSelectChange: function (e) { },
userSelectChange: function (e) { },
load: function (e) {
this.set("Id", e.Id);
this.set("TypeId", e.TypeId);
this.UserSource.read({ Id: e.Id, TypeId: e.TypeId });
$("#dduser").val("").data("kendoDropDownList").text("--Choose User--");
$("#ddgroup").val("").data("kendoDropDownList").text("--Choose Group--");
},
addUser: function (e) {
if (this.get("selectedUser") == null || this.get("selectedGroup") == null) {
alert("Please select User and Group");
return;
}
if (IsUserExist(this.get("selectedUser").Id, this.get("selectedGroup").Id)) {
alert("User already exist");
return;
}
var Id = this.get("Id");
var TypeId = this.get("TypeId");
$.post("/AddUserToUser", { Id: this.get("Id"), groupId: this.get("selectedGroup").Id, userId: this.get("selectedUser").Id },
function (data) {
if (data) {
UserViewModel.UserSource.read({ Id: Id, TypeId: TypeId });
aler("User/Group Added");
}
else
growlSad("User not Added");
});
},
removeUser: function (e) {
if (confirm("Are you sure you want to delete this user from group?")) {
var Id = this.get("Id");
var TypeId = this.get("TypeId");
$.post("/DeleteUser", { UserId: e.data.UserId },
function (data) {
UserViewModel.UserSource.read({ Id: Id, TypeId: TypeId });
});
}
}
});
kendo.bind($("#UserTab"), UserViewModel);
$(document).bind(Events.OnClicked, function (event, args) {
UserViewModel.load({ Id: args.Selected.Id, TypeId: args.Selected.TypeId });
UserViewModel.set("btnSaveIsEnabled", args.Selected.IsActive);
});
$(document).bind(window.Events.OnUpdated, function (e, args) {
ResetFormUser();
});
function IsUserExist(userId, groupId) {
var gridDataSource = UserViewModel.UserSource._data[0].UsersOf;
for (var i = 0; i < gridDataSource.length; i++) {
if (userId == gridDataSource[i].UserId && groupId == gridDataSource[i].GroupId)
return true;
}
return false;
}
function ResetFormUser() {
UserViewModel.load({ Id: 0, TypeId: 0 });
UserViewModel.set("btnSaveIsEnabled", false);
}
});

Happy Coding 🙂 

Published by Nirbhay

Technology Geek,Blogger,Reviewer

2 thoughts on “Kendo UI :Web development framework- Part 2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: