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>
}
