Multi Select in Kendo Tree View

Here is some code for how can we select multiple items in kendo tree view and also can move selected items to other kendo tree view.

 (1) Multi-Select Kendo Tree View
Consider there are two kendo tree view on your page one contains source of some items and other will become your selection from source items to destination. Default, kendo tree view provides single selection of an item. To make it multi-select put following line of code to your select event of kendo tree view.

select: function(e){
    e.preventDefault();
}

This will make tree view multi-select and you can select more than one item from your kendo tree view.

(2) Shift Selected Items
Shift selected(multiple) items from source tree view to destination tree view.
put following line of code to any of the event like button, hyperlink etc.

var source = $('#source').data('kendoTreeView');

var selectedNode = source.select();

if (selectedNode.length > 0) {

    selectedNode.each(function () {

var dest = $("#dest").data("kendoTreeView");

dest.dataSource.add(source.dataItem($(this)));

source.remove($(this));

    });

}

First statement will be container for your tree view, and its select() method will pick whichever items you have selected in your source tree view to shift.
Simply, loop through your selected items using each function and for each item select destination tree view and add selected item to destination and remove selected item from your source.

That way you can select multiple items and move that multi-selected items from one kendo tree view to another tree view on any event.

Durandal JS Work Arounds

Here is some work around while working with durandal framework
(A) Call function from another file
Follow the steps to use script file
- put your file name in define tag of js file where you want to use it
- put alias for that file in same file as an argument in function
- now you can use that file using its alias in your application

(B) To provide width for message box
Follow the steps to provide width in message box
- assuming like you have your app declared over the top of the viewmodel in following way
var app = require('durandal/app');
- app.showMessage("message", 'Warning', [{ text: "Yes", value: "Yes" }, { text: "No", value: "No" },true, { style: { width: "400px" } })

(C) To pass multiple argument for modal dialog
- assuming like you have your app declared over the top of the viewmodel in following way
var app = require('durandal/app');
- call showDialog to open view in dialog
app.showDialog('dialog view', "param1Value").then(function () {});
app.showDialog('dialog view', {param1,"param1value", param2,"param2value"}).then(function () {});
- how to access value
for single value, it will be like 
vm.activate = function (param1) { //param1 will be placed anywhere it requires}
for multiple value,
vm.activate = function (params) { //params.param1 for first parameter value and same for other parameter like //params.param2 and it will replace with value for param1 & param2 with param1value & param2value respectively}

(D) message box with multiple buttons, 
- assuming like you have your app declared over the top of the viewmodel in following way
var app = require('durandal/app');
- put your code like below and it will show up with three buttons Button1, Button2 & Button3 and on clicking of any button respective code block will be called
app.showMessage("Message", 'MessageType', [{ text: "Button1", value: "Button1" }, { text: "Button2", value: "Button2" }, { text: "Button3", value: "Button3" }]).done(function (result) {
if (result === 'Button1') {//Code for button1}
else if (result === 'Button2') {//Code for button2}
else if (result === 'Button3') {//Code for button3}
});

(E) Compose view
- to show only view you can directly do like following way

- to load your view model with your view for some processing you can put like following way

In above case, it will load html and associate js file for that view.

(F) Working with view
- to work or bind any event for any control in view, you can bind it in "attached" event because in "activate" event it will be load your full view to "DOM" and in "attached" event you can play with it.

(G) Navigation process
- If you want to cancel navigation or need to process some logic while user navigate away from existing location you can put your logic to "canDeactivate" event.
- In this event, you can process your logic and based on that you can cancel navigation for user

Working with Durandal

Here is some links for Durandal framework.
(A) Durandal: Durandal is small JavaScript framework designed to make building Single Page Applications (SPAs) simple and elegant. 

(1) Durandal

(2) Docs | Durandal

(3) Docs - Introduction | Durandal

(4) Docs - Durandal's Edge | Durandal

(5) Durandal Get Started

(6) Docs - Manual Setup | Manual Setup

(7) Hello Workd | Durandal Sample

(8) Durandal with ASP.NET MVC Conventions

(9) Building a SPA with Durandal, Knockout and Breeze

(10) Rich Data Management in JavaScript

(B) Require JS: RequireJS is a JavaScript file and module loader. 
(1) Require JS

(2) Why AMD?

(3) WHY WEB MODULES?

(C) AMD: The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.
(1) AMD & AMD1

(2) AMD Tests

(3) AMD Implement

Bind Simple Grid in AngularJS

Here is some line of code which demonstrates how can we bind data in AngularJS using grid.
(A) HTML Code: Required references for scripts and stylesheet for AngularJS are added

(B) Script code : Put your following code into main.js file


Above code for binding grid uses "ng-grid" directive used in AngularJS. So, that's it for the binding simple grid in AngularJS. 

Working with AngularJS with Get/Post calls

Here is some code which will show how can we use get/post calls when working with AngularJS. For these code i assume that you are aware of some basic knowledge of AngularJS code and syntaxes. Also, for this examples i used WCF service as data source which returns expected results as i want for my use so you can change code or source of service as per your need.

(1) Get With Single Value : This function returns single string value.
HTML :  

AngularJS : 
var sample = function ($scope, $http) {
        $http({
            url: '/MyService.svc/DoWorkWithString'
        }).success(function (data) {
            $scope.stringResult = data.DoWorkWithStringResult;
        });
    };

(2) Get With List of values : This function returns list of Name & Count which are processed at UI and displayed to view.
HTML : 

AngularJS : 
var ListController = function($scope, $http) {
        var resultPromise = $http.get("MyService.svc/ListItems");
        resultPromise.success(function(data) {
            $scope.ListItems = data.ListItemsResult;
        });
    };

For the post operation, both function simply returns string value which could be any success/error message that we can pass to UI after completion of any
operation on posting.
(3) Post with single parameter : posts one valueHTML : 




Angular JS :
function FrmController($scope, $http) {
$scope.errors = [];
$scope.msgs = [];
$scope.Click = function () {
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$http({ method: 'POST', url: 'MyService.svc/ListTest', data: JSON.stringify($scope.idTest) }).success(function (data) {
                if (data != '') {
                    $scope.msgs.push(data);
                } else {
                    $scope.errors.push(data);
                }
            });
};

(4) Post with two parameter
HTML : 

Angular JS :
function FrmController($scope, $http) {
$scope.errors = [];
$scope.msgs = [];
$scope.Click = function () {
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$http({ method: 'POST', url: 'MyService.svc/ListTestTwo', data: JSON.stringify({"param1":"value1","param2":"value2"}) }).success (function (data) {
                if (data != '') {
                    $scope.msgs.push(data);
                } else {
                    $scope.errors.push(data);
                }
            });
};

So, That's it for AngularJS with Get/Post calls.

Error : Operation 'Operation' of contract 'Contract' specifies multiple request body parameters to be serialized without any wrapper elements.

During working with WCF Service, multiple scenarios were there for me. I completed POST scenario with one argument which works fine for me. But, POST scenario with more than one argument leads me to following error 

"Operation 'Operation' of contract 'Contract'
specifies multiple request body parameters to be serialized without any wrapper
elements. At most one body parameter can be serialized without wrapper elements. Either remove the extra body parameters or set the BodyStyle property on the WebGetAttribute/WebInvokeAttribute to Wrapped."

after some googling i got to know, "WCF doesn't support more than one parameter with bare body, if you need pass several parameters in one post method operation, then we need set the BodyStyle to Wrapped."

I added BodyStyle attribute to my contract to Wrapped help me out to working condition for my method.
Following are some links which i find useful for me for this error.
(1) Why cant I use two arguments in a WCF REST POST method?

(2) WCF Service Proxy throws exception when more than one parameter is used in [OperationContract] method

(3) WebInvokeAttribute.BodyStyle Property

(4) WebMessageBodyStyle Enumeration

Error : Cannot have two operations in the same contract with the same name.

Working with WCF Service implementation i came across error "Cannot have two operations in the same contract with the same name.". Following is some links that will demonstrate what is the reason behind this.

(1) Function Overloading in WCF

(2) Cannot have two operations in the same contract with the same name

(3) 2 methods with the same name

Simple WCF Application Call From Client End

Today, i am going to create simple WCF Web Service and consume same web service from client side.
(A) Steps to create new WCF Service
(1) Right Click on your solution --> Add --> New Project --> Select ASP.NET Web Application --> Give appropriate name like "REST"
(2) Above step will create new Web Application, you can remove master page and other pages included from newly created project
(3) Right Click on newly created project --> Add --> New Item --> Select "WCF Service" --> Give appropriate name like "MyService"
(4) Above step will add an interface named "IMyService" already implemented and one service with extension "MyService.svc"
(5) Remove existing code implemented in interface as well as in service.
(6) Add following line of code in interface
[OperationContract]
[WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
string DoWorkWithString();
- This is simple method we have declare which will return string on execute.
- WebInvoke requires "System.ServiceModel.Web" name space to be added as reference in your project
(7) Implement above method with following code in MyService.cs
public string DoWorkWithString()
{
    return "This is one test";
}

(8) After completion of above code, create virtual directory named "REST" and bind it with above project.
(9) To run with existing code from client end, you need to change serviceModel tag with following line of code in your Web.Config file. To do that, replace following line of code of serviceModel with your Web.Config tag.

(B) Steps to call WCF Service from client end
Now, you are done with your simple service implementation, you can now call above service from client end using following line of code to your html and it will prompt "This is one test".
$.ajax({
    url: 'http://localhost/REST/MyService.svc/DoWorkWithString',
    dataType: 'json',
    cache: false,
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    data: {},
    error: function (XMLHttpRequest, textStatus, errorThrown) {
     alert('Error occurred during operation');
    },
    success: function (data1) {
        alert(data1.DoWorkWithStringResult);
    }
});

(C) You can also following navigate to following links to do same.

(1) An Introduction to WCF

(2) Four Steps to Create First WCF Service For Beginners

(3) Consuming WCF / ASMX / REST service using JQuery
       

Working with AngularJS

Here is some link which will introduces what is AngularJS, Also, there are some more link which describes basic functions used with AngularJS.

(1) AngularJS — Superheroic JavaScript MVW Framework

(2) What Is Angular?

(3) AngularJS Introduction

(5) AngularJS: Tutorial: -2 - Angular Templates

(4) W3School Angular JS 
AngularJS Tutorial 
AngularJS Introduction 
AngularJS Expressions - 
AngularJS Directives - 
AngularJS Controllers 
AngularJS Filters
AngularJS HTML DOM 
AngularJS Events 
AngularJS Modules 
AngularJS Application 

(7) Angular JS: API Reference

Error : Service data not get refresh in IE8 from Client Side

I face problem of Data not refresh from client side when we are working with IE. I found this problem while i am working with IE8 and above.

Problem is like, in my MVC Single Page Application, when we are fetching any data from client side for first time it will get data perfectly but subsequent call for same data or some back and forth to some other location give me previous unchanged data which are cached. But, after a bit of googling following line of code works for me and resolved my problem.

This line of code i put in "_layout.cshtml" header section and it works for me and then after it gives me refreshed data view.

The above line of code works fine for me and resolved my problem.

Error : The 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine.

Here i found another error generated over working with importing excel file. So, my idea behind importing an excel file is simple shown below.

Code to import excel file is shown below.
excelConnectionString = @"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + fileLocation + ";Extended Properties='Excel 12.0;HDR=YES';";
DataTable dt = new DataTable();
OleDbConnection excelConnection1 = new OleDbConnection(excelConnectionString);
string query = string.Format("Select * from [{0}]", excelSheets[0]);
using (OleDbDataAdapter dataAdapter = new OleDbDataAdapter(query, excelConnection1))
{
        dataAdapter.Fill(ds);
}

but, doing this stuff i found error "The 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine."


Googling around this error help me out by two cases. For the solution, i found following two links useful.
(1) 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine.

(2) 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine error

So, that's it for this error.

Error : 405 Method Not Allowed for PUT

Recently i came across with a problem where PUT is not working for me and throwing error of "405 Method Not Allowed for PUT".

Following line of code i found working for me.
- Open your web.config file
- Go To "system.webServer" Tag
- Add runAllManagedModulesForAllRequests="true" in modules clause
- Put remove name="WebDAVModule" between modules tag
- After adding this lines, your config will look like following..

This change works for me. Also, There are some useful links for this as well shown below.
(1) 405 method not allowed web api

(2) Web API on IIS 8.0 – 405 Method Not Allowed for PUT

(3) Web API Put Request generates an Http 405 Method Not Allowed error
                      

TFS Options in VS2012

Here is some tips regarding known TFS options while you are working with VS2012.
(1) Go Online : for VS2010 if you are working offline you will find an icon of Go Online on Solution Explorer, but for VS2012 you will find this option under:
File --> Source Control --> Go Online

(2) Source Control Explorer: for Source Control Explorer in VS2010 you found this option under Team Explorer --> Source Control. For VS2012, this option found under Team Explorer --> Home --> Source Control Explorer

(3) Following menu items are independent items in VS2010 context menu
- Get Specific Version
- View Pending Changes
- Shelve Pending Changes
- Undo Pending Changes
- View History
- Annotate
But, in case of VS2012 you will find all this options under
Context Menu of Solution Explorer on Any Item --> Source Control

(4) Disconnect TFS
VS2010: In this case, you will find this option under Team Explorer to disconnect from TFS as well as from Top Menu --> Team --> Disconnect To Team Foundation Server

VS2012: To disconnect from TFS server you need to navigate to Top Menu --> Team --> Disconnect From Team Foundation Server and there is no such option available on Team Explorer to disconnect.

Download Microsoft Visual Studio Team Foundation Server 2012 Power Tools
   
        

Working with Conditional Comments

Here are some links about Conditional Statements.

Conditional comments are statements interpreted by Microsoft Internet Explorer in HTML source code. Conditional comments can be used to provide and hide code to and from Internet Explorer.

(1) About conditional comments

(2) Conditional comments

(3) Conditional comment

(4) Conditional comments of IE
     
      

Error : CSS, Images not loading when Debub="false" in web.config for MVC Application

For MVC application, i came across problem while i set Debut="false" in web.config file and ultimately css and images not loading from BundleConfig file but when i set it to "true" will load all files.

While googling i got some Web.Config settings shown below, modify your web.config in the system.webServer section to run these requests through the BundleModule

But, this line of code for Web.Config not solved my problem. Finally, i got to know about bundle name in BundleConfig file, i chnaged it shown below.

- Before Change Path :
"~/Content/css" : My all CSS were reside under "Content/css"
- After Change:
"~/Content/css/css"

So, to get rid of the problem you need to give path exactly as per project and put extra "css" after it will resolve your problem for CSS not loading.

Error - A potentially dangerous Request.Path value was detected from the client

During calling REST service from client end i came across the below error..

"A potentially dangerous Request.Path value was detected from the client"

For this, i found following solution in web.config file of REST end and it works for me


- For httpruntime put requestpathinvalidcharacters="" & requestvalidationmode="2.0"
- For pages put validaterequest="false" 
- Both of these tags are located under configuration --> system.web

Also, there are some useful links too for this error
(1) Getting “A potentially dangerous Request.Path value was detected from the client (&)”

(2) A potentially dangerous Request.Path value was detected from the client (*)

Working with filtering JSON objects

Following are some way by which we can filter out objects in JSON format using jQuery.

(1) filter : using this method we can filter out JSON data by following way..
var filterData = (JSONDATA.filter(function (item) {
            return item["ColumnName"] != "Your Data To Compare";
        }));
- In above situation, filter will loop through each data and finds the specific data by comparing it.
- filter is only available in new version of jQuery. Also, it is not working in IE-8 and not compatible with IE-8 or lower.

(2) grep : using this method we can filter out JSON data by following way..
var filterData = ($.grep(JSONDATA,function (item,l) {
            return item["ColumnName"] != "Your Data To Compare";
        }));
In above situation, grep will loop through each data and finds the specific data by comparing it.

(3) slice : using this method we can removes and returns a given number of elements starting from a given index from JSON object by following way..

var filterData = $.each(JSONDATA.slice(1,3), function(item) {

                    return item;

                }),

- In above example, removes three elements starting from index position 1 (i.e., the 2nd, 3rd, and 4th elements) and returns them as an array.

- Find following link for the Grep vs Filter in jQuery.

(1) Grep vs Filter in jQuery?