100 %
0 %
Information about KendoUI_for_aspdotnet_mvc_web_widgets

Published on March 6, 2014

Author: MindfireSolutions



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


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


Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

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