Skip to content

Commit b30077c

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent beb1fb8 commit b30077c

File tree

64 files changed

+1889
-1520
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+1889
-1520
lines changed

‎docs-aspnet/how-to/build-team-efficiency-dashboard/1.getting-up-and-running.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
title: Build the Team Efficiency Dashboard Project - Step 1: Getting Up and Running
3+
page_title: Build the Team Efficiency Dashboard Project - Getting Up and Running
4+
description: "Build the Team Efficiency Dashboard Project - Step 1: Getting Up and Running."
5+
previous_url: /tutorials/quickstart/team-efficiency, /tutorials/tutorial-aspnetmvc-quick-start/build-team-efficiency-app/chapter1, /tutorials/tutorial-aspnetmvc-quick-start/build-team-efficiency-app/chapter2, /tutorials/tutorial-aspnetmvc-quick-start/build-team-efficiency-app/chapter3, /tutorials/tutorial-aspnetmvc-quick-start/build-team-efficiency-app/chapter4, /tutorials/tutorial-aspnetmvc-quick-start/build-team-efficiency-app/chapter5, /tutorials/tutorial-aspnetmvc-quick-start/build-team-efficiency-app/chapter6, /tutorials/tutorial-aspnetmvc-quick-start/build-team-efficiency-app/chapter7, /tutorials/tutorial-aspnetmvc-quick-start/build-team-efficiency-app/chapter8, /tutorials/tutorial-aspnetmvc-quick-start/build-team-efficiency-app/chapter9, /tutorials/tutorial-aspnetmvc-quick-start/build-team-efficiency-app/chapter10
6+
slug: gettingupandrunning_timeefficiencyapp_aspnetmvc6
7+
position: 1
8+
---
9+
10+
# Build the Team Efficiency Dashboard Project
11+
12+
## Step 1: Getting Up and Running
13+
14+
In this chapter you are going to start with the basics, including starting a new project, adding Telerik UI for MVC to your project, and installing the quick start boilerplate.
15+
16+
### Create a New MVC Project
17+
18+
#### Overview
19+
20+
Telerik UI for ASP.NET MVC can easily be added to an existing ASP.NET MVC project using VisualStudio in just a few clicks. Start by creating a new ASP.NET MVC project. You will use this project throughout the rest of this tutorial to build your application.
21+
22+
#### Exercise: Create a New MVC Project
23+
24+
1. Click **File** > **New Project**.
25+
26+
1. In the **New Project** dialog, choose the **ASP.NET Web Application** template by expanding the **Templates** tree to **Templates** > **Visual C#** > **Web**.
27+
28+
![{{ site.product_short }} New Project Templates](images/chapter1/file-new-mvc-project.png)
29+
30+
1. Give the application a name, for example, **MyQuickStartApp**. Click **OK** to continue.
31+
32+
1. In the **New ASP.NET Project** dialog, choose **MVC** from the template selection.
33+
34+
![{{ site.product_short }} Select the MVC project template](images/chapter1/select-new-mvc-template.png)
35+
36+
1. Click **OK** to finish.
37+
38+
### Install the Quick Start Boilerplate
39+
40+
#### Overview
41+
42+
With the new project created, it is time to start building your app. For this guide, we have scaffolded out a boilerplate project to act as a starting point for the Team Efficiency Dashboard application.
43+
44+
The boilerplate has an HTML page, a layout, the Northwind database, and some server-side code you may find in a typical MVC project.
45+
46+
#### Exercise: Install the Quick Start Boilerplate
47+
48+
1. Using the package manager console, run the command below.
49+
50+
PM> Install-Package KendoQsBoilerplate
51+
52+
Alternatively, you can use the GUI package manager.
53+
54+
1. From the Solution Explorer, right-click **References**, then choose **Manage NuGet Packages**.
55+
56+
![{{ site.product_short }} Manage NuGet Packages](images/chapter1/manage-nuget-packages.png)
57+
58+
1. Search for **KendoQsBoilerplate**.
59+
60+
![{{ site.product_short }} Search for Boilerplate](images/chapter1/nuget-boilerplate.png)
61+
62+
1. Click **Install** to continue.
63+
1. When the package installs, you may be prompted to accept a license agreement for the NorthwindDB. Click **I Accept** to continue.
64+
1. It is normal for the quick start boilerplate to overwrite existing files. When prompted with a file conflict, choose **Yes to All**.
65+
66+
![{{ site.product_short }} Conflict](images/chapter1/file-conflict.png)
67+
68+
1. With the boilerplate installed, take a moment to run the application. If all went well, you should see something similar to what is shown below.
69+
70+
![{{ site.product_short }} Wire Frame](images/chapter1/wire-frame.png)
71+
72+
### Convert to Telerik Applications
73+
74+
#### Overview
75+
76+
At this point, you have the wire frame for a basic MVC application. Next, you will be adding the UI for ASP.NET MVC to the application by using the **Convert to Telerik Application** tooling. When an application is converted to a Telerik application, all required HTML, CSS, JavaScript and `.DLL` libraries are added. This is the first step you would take to upgrade a new or existing MVC project to use Telerik UI for ASP.NET MVC.
77+
78+
#### Exercise: Convert to a Telerik Application
79+
80+
1. Stop the application if it is already running.
81+
1. In the Solution Explorer, right-click the project name and select **Telerik UI for ASP.NET MVC** > **Convert to Telerik Application**. This will launch the **Project Configuration** wizard. From here you can choose settings for your Telerik project.
82+
83+
![{{ site.product_short }} Selecting Convert to Telerik Application](images/chapter1/convert-to-telerik.png)
84+
85+
1. For this tutorial your project will use CDN support. This means that all Kendo UI resources are served from Telerik content delivery network (CDN) versus relying on your server for the assets. Verify that the box **Use CDN support** is checked and click **Finish** to continue.
86+
87+
![{{ site.product_short }} Checking CDN Support](images/chapter1/cdn-support.png)
88+
89+
1. Since the boilerplate is designed with [Bootstrap](https://getbootstrap.com), choose **Bootstrap** from themes select box so the theme matches the current look of the boilerplate. You'll change the theme later when you're ready to customize the look of the application.
90+
91+
![{{ site.product_short }} Choosing Bootstrap](images/chapter1/bootstrap-theme.png)
92+
93+
1. Open `\Views\Shared\_Layout.cshtml`. Find and remove the `@Scripts.Render("~/bundles/modernizr")` script bundle. This script is included with the Kendo UI assets.
94+
1. Next, find the CSS `@Styles.Render("~/Content/css")` bundle and move it just above the closing head tag `</head>`. This will ensure that the custom styles are applied when you customize the application.
95+
1. The final code of the head section should look like the one shown in the example below.
96+
97+
<meta charset="utf-8" />
98+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
99+
<title>@ViewBag.Title - UI for MVC / Kendo Quick Start Guide</title>
100+
<link href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
101+
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
102+
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
103+
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
104+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
105+
<script src="https://kendo.cdn.telerik.com/{{ site.cdnVersion }}/js/kendo.all.min.js"></script>
106+
<script src="https://kendo.cdn.telerik.com/{{ site.cdnVersion }}/js/kendo.aspnetmvc.min.js"></script>
107+
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
108+
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
109+
@Styles.Render("~/Content/css")
110+
111+
> Because the **Convert to Telerik application**, **Upgrade Project**, or **Configure Project** wizards modify the `_Layout.cshtml` file, make sure you check the position of the custom CSS declarations afterwards.
112+
113+
Now that your app is ready for development. Let's add some simple input components to create a nice user experience.

‎docs-aspnet/how-to/build-team-efficiency-dashboard/10.kendoui-themes.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Build the Team Efficiency Dashboard Project - Step 10: Add and Configure the Kendo UI Themes
3+
page_title: Build the Team Efficiency Dashboard Project - Add and Configure the Kendo UI Themes
4+
description: "Build the Team Efficiency Dashboard Project - Step 10: Add and Configure the Kendo UI Themes."
5+
slug: kendoui_themes_timeefficiencyapp_aspnetmvc6
6+
position: 10
7+
---
8+
9+
# Build the Team Efficiency Dashboard Project
10+
11+
## Step 10 (Last): Add and Configure the Kendo UI Themes
12+
13+
Kendo UI widgets include a number of predefined themes. In this chapter you'll learn how to make your app look amazing using Kendo UI themes.
14+
15+
### Theme Change
16+
17+
#### Exercise: Theme the Application
18+
19+
1. If running, stop the project.
20+
1. In the Visual Studio's Project Explorer, right-click the project and choose **Telerik UI For MVC** > **Configure Project** from the menu.
21+
1. From the Project Configuration Wizard, choose the Nova theme.
22+
1. Open `Views/Shared/_Layout.cshtml` and move `@Styles.Render("~/Content/css")` just above the closing head tag `</head>`.
23+
1. Run the application to see the theme applied to the Kendo UI widgets.
24+
1. Next, you'll be finishing the theme by adding styles to non-Kendo UI elements creating a completely custom look. A style sheet was installed with the boilerplate to give you a jump-start. Add it to the application by opening `Views/Shared/_Layout.cshtml` and adding a reference to `~/Content/site-nova.css` just above the closing head tag `</head>`.
25+
26+
> This is CSS, so the order in which the style sheets are added is very important.
27+
28+
<link href="~/Content/site-nova.css" rel="stylesheet" />
29+
</head>
30+
31+
1. Refresh the application and notice the look is starting to come together. There's just a few items that could use some fine-tuning. Let's add some additional styles to `site-nova.css` to complete the theme.
32+
1. Open `site-nova.css` and find the `/* Side Panel - Employee List */`. Add a style that sets the date picker widgets inside the `menuPanel` to 100% width of the container.
33+
34+
The resulting code should be like the one shown in the example below.
35+
36+
/* Side Panel - Employee List */
37+
#menuPanel .k-widget.k-datepicker {
38+
width: 100%;
39+
}
40+
41+
<!--*-->
42+
![{{ site.product_short }} The DatePicker width](images/chapter10/datepicker-width.png)
43+
44+
1. Add a style to offset the employee list so its content lines up with the left edge of its container.
45+
46+
#employee-list > ul {
47+
margin: 0 -10px;
48+
}
49+
50+
![{{ site.product_short }} The ListView container](images/chapter10/list-view-container.jpg)
51+
52+
1. Find `/* Small Devices, Tablets, and Up */`. Here you'll find a media query that will hold some styles that are only applied to scree sizes above `768px`.
53+
54+
@media only screen and (min-width : 768px) {
55+
56+
}
57+
58+
1. Inside the media query, add a selector for `.app-wrapper` and set a left margin of `-15` and set the `position` to `relative`. This style will align the app with the left hand edge of the screen.
59+
60+
/* Small Devices, Tablets, and Up */
61+
@media only screen and (min-width : 768px) {
62+
.app-wrapper {
63+
position: relative;
64+
margin-left: -15px;
65+
}
66+
}
67+
68+
<!--*-->
69+
![{{ site.product_short }} App Wrapper margin](images/chapter10/app-wrapper.jpg)
70+
71+
1. Finally, set the Kendo UI Chart themes. Open `_MontlySalesByEmployee.cshtml` and set the `Theme` property to `nova` on the `EmployeeAverageSales` chart.
72+
73+
@(Html.Kendo().Chart<KendoQsBoilerplate.MonthlySalesByEmployeeViewModel>()
74+
.Name("EmployeeAverageSales")
75+
...
76+
.AutoBind(false)
77+
.Events(e => e.DataBound("onAverageSalesDataBound"))
78+
.Theme("nova")
79+
)
80+
81+
1. Open `_QuarterToDateSales.cshtml` and set the `Theme` property to `nova` on the `EmployeeQuarterSales` chart.
82+
83+
@(Html.Kendo().Chart<KendoQsBoilerplate.QuarterToDateSalesViewModel>()
84+
.Name("EmployeeQuarterSales")
85+
...
86+
.AutoBind(false)
87+
.Events(e => e.DataBound("onQuarterSalesDataBound"))
88+
.Theme("nova")
89+
)
90+
91+
And... that's it! You've created an interactive dashboard application using Telerik UI for MVC and Kendo UI. In the process you've mastered scaffolding, Kendo UI templates, charts, server and client-side APIs, responsive web design and themes.
92+
93+
Congratulations!
94+
95+
![{{ site.product_short }} Finished App - Nova theme](images/chapter10/finished-app-in-nova.png)
96+
97+
## Next Steps
98+
99+
Your journey with Telerik is just beginning. Here are some resources to help you figure out where to go from here.
100+
101+
- Follow [@telerik](https://twitter.com/telerik) on Twitter for the latest and greatest news about Telerik UIs.
102+
- Check out the [Telerik UI for ASP.NET MVC roadmap](https://www.telerik.com/support/whats-new/aspnet-mvc) to see what's coming next.
103+
- Find comprehensive [demos of individual widgets and complete applications](https://demos.telerik.com/aspnet-mvc/).

‎docs-aspnet/how-to/build-team-efficiency-dashboard/2.input-controls.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: Build the Team Efficiency Dashboard Project - Step 2: Input Controls
3+
page_title: Build the Team Efficiency Dashboard Project - Input Controls
4+
description: "Build the Team Efficiency Dashboard Project - Step 2: Input Controls."
5+
slug: input_controls_timeefficiencyapp_aspnetmvc6
6+
position: 2
7+
---
8+
9+
# Build the Team Efficiency Dashboard Project
10+
11+
## Step 2: Input Controls
12+
13+
In this chapter you'll learn how to add Kendo UI widgets to your application. UI for MVC has powerful HTML Helpers that configure and render Kendo UI widgets.
14+
15+
### Kendo UI Helper Overview
16+
17+
#### Server-Side Wrappers
18+
19+
Telerik UI for ASP.NET MVC is a set of server-side wrappers. A server-wrapper does the following:
20+
21+
- Allows the developer to configure a Kendo UI widget via C# or VB.NET code&mdash;set its value, data source, etc.
22+
- Renders the HTML and JavaScript needed to initialize the Kendo UI widget. The widget options propagate to the client side via the widget initialization script.
23+
24+
![{{ site.product_short }} Server-side wrapper outputs HTML and JavaScript](../../images/wrapper-output.png)
25+
26+
#### Configuration
27+
28+
The Kendo UI HtmlHelper exposes all Kendo UI server wrappers.
29+
30+
![{{ site.product_short }} HtmlHelper extension method](../../images/kendo-extension.png)
31+
32+
#### Widget Options
33+
34+
The widget options are exposed via a fluent interface.
35+
36+
![{{ site.product_short }} Fluent interface](../../images/fluent-interface.png)
37+
38+
Below is an example of how a NumericTextBox input is created.
39+
40+
@(Html.Kendo().NumericTextBox()
41+
.Name("age") // set the name of the NumericTextBox
42+
.Value(10) //set the value
43+
.Spinners(false) // disable the spinners
44+
)
45+
46+
### Adding a Kendo UI DatePicker
47+
48+
#### Overview
49+
50+
Let's open the `Index.cshtml` page under the folder `~\Views\Home\`. The `Index.cshtml` page is where most of the application's UI lives. This page currently contains basic HTML inputs to collect date input from the user. To provide a better user experience, replace the standard HTML inputs with Kendo UI date picker controls. The Kendo UI date picker controls offer users a flyout calendar to choose a desired date.
51+
52+
> The Kendo UI DatePicker control is touch and mouse friendly. No additional code is necessary to support tablets and phones.
53+
54+
#### Exercise: Replace StatsFrom and StatsTo TextBoxes with Kendo UI Date Pickers
55+
56+
1. Open `~\Views\Home\Index.cshtml` and find the `StatsFrom` text box helper.
57+
58+
<!-- Stats From Date Picker -->
59+
@Html.TextBox("StatsFrom", new DateTime(1996, 1, 1))
60+
61+
1. Replace the text box helper with a Kendo UI date picker. Set the `Name` property to `StatsFrom` and the `Value` with a new `DateTime` of `1996,1,1`.
62+
63+
<!-- Stats From Date Picker -->
64+
@(Html.Kendo().DatePicker()
65+
.Name("StatsFrom")
66+
.Value(new DateTime(1996, 1, 1))
67+
)
68+
69+
1. Find the `StatsTo` text box helper.
70+
71+
<!-- Stats To Date Picker -->
72+
@Html.TextBox("StatsTo", new DateTime(1996, 1, 1))
73+
74+
1. Replace the text box helper with a Kendo UI DatePicker. Set the `Name` property to `StatsTo` and the `Value` with a new `DateTime` of `1998,8,1`.
75+
76+
<!-- Stats To Date Picker -->
77+
@(Html.Kendo().DatePicker()
78+
.Name("StatsTo")
79+
.Value(new DateTime(1998, 8, 1))
80+
)
81+
82+
The Kendo UI HTML helper's fluent interface lets you configure a widget's behavior and appearance. The code you just added uses the following properties:
83+
84+
- `Name`&mdash;The property sets the rendered HTML element's id property.
85+
- `Value`&mdash;Sets a default selected date value for the date picker.
86+
87+
After you run your app with this change, you will see a calendar icon in the **Stats from** field. Click or tap the icon to reveal the date picker.
88+
89+
![{{ site.product_short }} Tap to show a DatePicker](images/chapter2/date-picker-flyout.png)
90+
91+
With the inputs upgraded, let's move on to the extremely robust Kendo UI Grid.

0 commit comments

Comments
 (0)