In this blog we will take a look at Telerik’s Kendo UI Templates generated when you create a new project in Visual Studio. We’ll create a rudimentary view using the direct-client script and the wrapper options. Let’s begin with the direct-client script.
When creating a new project in Visual Studio, the first screen you see is the template screen. Select the Telerik template from the All project types dropdown:
All Telerik templates installed on your system will be presented to you (some might be duplicate due to multiple installations). In this run we’re going to select the Kendo UI ASP.Net MVC5 Application template:
You are presented with the following templates. Select GRID AND MENU, this will generate a nice sample page with a couple of Telerik button and grid Kendo components.
Select Next…
Select Default-Ocean-Blue and then Finish.
If you open the Index.cshtml page, you will see a couple of Kendo tags, kendoButton and kendoGrid. Those tags are from referenced CDNs in the _Layout.cshtml (there is NO Kendo DLL referenced in the solution’s References branch). The tags are jQuery components that will spit out the actual button and grid tags when the view renders in the browser.
Upon running and inspecting the resulting DOM in the browser’s developer tools (F12), we see the generated code scripts (I took out all extra tags for brevity):
<p>
<button class="textButton k-primary">Primary Button</button>
</p>
<p>
<button class="textButton">Button</button>
</p>
<p>
<button class="textButton">Button</button>
</p>
<div class="row">
<div class="col-12">
<div id="grid"></div>
</div>
</div>
<script>
$(document).ready(function()
{
$(".textButton").kendoButton();
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
// More grid attributes set here but removed for brevity
});
});
</script>
The code calls the Kendo functions on the html components. For example, it calls kendoButton on the “Button” tag to generate a button, and it calls the kendoGrid on the “grid” tag to generate a grid.
Next, let’s create a project using the wrappers. This time select the Telerik C# ASP.Net MVC Application from the Create new project window:
The generated index.cshtml looks like this:
<p>
@(Html.Kendo()
.Button()
.Name("PrimaryButton")
.Content("Primary Button")
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.ThemeColor(ThemeColor.Primary)
.HtmlAttributes(new { @class = "textButton" } ))
</p>
<p>
@(Html.Kendo()
.Button()
.Name("TextButton")
.Content("Button")
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.HtmlAttributes(new { @class = "textButton" } ))
</p>
<p>
@(Html.Kendo()
.Button()
.Name("Button")
.Content("Button")
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.HtmlAttributes(new { @class = "textButton" } ))
</p>
<div class="row">
<div class="col-12">
@(Html.Kendo().Grid<TelerikMvcApp26.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
</div>
</div>
Inspecting the resulting DOM in the browser’s developer tools (F12), we see the generated code scripts (I took out all extra tags for brevity):
<button class="textButton" id="PrimaryButton">Primary Button</button>
<script>
kendo.syncReady(function()
{
jQuery("#PrimaryButton").kendoButton({
"size": "medium",
"rounded": "medium",
"themeColor": "primary"
});
});
</script>
<button class="textButton" id="TextButton">Button</button>
<script>
kendo.syncReady(function()
{
jQuery("#TextButton").kendoButton({
"size": "medium",
"rounded": "medium"
});
});
</script>
<button class="textButton" id="Button">Button</button>
<script>
kendo.syncReady(function() {
jQuery("#Button").kendoButton({
"size": "medium",
"rounded": "medium"
});
});
</script>
<div class="k-widget k-grid" id="grid" style="height:550px;">
<table id="b0cdb719-8a57-4ed0-8b5b-b56c058fa90f" role="none">
<thead class="k-table-thead">
kendo.syncReady(function(
{
jQuery("#grid").kendoGrid({
"columns": [{
"title": "Order ID",
"headerAttributes": {
"data-field": "OrderID",
"data-title": "Order ID"
},
If we compare the generated end code in the browser’s developer tools, we see that the difference between the two methods of creating this code is the call to the kendo.syncReady wrapper function. This wrapper here is Telerik’s way to handle some jQuery issue and how the components are generated in MVC. Other than that, there is no real end difference between the two methods. It stands as a personal preference on what method to follow, whether you like to get in your cshtml and add scripts or see HTML Razor helpers.
In the next blog we will see how to put the grid in batch mode – performing CRUD operations and committing these changes to the database.
