MVC 5 Signal-R

Many times now a days we hear about Signal-R , so today i started going through what exactly it is. I read couple of Article on it and it seems to be very interesting topic and good technology to go with if we want to implement some application which require broadcasting or if we want to send any updates to Clients from server.

I remember years back when WCF was new in the market and one of my client wanted a Push mechanism to send updates to  client from server , where we used WCF nettcp Bindings for this.

Here the implementation that we did was when client get active it use to send the message to server and then we used to capture the details of client in dictionary. when any updates happen we used to send the updates to client.

So after reading this Signal-R and going through the Signal-R Chat application  it seems the things has become much simpler as no need to worry about Bindings and network level protocol every things a re handled by Signal-R .Net library .

Aslo good this about the is say if we want to broadcast something to all users who is visiting your website you just need to add 2 to 3 lines of code and you are done.

Following are the reference that i used to learn this.

Signal-R Tutorial

MVC5 and Signal-R

kendo-ui-cookbook

Name: Kendo UI Cookbook
Pages: 86
My Rating: ★★★★
Buy From :    packt  buy-from-tan

As Title “Kendo UI Cookbook” describes itself, this book is for those who have been working in kendo UI and are eager to learn more in depth concept and ease of use using Kendo control, this book helps in understanding from basics to advance level of How to do things in easiest way.
I liked the content that has been covered in this book and the author has explained. Below are my thought on the chapters that are covered in this book.
Chapter 1 this book has explained with the very basic example about uses of the syntax like #= # and others. It covers how we can render the Html Pages by filling the data using the given syntax. Focus of the chapter 1 on using templates, how to implement using MVVM and how bindings work. Also I like the way author has explained the Built-in validator [Pg no 11]

Chapter 2 has covered in depth for How to use Kendo Grid , implementing filters, binding with data source(local and Remote) [Pg no 15], Customizing the look and feel of the Grid, implementing shorting and filtering of data. Shorting and filtering of Grid are covered from [Pg no 16]

Chapter 3 covers my favorite element in Kendo UI Controls, which is Tree View, when I started working with Kendo couple of years ago, The first control was Tree View and the challenge that we faced was that the JavaScript tree view that was implement was very slow in performance as it took around 5 min to render and using kendo tree view we reduced the rendering to 2 millisecond. Also we implemented the drag and drop feature and check box selection and implementing icon.

In this chapter the Author has covered all the points that I have mentioned above and he has beautifully explained syntax and uses of the control.

Chapter 4 covers about the Kendo Editor using which you can create rich html content. This chapter explains how you can add/edit /update text creating bullets, inserting tables and images. Also this chapter has explained how to enable/disable/add/remove the tools when initializing the control.

Chapter 5 explains about the how you can utilize the power of the Panel Bar, it covers binding the Data Source objects, Customization and use of Ajax to load the panel content. Here we can see how panel Bar can work with multilevel hierarchical data [pg no 34].

Chapter 6 covers the very important topic of file upload, in the JavaScript world there are very fewer frameworks that provide the file upload with passing/ customizing the parameter before sending the file to be saved. The best part is author has beautifully explained the asynchronous behavior of the file upload controls and how we can modify the file uploads event, Also the how to upload multiple files at one go. The Uploader also supports the Drag and drop feature for files to upload [Pg no 41]

Chapter 7 covers the Popup window; this chapter also covers how we can set widow to modal and how we can customize the window.

Chapter 8 & 9 covers how we can use the Kendo UI in Mobile application development and how to use Widgets, these chapter details of Mobile Framework. Here you can learn about how to implement the touch, swipe, tap, and double tap hold features [Pg no 53], the widgets section covers ListView, ScrollView, ActionSheet, TabStrip, SplitView and Navbar. Author has beautifully explain the use of hierarchical list, use of HierrachicalDataSource and hierarchicalTemplate [pg no 60]

Chapter 10 & 11 These chapters will help the developer to learn the use of Charts and Advance charting using DataViz, how user can dynamically generate charts based on the remote data source, how you can change the theme of chart dynamically. The use of multi axis chart is explained at [pg no 70], we can make charts interactive by using the events provided by DataViz [Pg no 72], personally I like the way the Radial Gauge widget is explained at [pg no 77].

In many application if we are working on Warehouse management application, we need our application be capable to reading the barcode data, here author has explained the use of Kendo Barcode, kendoQRCode [Pg no 79-80]. The flow diagram [Pg 81] covers the good example explaining how we can create a flow chart and using kendo Diagram how we can create organization chart [pg no 82].Finally a good example on the Kendo Map using Geo jSON.

You can get the Book from : Kendo UI CookBook

Kendo UI: Using MVVM

What is MVVM?

Model View ViewModel (MVVM) is a design pattern which helps developers to separate the Model (the data) from the View (the UI). The ViewModel part of MVVM is responsible for exposing the data objects from the Model in such a way that those objects are easily consumed in the View.

MVVM Using Kendo

So let’s get right to it with a few simple examples to see how we can use MVVM pattern of Kendo.

First add a script references for jQuery and Kendo UI, here are some links for Microsoft’s and Telerik CDN’s for these scripts.

<!DOCTYPE html>
<html>
<head>
    <title>Kendo UI Web MVVM</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js">  
    </script>
    <script src="http://cdn.kendostatic.com/2012.2.710/js/
kendo.all.min.js"> </script>
</head>
<body></body>
</html>

Let’s create a simple form which will have some input text and button. And we will provide the binding (mapping) information, which will map our controls to our ViewModel. The beauty here is we will do this declaratively with without code

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>
   <script src="http://cdn.kendostatic.com/2012.2.710/js/ kendo.all.min.js"></script>
</head>
<body>
<div id="formContainer">
    <h1>Kendo MVVM Web View!</h1>
    <form id="myForm" action="">
      <label>First Name</label>
      <input type="text" data-bind="value: firstName" />
      <label>Last Name</label>
      <input type="text" data-bind="value: lastName" />
      <label>Email</label>
      <input type="text" data-bind="value: email"/>
      <label>Address</label>
      <input type="text" data-bind="value: address" />
      <label>City</label>
      <input type="text" data-bind="value: city" />
      <label>State</label>
      <input type="text" data-bind="value: state" />
      <label>Zip</label>
      <input type="text" data-bind="value: zip" />
      <label>Country</label>
      <input type="text" data-bind="value: country" />
      <label>Occupation</label>
      <select data-bind="source: occupations, value: occupation"></select>
       <input type="button" value="Reset"/>
    </form>
</div>
</body>
</html>

Now let’s create a View Model (JavaScript JSON object or class if you will) with some default values for our View (in this case our form) to bind to.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        var myViewModel = kendo.observable({
            firstName: "Nirbhay",
            lastName: "Anand",
            email: "nirbhay.anand@xyz.com",
            address: "xyz",
            city: "Pune",
            state: "Maharashtra",
            country: "India",
            zip:"411018",  
            occupations: ["Please Select", "Devloper", "QA", "Architect"],
            occupation: "Devloper"
        });

        kendo.bind($("#formContainer"), myViewModel);
    });
</script>

We will also add some methods to our View Model so that we can bind our button that are on our view too. Now let’s demonstrate binding our buttons to methods on our ViewModel, will demonstrate the reset button.

    • reset, will clear out our View

 

Here we have added data-bind attribute to Reset button.

<input type="button" value="Reset" data-bind="click: reset" />

And now we will update our ViewModel to add the reset function and its implementation

<script type="text/javascript" language="javascript">// <![CDATA[
$(document).ready(function () {

var myViewModel = kendo.observable({

firstName: "Nirbhay",

lastName: "Anand",

email: "nirbhay.anand@xyz.com",

address: "test",

city: "Pune",

state: "Maharashtra",

country: "India",

zip:"411018",

occupations: ["Please Select", "Devloper", "QA", "Architect"],

occupation: "Devloper",

reset: function (e) {

this.set("firstName", null);

this.set("lastName", null);

this.set("email", null);

this.set("address", null);

this.set("city", null);

this.set("state", null);

this.set("country", null);

this.set("zip", null);

this.set("occupation", "Please Select");

}

});

kendo.bind($("#formContainer"), myViewModel);

});

Hitting the [Reset] button will simply invoke the reset method on our ViewModel which clears out all our properties by setting them null values and again our View is automatically updated because it is bound to our View Model.

Summary

Here we saw how easily we can implement the MVVM framework using KendoUI with minimal amount of coding. Here to explain MVVM I have used textbox and list. There are other controls provided by kendo which can be bounded using View Model. For reference you can visit

http://demos.kendoui.com/web/mvvm/index.html

Kendo UI: Changing treeview default icon through css

How to change arrow icon to +,- in keno TreeView using css?
 
.k-treeview .k-minus {
                     background: url(“../../Content/Default/minus.png”)center center;
              }
              .k-treeview .k-plus{
                     background: url(“../../Content/Default/plus.png”)center center;
              }