Working Events of Telerik Grid View Windows Controls

Here is some events where you can do some operations while working with telerik gridview.

(1) Cell double click :- You can do some functionality while clicking over cell of the grid item, it could be anything like opening a another form in edit mode or anything.
Private Sub grid_CellDoubleClick(sender As Object, e As EventArgs) Handles grid.CellDoubleClick
'Your code goes here        
End Sub

(2) Row Formatting :- When you want to do some operations on your grid items this event comes to you. for me, on some operation i need to show items color to red, i checked its column value and if it meets requirement make it red else reset value of the.
Private Sub rgdAvailResult_RowFormatting(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.RowFormattingEventArgs) Handles rgdAvailResult.RowFormatting
    If e.RowElement.RowInfo.Cells("column1").Value Then
       e.RowElement.ForeColor = System.Drawing.Color.Red
    Else
       e.RowElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local)
    End If
End Sub

(3) View Row Formatting :- for rows related general event to work with different items of the grid. For me, to show filter bar in different color format, i use this event. So, if the item is filterrow then change is color else reset value to original.
Private Sub grid_ViewRowFormatting(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.RowFormattingEventArgs)
        If TypeOf e.RowElement Is GridFilterRowElement Then
            e.RowElement.BackColor = Color.NavajoWhite
        Else
            e.RowElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local)
        End If
    End Sub

So, these are some events which are i found for my resolution. 

Export Telerik Windows GridView Control Data to Excel File

Here is some code snippet which will generate excel file of the telerik windows grid view. I assuming that you already bind data to your telerik grid on your windows application form and performing export to excel on any event.

- Declare new save file dialog in which you will enter your file name
Dim saveFileDialog As New System.Windows.Forms.SaveFileDialog()
- Below code snippet filters your file to be saved for xls only
saveFileDialog.Filter = "Excel (*.xls)|*.xls"
If saveFileDialog.ShowDialog() <> DialogResult.OK Then
    Return
End If
- Below code snippet checks whether file name has been entered or not
If saveFileDialog.FileName.Equals([String].Empty) Then
    RadMessageBox.SetThemeName(MyBase.ThemeName)
    RadMessageBox.Show("Please enter a file name.")
    Return
End If
- Below code snippet acceps name you entered and some default entries to generate your file
Dim fileName As String = saveFileDialog.FileName
Dim excelExporter As New ExportToExcelML("GridName")
excelExporter.SummariesExportOption = SummariesOption.ExportAll
excelExporter.SheetMaxRows = ExcelMaxRows._1048576
excelExporter.RunExport(fileName)
RadMessageBox.SetThemeName(MyBase.ThemeName)
- Below code snippet asks dialog to open saved file 
Dim dr As DialogResult = RadMessageBox.Show("The data in the grid was exported successfully. Do you want to open the file?", "Export to Excel", MessageBoxButtons.YesNo, RadMessageIcon.Question)
If dr = DialogResult.Yes Then
    System.Diagnostics.Process.Start(fileName)
End If

This way you can export your telerik windows control grid view data to excel file in default format.

Add an Item to Context Menu of Telerik Windows Grid View

Here is some code to work with Context Menu of Grid View of Telerik Windows Controls for Windows Forms

How to add an item to context menu of Grid View : To add custom item to context menu of the telerik grid view follow the steps below. For this code, I assume you are using Telerik Grid View for your Windows Forms and you have performed all necessary steps to bind your grid.

- Add an event handler 
AddHandler radGridView1.ContextMenuOpening, AddressOf radGridView1_ContextMenuOpening1

- Create contet menu event
Private Sub radGridView1_ContextMenuOpening1(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.ContextMenuOpeningEventArgs)
        Dim menuItemExportToSpreadsheet As RadMenuItem = New RadMenuItem()
        menuItemExportToSpreadsheet.Text = "Export to Spreadsheet"
        AddHandler menuItemExportToSpreadsheet.Click, AddressOf ExportToSpreadsheet

        Dim separator As RadMenuSeparatorItem = New RadMenuSeparatorItem()
        e.ContextMenu.Items.Add(separator)
        e.ContextMenu.Items.Add(menuItemExportToSpreadsheet)
    End Sub

- Create click event of the newly added context menu item
Private Sub ExportToSpreadsheet(ByVal sender As Object, ByVal e As System.EventArgs)
'Your code goes here
End Sub

So, after doing this, each time you are on your grid view and you are opening your context menu you will see a new item get added to your context menu named "Expor to Spreadsheet", and on click of this you can perform logic written under its handler. 

This way you can add new menu item under your Telerik Grid Context Menu.

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.