Kendo UI for ASP.NET MVC – Web Widgets

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

Introduction

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.

Installation and Getting Started Download Install Create New KendoUI project

AutoCompleteView:

AutoComplete-UI

ColorPalette and ColorPickerview

ColorPalette and ColorPicker -UI

ComboBoxView: <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) ) </div>

ComboBox UI

MultiSelectView:

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

PanelBarView:@(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"); }))

WindowView:@(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>))

TabStripView:@(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");

}))

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

Summary

References

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

Queries?

www.mindfiresolutions.com

https://www.facebook.com/MindfireSolutions

http://www.linkedin.com/company/mindfire-solutions

http://twitter.com/mindfires