Download presentation
Presentation is loading. Please wait.
1
Ivaylo Kenov Telerik Software Academy Technical Assistant
2
Kendo UI Summary and Installation Kendo HTML Helpers Kendo Widgets Kendo Grid Kendo DataViz Live Application Build 2
3
http://www.kendoui.com/
4
Framework for building modern interactive web applications Collection of script files and resources (styles, images, etc.) Leverages JavaScript HTML5 CSS3 jQuery 4
5
Rich UI Widgets HTML5 controls based on jQuery Core 3 categories of UI Widgets Web DataViz Mobile Client-side DataSource Abstraction for working with all types of data on the client side 5
6
MVVM Framework Provides declarative binding and two-way data synchronization in your web application Animation and Drag & Drop Templating Validation Framework Server wrappers ASP.NET MVC Java and PHP 6
7
Download Kendo UI Complete for MVC Copy and reference Kendo.Mvc.dll Located in:...\wrappers\aspnetmvc\Binaries\Mvc3 Copy the provided version of jQuery Copy JavaScript files into ~\Scripts\Kendo js\kendo.all.min.js and js\kendo.aspnetmvc.min.js Copy CSS files and images into ~\Content All from …\styles to ourProject\Styles\Kendo 7
8
Create bundles for jQuery and Kendo Create bundles for CSS Clear the ignore list for the bundles 8 bundles.Add(new ScriptBundle("~/bundles/jquery").Include( ScriptBundle("~/bundles/jquery").Include( "~/Scripts/Kendo/jquery.min.js")); "~/Scripts/Kendo/jquery.min.js"));bundles.Add(new ScriptBundle("~/bundles/kendo").Include( ScriptBundle("~/bundles/kendo").Include( "~/Scripts/Kendo/kendo.web.min.js“, "~/Scripts/Kendo/kendo.web.min.js“, "~/Scripts/Kendo/kendo.aspnetmvc.min.js")); "~/Scripts/Kendo/kendo.aspnetmvc.min.js")); bundles.Add(new StyleBundle("~/Content/kendo").Include( StyleBundle("~/Content/kendo").Include( "~/Content/kendo.common.*", "~/Content/kendo.common.*", "~/Content/kendo.default.*")); "~/Content/kendo.default.*"));
9
Register bundles (if not already) Render the bundles in your Layout page 9 protected void Application_Start() { … BundleConfig.RegisterBundles(BundleTable.Bundles); BundleConfig.RegisterBundles(BundleTable.Bundles); …} <head> @Styles.Render("~/Content/kendo") @Styles.Render("~/Content/kendo") @Scripts.Render("~/bundles/kendo") @Scripts.Render("~/bundles/kendo")</head>
10
Add Kendo namespace in web.config for the Views folder 10 <system.web.webPages.razor> </system.web.webPages.razor>
11
Pure HTML and JavaScript ASP.NET MVC wrappers Kendo code MUST be after jQuery reference! 11
12
Documentation here! here
13
http://www.kendoui.com/
14
HTML Helpers Lightweight C# objects Auto-generate markup within a View Return HTML and JavaScript to the browser Provide Fluent API Can be used in both Web Forms and Razor Easily customized through JavaScript and jQuery 14
15
Some Web Widgets AutoComplete Calendar DropDownList Upload TreeView Grid Some DataViz Widgets Chart LinearGauge RadialGauge 15
16
Usage of helpers 16 @(Html.Kendo().Grid((IEnumerable<Models.Product>) ViewBag.Products) ViewBag.Products).Name("grid").Name("grid").Columns(columns =>.Columns(columns => { columns.Bound(product => product.ProductID); columns.Bound(product => product.ProductID); columns.Bound(product => product.ProductName); columns.Bound(product => product.ProductName); columns.Bound(product => product.UnitsInStock); columns.Bound(product => product.UnitsInStock); }) }).Pageable().Pageable().Sortable().Sortable())
17
Live Demo
18
форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен SEO курс - оптимизация за търсачки уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop уроци по програмиране и уеб дизайн за ученици ASP.NET MVC курс – HTML, SQL, C#,.NET, ASP.NET MVC безплатен курс "Разработка на софтуер в cloud среда" BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране, книги – безплатно от Наков безплатен курс "Качествен програмен код" алго академия – състезателно програмиране, състезания ASP.NET курс - уеб програмиране, бази данни, C#,.NET, ASP.NET курсове и уроци по програмиране – Телерик академия курс мобилни приложения с iPhone, Android, WP7, PhoneGap free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране http://academy.telerik.com
19
1. Create the WebForms “Library System” exam with ASP.NET MVC and Kendo UI Server Side Wrappers using as much widgets as you can: TreeView for the Home page Grid for the Administration AutoComplete for the Search input DropDownList for category selection Others
20
“C# Programming @ Telerik Academy csharpfundamentals.telerik.com csharpfundamentals.telerik.com Telerik Software Academy academy.telerik.com academy.telerik.com Telerik Academy @ Facebook facebook.com/TelerikAcademy facebook.com/TelerikAcademy Telerik Software Academy Forums forums.academy.telerik.com forums.academy.telerik.com
Similar presentations
