KendoUI_for_aspdotnet_mvc_web_widgets

100 %
0 %
Information about KendoUI_for_aspdotnet_mvc_web_widgets
Technology

Published on March 6, 2014

Author: MindfireSolutions

Source: slideshare.net

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.

Kendo UI for ASP.NET MVC – Web Widgets

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

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

View: AutoComplete

AutoComplete-UI

ColorPalette and ColorPicker view

ColorPalette and ColorPicker -UI

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)

ComboBox UI

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

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

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

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

- 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.

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

Queries?

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

Add a comment

Related presentations

Related pages

Web Widgets | LinkedIn

View 765 Web Widgets posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn. ... KendoUI_for_aspdotnet_mvc_web_widgets.
Read more

Mvc(web) | LinkedIn

Current Senior Web MVC Developer And Software Architucture at Informatics of Saderat Bank Past Ministry Of Interior Senior Web MVC Developer at Ministry Of ...
Read more