Working with kendo drag n drop

Here is some code for the working with drag n drop with kendo drag n drop. This is considered that you are already have your application with kendo enabled environment.

(A) HTML - Following code is your html initialization for the drag & drop object
- Drag Object

                   

Drag Me

               

- Drop Object

                   

Drop Here

               

(B) Script - Following code is your jquery function for initialization and drag n drop handling
- Drag object Initialization and event handling
$(this).find("#dragObj").kendoDraggable({
    filter: "this:not(.disabled)",
    hint: function () {
        return "

Drop Me

";
    },
    dragstart: startfuncion,
    dragend: endfunction,
    dragcancel: cancelfunction
});

- filter : this line of statement is responsible to disable any object during drag n drop so if you have filtered anything it will be get disable on time of drag and once you drop/cancel current operation it will be again enabled.

function startfuncion(e)
{
 //you can find your current object related information which is being dragged using e.currentTarget
}

function endfunction(e)
{
 //you can write your logic after event get end
}

function cancelfunction(e)
{
 //you can find your logic for drag cancel
}

- Drop object initialization and event handling
$("#dropHere").kendoDropTarget({
    dragenter: dropenterfunction,
    dragleave: dropleavefunction,
    drop: dropfunction,
    dragcancel: dropcancelfunction
});

function dropenterfunction(e)
{
 //you can find your logic for highlighting when draggable object enters in this region
}
function dropleavefunction(e)
{
 //you can find your logic for remove highlighting when draggable object leaves this region
}
function dropfunction(e)
{
 //you can find your logic for object which is dropped to this region
}
function dropcancelfunction(e)
{
 //you can find your logic for object which is dragged but was cancelled
}

Below is link for the kendo drag n drop demo and documentation for same
(1) Demo for Drag & Drop Component in Kendo UI jQuery framework

(2) Overview of DOM element Draggable functionality | Kendo UI Docs

Working with Export to PDF in Kendo Grid

Here is some link to work with export to PDF in kendo grid

(A) PDF Export Demo: Export to PDF demo and documentation link 
(1) Grid / Export to PDF

(2) Walkthrough of the Grid Features and Behavior

(B) Kendo UI Export Options with Customizations: Export to PDF functionality in two different way you want to manipulate
(1) Kendo UI Drawing API Export functionality - Document Export

(2) Kendo UI PDF Export customizations - Page Layout

(C) Kendo Grid Export to PDF: Export to PDF with launcher which lets user to ask user if we export then it will ask user with open/save dialog
(1) Kendo UI Grid Export to Excel / PDF not working on IE9

(2) Kendo Grid Configuration for Export

Working with OData?

Open Data Protocol (OData) is a RESTful data access protocol initially defined by Microsoft. Here is some links that will help you to know more about what OData is and how to consume.

(1) Open Data Protocol

(2) OData Version 3.0 Core Protocol

(3) Introducing OData Data Access for the Web, the cloud, mobile devices, and more

(4) OData in ASP.NET Web API | The ASP.NET Site

Consume OData Service
(4) OData Services

(5) Consuming OData using .NET

(6) Calling an OData Service From a .NET Client

How it is differ from REST
(7) Difference between OData and REST web services

(8) How is oData different from a REST service? 

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