TELERIK UI FOR ASP.

NET MVC 
Create New ASP.NET MVC 5 Applications 
http://docs.telerik.com/aspnet-mvc/getting-started/asp-net-mvc-5#create-new-aspnet-mvc-5-application
s

Step 1​ Create New Telerik Project. 

Step 2​ Select ​ASP.NET Web Application​ > ​OK​. This starts the ​New ASP.NET Project​ wizard.

Add Telerik UI for ASP.NET MVC 
http://docs.telerik.com/aspnet-mvc/getting-started/asp-net-mvc-5#add-telerik-ui-for-aspnet-mvc

Use Local JavaScript and CSS 

Below  are  listed  the  steps  for  you  to  follow  when  copying  the  required  JavaScript  and  CSS  files  in 
the Visual Studio Solution of the application. 

Step  1​ Navigate  to  the  install  location  of  Telerik  UI  for  ASP.NET MVC. By default, it is in ​C:\Program
Files (x86)\Telerik\​. 

Step  2​ Copy  the ​js​ directory  from  the  install  location  and  paste  it  in  the ​Scripts​ folder  of  the 
application. 

Step  3​ Copy  the ​styles​ directory  from  the  install  location  and  paste  it  in  the ​Content​ folder  of  the 
application. 
Step 4​ Rename the ​Scripts/js​ directory to ​Scripts/kendo​. 
Rename ​Content/styles​ to ​Content/kendo​. 

After the needed JavaScript and CSS files are added to the application, you can include them. 

Step 5​ Open ​App_Start/BundleConfig.cs​ to add bundles for Telerik UI for ASP.NET MVC. 

Step 6​ Add a script bundle for Telerik UI for ASP.NET MVC. 

bundles.Add(​new​ ​ScriptBundle​(​"~/bundles/kendo"​).Include(
​"~/Scripts/kendo/kendo.all.min.js"​,
​"~/Scripts/kendo/kendo.aspnetmvc.min.js"​));

Step 7​ Add a style bundle for Telerik UI for ASP.NET MVC. 

bundles.Add(​new​ ​StyleBundle​(​"~/Content/kendo/css"​).Include(
​"~/Content/kendo/kendo.common-bootstrap.min.css"​,
​"~/Content/kendo/kendo.bootstrap.min.css"​));

Step 8​ Tell the ASP.NET bundles to allow minified files in debug mode. 
 
bundles​.​IgnoreList​.​Clear​();

Step 9​ Open the layout of the application. By default, it is ​Views/Shared/_Layout.cshtml​, 

or ​Site.master​ if using ASPX. 

Step 10​ Render the Telerik UI for ASP.NET MVC style bundle. 

@​Styles​.Render(​"~/Content/kendo/css"​)
Step 11​ Move the jQuery bundle to the ​head​ tag of the page. It is at the end of the page by default. 

Step 12​ Render the Telerik UI for ASP.NET MVC script bundle after jQuery. 
@​Scripts​.Render(​"~/bundles/jquery"​)
@​Scripts​.Render(​"~/bundles/kendo"​)

Grid HtmlHelper Overview

http://docs.telerik.com/aspnet-mvc/helpers/grid/overview

Server Binding 
Below  are  listed  the  steps  for  you  to  follow  when configuring the Kendo UI Grid for server binding to 
the Northwind ​Products​ table using. 

Step  1​ Create  a  new  ASP.NET  MVC  4  application.  If  you  have  installed  the ​Telerik  UI  for  ASP.NET 
MVC  Visual  Studio  Extensions​,  create  a  Telerik  UI  for  ASP.NET  MVC  application.  Name  the 
application ​KendoGridServerBinding​.  If  you  decided  not  to  use  the  Telerik  UI  for  ASP.NET  MVC 
Visual  Studio  Extensions,  follow  the  steps from the ​introductory article​ to add Telerik UI for ASP.NET 
MVC to the application. 

Step  2​ Add  a  new ​Entity Framework Data Model​.  Right-click  the ​~/Models​ folder  in  the  solution 
explorer  and  pick ​Add  new  item​.  Choose ​Data​> ​ADO.NET  Entity  Data  Model​ in  the ​Add  New 
Item​ dialog.  Name  the  model ​Northwind.edmx​ and  click ​Next​.  This  starts  the ​Entity  Data  Model 
Wizard​. 
Step  3​ Pick  the ​Generate  from  database​ option  and  click ​Next​.  Configure  a  connection  to  the 
Northwind database. Click ​Next​.
Step  4​ Choose  the ​Products​ table  from  the ​Which database objects do you want to include
in your model?​. Leave all other options as they are set by default. Click ​Finish​.
 

Step 5​ Create ​HomeController.cs​ and modify the ​Index​ action method.

// GET: Home
public​ ​ActionResult​ Index()
{
ViewBag.Message = ​"Welcome to ASP.NET MVC!"​;
​var​ northwind = ​new​ ​NorthwindEntities​();
​//Get the Products entities and add them to the ViewBag.
ViewBag.Products = northwind.TMPROD;
​return​ View();
}
Step 6​ Add a Kendo UI Grid to the ​Index​ view.
@(​Html.Kendo().Grid((​IEnumerable​<TelerikMvcApp1.Models.​TMPROD​>)ViewBag.Products) ​//Bin
d the grid to ViewBag.Products
.Name(​"grid"​)
.Columns(columns =>
{
​//Create a column bound to the ProductID property.
columns.Bound(product => product.CO_PROD);
​//Create a column bound to the ProductName property.
columns.Bound(product => product.NB_PROD);
​//Create a column bound to the UnitsInStock property.
columns.Bound(product => product.UN_STOCK);
})
.Pageable() ​//Enable the paging.
.Sortable() ​//Enable the sorting.
)

Step 7​ Build and run the application.

 Ajax Binding
http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

The Basics 
The Ajax-bound mode has the following features: 

● The Grid retrieves only the data (in JSON format) representing the current page. As a result, only the 
Grid is updated. 
● All Grid templates (column, detail) are executed client-side. They follow the ​Kendo UI 
Template​ definition rules and may contain embedded JavaScript code. 

Step 1​ Open the ​HomeController.cs​ and add a new action method which will return the Products 
as JSON. The Grid makes Ajax requests to this action. 
using​ Kendo.Mvc.Extensions;
using​ Kendo.Mvc.UI;
 
public​ ​ActionResult​ Products_Read([​DataSourceRequest​]​DataSourceRequest​ request)
{
​using​ (​var​ northwind = ​new​ ​NorthwindEntities​())
{
​IQueryable​<​TMPROD​> products = northwind.TMPROD;
​DataSourceResult​ result = products.ToDataSourceResult(request);
​return​ Json(result);
}
}

Step 2​ In the view, configure the Grid to use the action method created in the previous steps. 
@(​Html.Kendo().Grid<TelerikMvcApp1.Models.​TMPROD​>()
.Name(​"grid"​)
.DataSource(dataSource => dataSource ​//Configure the Grid data source.
.Ajax() ​//Specify that Ajax binding is used.
.Read(read => read.Action(​"Products_Read"​, ​"Home"​))
)
.Columns(columns =>
{
​//Create a column bound to the ProductID property.
columns.Bound(product => product.CO_PROD);
​//Create a column bound to the ProductName property.
columns.Bound(product => product.NB_PROD);
 ​//Create a column bound to the UnitsInStock property.
columns.Bound(product => product.UN_STOCK);
})
​ / Enable paging
.Pageable() /
.Sortable() /​ / Enable sorting
)

Step 3​ Add title to headers. 

//Create a column bound to the ProductID property.
columns.Bound(product => product.CO_PROD).Title(​"IdProducto"​);
​//Create a column bound to the ProductName property.
columns.Bound(product => product.NB_PROD).Title(​"Producto"​);
​//Create a column bound to the UnitsInStock property.
columns.Bound(product => product.UN_STOCK).Title(​"Stock"​);

Step 3​ Build and run the application. 

Event Handling 
 
@(​Html.Kendo().Grid<TelerikMvcApp1.Models.​TMPROD​>()
.Name(​"grid"​)
.DataSource(dataSource => dataSource ​//Configure the Grid data source.
.Ajax() ​//Specify that Ajax binding is used.
.Read(read => read.Action(​"Products_Read"​, ​"Home"​)) ​//Set the action met
hod which will return the data in JSON format.
)
.Columns(columns =>
{
​//Create a column bound to the ProductID property.
columns.Bound(product => product.CO_PROD).Title(​"IdProducto"​);
​//Create a column bound to the ProductName property.
 columns.Bound(product => product.NB_PROD).Title(​"Producto"​);
​//Create a column bound to the UnitsInStock property.
columns.Bound(product => product.UN_STOCK).Title(​"Stock"​);
})
.Pageable() ​// Enable paging
.Sortable() ​// Enable sorting
.Events(e => e
.DataBound(​"onDataBound"​)
)
)

<​script​>
​function​ onDataBound() {
​//Handle the dataBound event.
​var​ grid = ​this​;
grid.tbody.find(​"tr[role='row']"​).each(​function​ () {
​var​ dataItem = grid.dataItem(​this​);
​if​ (dataItem.UN_STOCK == 0) {
$(​this​).css(​'color'​, ​'red'​);
}
});
}
</​script​>
 

 
   
Common Scenarios 
http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

Use View Models 

Step 1​ Perform all steps from the previous section.

Step 2​ Add a new class to the ​~/Models​ folder. Name it ​ProductViewModel​. 

public​ ​class​ ​ProductViewModel

{
​public​ ​int​ ProductID { ​get​; ​set​; }
​public​ ​string​ ProductName { ​get​; ​set​; }
​public​ ​int​? UnitsInStock { ​get​; ​set​; }
}

Step 3​ Modify the Grid declaration and make it use ​ProductViewModel​ instead of ​TMPROD​. 

@(​Html.Kendo().Grid<TelerikMvcApp1.Models.​ProductViewModel​>()
.Name(​"grid"​)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action(​"Products_Read"​, ​"Home"​))
)
 .Columns(columns =>
{
columns.Bound(product => product.ProductID);
columns.Bound(product => product.ProductName);
columns.Bound(product => product.UnitsInStock);
})
.Pageable()
.Sortable()
)

Step 4​ Modify the ​Products_Read​ action method and use the ​ToDataSourceResult​ method 

overload which accepts a mapping lambda. 
 
public​ ​ActionResult​ Products_Read([​DataSourceRequest​]​DataSourceRequest​ request)
{
​using​ (​var​ northwind = ​new​ ​NorthwindEntities​())
{

​IQueryable​<​TMPROD​> products = northwind.TMPROD;

​//Convert the Product entities to ProductViewModel instances.
​DataSourceResult​ result = products.ToDataSourceResult(request, product => ​new​
ProductViewModel
{
ProductID = product.CO_PROD,
ProductName = product.NB_PROD,
UnitsInStock = product.UN_STOCK
});
​return​ Json(result);
}
}

Ajax Editing
http://docs.telerik.com/aspnet-mvc/helpers/grid/configuration
http://docs.telerik.com/aspnet-mvc/helpers/grid/editing/ajax-editing#ajax-editing
 

Step 1​ Add tags to ViewModel.

public​ ​class​ ​ProductViewModel
{
[​Display​(Name = ​"IdProducto"​)]
​public​ ​int​ ProductID { ​get​; ​set​; }
[​Display​(Name = ​"Producto"​)]
​public​ ​string​ ProductName { ​get​; ​set​; }
[​Display​(Name = ​"Stock"​)]
​public​ ​int​? UnitsInStock { ​get​; ​set​; }
}
Step 2​ Add a new action method to ​HomeController.cs​. It will be responsible for saving the new 
data items. Name the method ​Products_Create​. 
public​ A ​ ctionResult​ Products_Create([​DataSourceRequest​]​DataSourceRequest​ request, ​ProductViewModel​ product)
{
​if​ (ModelState.IsValid)
{
​using​ (​var​ northwind = ​new​ ​NorthwindEntities​())
{
​//Create a new Product entity and set its properties from the posted ProductViewModel.
​var​ entity = ​new​ ​TMPROD
{
NB_PROD = product.ProductName,
UN_STOCK = product.UnitsInStock
};
​// Add the entity.
northwind.TMPROD.Add(entity);
​// Insert the entity in the database.
northwind.SaveChanges();
​// Get the ProductID generated by the database.
product.ProductID = entity.CO_PROD;
}
}
​// Return the inserted product. The grid needs the generated ProductID.
​return​ Json(​new​[] { product }.ToDataSourceResult(request, ModelState));
}

Step 3​ Add a new action method to ​HomeController.cs​. It will be responsible for saving the 
updated data items. Name the method ​Products_Update​. 
public​ A ​ ctionResult​ Products_Update([​DataSourceRequest​]​DataSourceRequest​ request, ​ProductViewModel​ product)
{
​if​ (ModelState.IsValid)
{
​using​ (​var​ northwind = ​new​ ​NorthwindEntities​())
{
​// Create a new Product entity and set its properties from the posted ProductViewModel.
​var​ entity = ​new​ ​TMPROD
{
CO_PROD = product.ProductID,
NB_PROD = product.ProductName,
UN_STOCK = product.UnitsInStock
};
​// Attach the entity.
northwind.TMPROD.Attach(entity);
​// Change its state to Modified so Entity Framework can update the existing product
// instead of creating a new one.
northwind.Entry(entity).State = ​EntityState​.Modified;
​// Or use ObjectStateManager if using a previous version of Entity Framework.
​// northwind.ObjectStateManager.ChangeObjectState(entity, EntityState.Modified);
​// Update the entity in the database.
northwind.SaveChanges();
}
}
​// Return the updated product. Also return any validation errors.
​return​ Json(​new​[] { product }.ToDataSourceResult(request, ModelState));
}

Step 4​ Add a new action method to ​HomeController.cs​. It will be responsible for saving the deleted 
data items. Name the method ​Products_Destroy​. 
public​ ​ActionResult​ Products_Destroy([​DataSourceRequest​]​DataSourceRequest​ request, P
​ roductViewModel​ product)
{
​if​ (ModelState.IsValid)
{
​using​ (​var​ northwind = ​new​ ​NorthwindEntities​())
{
​// Create a new Product entity and set its properties from the posted ProductViewModel.
​var​ entity = ​new​ ​TMPROD
{
CO_PROD = product.ProductID,
NB_PROD = product.ProductName,
UN_STOCK = product.UnitsInStock
};
​// Attach the entity.
northwind.TMPROD.Attach(entity);
​// Delete the entity.
northwind.TMPROD.Remove(entity);
​// Or use DeleteObject if using a previous versoin of Entity Framework.
​// northwind.Products.DeleteObject(entity);
​// Delete the entity in the database.
northwind.SaveChanges();
}
}
​// Return the removed product. Also return any validation errors.
​return​ Json(​new​[] { product }.ToDataSourceResult(request, ModelState));
}
 

Step 5​ In the view, configure the Grid to use the action methods created in the previous steps. 

 
Common DataSource Settings 
http://docs.telerik.com/aspnet-mvc/helpers/grid/configuration

Create 
The ​Create​ method sets the action method which is responsible for saving new data items. 
@(​Html.Kendo().Grid<TelerikMvcApp1.Models.​ProductViewModel​>()
.Name(​"grid"​)
.Columns(columns =>
{
columns.Bound(product => product.ProductID);
columns.Bound(product => product.ProductName);
columns.Bound(product => product.UnitsInStock);
})
​.ToolBar(toolbar => toolbar.Create())
​.Editable(editable => editable.Mode(​GridEditMode​.PopUp))
.DataSource(dataSource => dataSource
.Ajax()
​.Model(model => model.Id(product => product.ProductID))
​.Create(create => create.Action(​"Products_Create"​, ​"Home"​))
.Read(read => read.Action(​"Products_Read"​, ​"Home"​))
)
.Pageable()
.Sortable()
)
Update 
The ​Update​ method sets the action method which is responsible for saving updated data items. 
@(​Html.Kendo().Grid<TelerikMvcApp1.Models.​ProductViewModel​>()
.Name(​"grid"​)
.Columns(columns =>
{
columns.Bound(product => product.ProductID);
columns.Bound(product => product.ProductName);
columns.Bound(product => product.UnitsInStock);
​columns.Command(commands =>
​{
​commands.Edit();
​}).Title(​"Commands"​).Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(​GridEditMode​.PopUp))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(product => product.ProductID))
.Create(create => create.Action(​"Products_Create"​, ​"Home"​))
​.Update(update => update.Action(​"Products_Update"​, ​"Home"​))
.Read(read => read.Action(​"Products_Read"​, ​"Home"​))
)
.Pageable()
.Sortable()
)
 
  

Destroy 
The ​Destroy​ method sets the action method which is responsible for delete data items. 
@(​Html.Kendo().Grid<TelerikMvcApp1.Models.​ProductViewModel​>()
.Name(​"grid"​)
.Columns(columns =>
{
columns.Bound(product => product.ProductID);
columns.Bound(product => product.ProductName);
columns.Bound(product => product.UnitsInStock);
columns.Command(commands =>
{
commands.Edit();
​commands.Destroy();
}).Title(​"Commands"​).Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(​GridEditMode​.PopUp))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(product => product.ProductID))
.Read(read => read.Action(​"Products_Read"​, ​"Home"​))
.Create(create => create.Action(​"Products_Create"​, ​"Home"​))
.Update(update => update.Action(​"Products_Update"​, ​"Home"​))
​.Destroy(destroy => destroy.Action(​"Products_Destroy"​, ​"Home"​))
)
.Pageable()
.Sortable()
)
  

Other References:

http://demos.telerik.com/kendo-ui/grid/index

http://www.c-sharpcorner.com/UploadFile/56fb14/how-entity-framework-works/
REPORTES 
http://docs.telerik.com/reporting/html5-report-viewer-howto-custom-parameters

Step 1​ Open Telerik Report Designer

Step 2 ​Create New Report Template 

Step 3 ​Add Parameter

@model ​TISUR_COM.UI.Models.Report.​ReportFilter

@section styles{
​<​link​ ​href​="​@​Url.Content(​"~/Content/kendo/kendo.common.min.css"​)​"​ ​rel​="stylesheet"
​/>
​<​link​ ​href​="​@​Url.Content(​"~/Content/kendo/kendo.blueopal.min.css"​)​"​ ​rel​="styleshee
t"​ ​/>
}
<​style​>
​#reportViewer1​ {
​position​: ​relative​;
​width​: ​1300px​;
​height​: ​600px​;
​font-family​: ​Verdana​, ​Arial​;
}
</​style​>

<​form​ ​method​="get"​ ​action​="​@​Url.Action(Model.ReportName, ​"Reports"​)​"​ ​id​="form-filter"​

form-ajax-target​="#divReport"​ c ​ lass​="form-horizontal">
​<​div​ ​class​="row">
​<​div​ ​class​="col-xs-12">
​<​h3​>​Reporte de Servicios​</​h3​>
​<​div​ ​class​="col-xs-3">
​<​div​ ​class​="form-group">
 ​@​Html.Label(​"Desde"​, ​new​ { @class = ​"col-xs-3 control-label"​ })
​<​div​ ​class​="col-xs-9">
​@(​Html.Kendo().DatePicker()
.Name(​"StartDate"​)
.Value(​DateTime​.Now.AddDays(-7))
.Format(​"dd/MM/yyyy"​)
​)
​</​div​>
​</​div​>
​</​div​>
​<​div​ ​class​="col-xs-3">
​<​div​ ​class​="form-group">
​@​Html.Label(​"Hasta"​, ​new​ { @class = ​"col-xs-3 control-label"​ })
​<​div​ ​class​="col-xs-9">
​@(​Html.Kendo().DatePicker()
.Name(​"EndDate"​)
.Value(​DateTime​.Now)
.Min(​DateTime​.Now.AddDays(-7))
.Format(​"dd/MM/yyyy"​)
​)
​</​div​>
​</​div​>
​</​div​>
​</​div​>
​ /​div​>
<

​<​div​ c ​ lass​="row">
​<​div​ ​class​="col-xs-2">
​<​input​ ​type​="button"​ ​id​="btnReport"​ ​class​="k-button k-button-icontext"​ ​val
ue​="Reporte">
​</​div​>
​</​div​>
</​form​>
<​div​ ​id​="reportViewer1">
loading...
</​div​>

@section scripts{
​<​script​ ​src​="​@​Url.Content(​"~/ReportViewer/js/telerikReportViewer-10.2.16.1025.min.
js"​)​"></​script​>
​<​script​>
​var​ companyName = ​"TERMINAL INTERNACIONAL DEL SUR S.A."​;
​var​ ruc = ​"20428500475"​;
​var​ reportName = ​"REPORTE DE PRODUCTOS"​;
​var​ initialDate = $(​"#StartDate"​).val().split(​"/"​);
​var​ finalDate = $(​"#EndDate"​).val().split(​"/"​);
​var​ newinitialDate = ​new​ Date(initialDate[2], initialDate[1] - 1, initialDate[
0]);
​var​ newfinalDate = ​new​ Date(finalDate[2], finalDate[1] - 1, finalDate[0]);

$(document).ready(​function​ () {
$(​"#reportViewer1"​).telerik_ReportViewer({
serviceUrl: ​"api/reportdesigner"​,
reportSource: {
 report: ​"ServiceReport.trdp"​,
parameters: {
NBEMPR: companyName,
NURUC: ruc,
RPTITU: reportName,
RGFECH: ​"Del "​ + $(​"#StartDate"​).val() + ​" al "​ + $(​"#EndDate"
).val(),
DAFEINIC: newinitialDate,
DAFEFIN: newfinalDate
}
},
});
});

$(​'#btnReport'​).click(​function​ () {

​var​ initialDate = $(​"#StartDate"​).val().split(​"/"​);

​var​ finalDate = $(​"#EndDate"​).val().split(​"/"​);
​var​ newinitialDate = ​new​ Date(initialDate[2], initialDate[1] - 1, initialD
ate[0]);
​var​ newfinalDate = ​new​ Date(finalDate[2], finalDate[1] - 1, finalDate[0]);

​var​ viewer = $(​"#reportViewer1"​).data(​"telerik_ReportViewer"​);

viewer.reportSource({
report: viewer.reportSource().report,
parameters: {
NBEMPR: companyName,
NURUC: ruc,
RPTITU: reportName,
RGFECH: ​"Del "​ + $(​"#StartDate"​).val() + ​" al "​ + $(​"#EndDate"​).va
l(),
DAFEINIC: newinitialDate,
DAFEFIN: newfinalDate
}
});
viewer.refreshReport();
});

​</​script​>
}