kendoui_for_aspdotnet_mvc_web_widgets
DESCRIPTION
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.TRANSCRIPT
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