Kendo UI/Telerik UI for ASP.NET MVC is a set of server side wrappers that allow using the Kendo UI widgets from C# or VB.NET code.

1. Kendo UI for ASP.NET
MVC – Web Widgets

2. Introduction
Kendo UI/Telerik UI for ASP.NET MVC is a set of server side
wrappers allow using the Kendo UI widgets from C# or
VB.NET code.
– Presented By:
Swati Gupta
Mindfire Solutions
13/02/2014

3. Overview



Installation and Getting Started
Create new Kendo UI project.
A deeper look into widely used Kendo Web Widgets
– Kendo UI AutoComplete
– Kendo UI ColorPalette and ColorPicker
– Kendo UI ComboBox
– Kendo UI MultiSelect
– Kendo UI PanelBar
– Kendo UI Window
– Kendo UI TabStrip
– Demos on each widget.

4. Installation and Getting Started



Download
Install
Create New KendoUI project

5. View:
AutoComplete

6. AutoComplete-UI

7. ColorPalette and ColorPicker
view

8. ColorPalette and ColorPicker -UI

9. ComboBox
View:
<div>
<h3>T-Shirt Fabric</h3>
@(Html.Kendo().ComboBox().Name("Fabric").Filter("contains").Placeholder("Select Fabric..").DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>
{
new SelectListItem()
{
Text = "cotton", Value = "1"
},
new SelectListItem()
{
Text = "polyester", Value = "2"
},
new SelectListItem()
{
Text = "Rib Knit", Value = "3"
}
})
.SelectedIndex(2)
.Suggest(true)
)
<h3>T-shirt Size</h3>
@(Html.Kendo()
.ComboBox()
.Name("size")
.Placeholder("Select size...")
.BindTo(new List<string>()
{
"X-Small",
"Small",
"Medium",
"Large",
"X-Large",
"2X-Large"
})
.SelectedIndex(3)
.Suggest(true)

10. ComboBox UI

11. View:
MultiSelect
<h5>Required</h5>
@(Html.Kendo()
.MultiSelect().Name("Required").Placeholder("Select attendees...").HighlightFirst(true)
.BindTo(new List<string>()
{
"Steven White", "Nancy King","Anne King","Nancy Davolio","Robert Davolio","Michael
Leverling",
"Andrew Callahan","Michael Suyama", "Anne King","Laura Peacock", "Robert Fuller","Janet
White",
"Nancy Leverling","Robert Buchanan", "Andrew Fuller","Anne Davolio", "Andrew Suyama","Nige
Buchanan","Laura Fuller"
})
)

12. PanelBar
View:
@(Html.Kendo()
.PanelBar()
.Name("panelbar1")
.ExpandMode(PanelBarExpandMode.Single)
.HtmlAttributes(new { style = "width:300px" })
.Items(panelbar =>
{
panelbar.Add().Text("Men Screening").Items(subItems =>
{
subItems.Add().Text("SubPanel1");
subItems.Add().Text("SubPanel2");
subItems.Add().Text("SubPanel3");
});
panelbar.Add().Text("Women Screening");
panelbar.Add().Text("WH");
})
)

13. Window
View:
@(Html.Kendo().Window().Name("customWindow")
.Height(350)
.Width(750)
.Title("Penguins")
.Scrollable(false)
.Resizable()
.Draggable()
.AutoFocus(true)
.Modal(true)
.Actions(action =>
action.Maximize().Minimize().Close())
.Events(events => events.Close("OnClose"))
.Content(@<text>
<p>Sample content...</p>
</text>)
)

14. TabStrip
View:
@(Html.Kendo()
.TabStrip()
.Name("tabstrip")
.Items(tabstrip =>{
tabstrip.Add().Text("Paris").Selected(
true).Content("This is first tab
content");
tabstrip.Add().Text("New
York").Content("This is second tab
content");
tabstrip.Add().Text("Moscow").Content(
"This is third tab content");
tabstrip.Add().Text("Sydney").Content(
"This is fourth tab content");
})
)

15. -
Summary
-Can be independently used in our webpage.
- Highly customizable widgets.
- Configuration options available.
- Attach events.
- Easy to use and implement.
- Saves lot of time.

16. References
- There are many more such web widgets
available. Please check it out http://demos.telerik.com/kendoui/web/overview/index.html.

17. Queries?

19. www.mindfiresolutions.com
https://www.facebook.com/MindfireSolutions
http://www.linkedin.com/company/mindfire-solutions
http://twitter.com/mindfires