KendoUI_for_aspdotnet_mvc_web_widgets

1,799 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,799
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

KendoUI_for_aspdotnet_mvc_web_widgets

  1. 1. Kendo UI for ASP.NET MVC – Web Widgets
  2. 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. 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. 4. Installation and Getting Started    Download Install Create New KendoUI project
  5. 5. View: AutoComplete
  6. 6. AutoComplete-UI
  7. 7. ColorPalette and ColorPicker view
  8. 8. ColorPalette and ColorPicker -UI
  9. 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. 10. ComboBox UI
  11. 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. 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. 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. 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. 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. 16. References - There are many more such web widgets available. Please check it out http://demos.telerik.com/kendoui/web/overview/index.html.
  17. 17. Queries?
  18. 18. www.mindfiresolutions.com https://www.facebook.com/MindfireSolutions http://www.linkedin.com/company/mindfire-solutions http://twitter.com/mindfires

×