HOW TO WORK WITH KENDO GRID USING JQUERY?

The Kendo User Interface Grid is a powerful widget which allows you to visualize and edit data via its table representation. It provides a variety of option about how to present and perform operations over the underlying data, such as paging , sorting , filtering , grouping , and editing , etc. To feed the grid with data, you can supply either local or remote data via the Kendo User interface DataSource component, used as a mediator. There are two possible way to instantiate a Kendo User Interface grid in your project : 1.From an empty div element. In this case all the Grid setting are provided in the initialization script statements. 2.From an existing HTML table element. In both cases the grid is registered as a jquery plugin, now i am using Kendo User interface Grid from an empty div element. In this demo you can see how you can easily configure the grid to display your data and perform sorting, paging filtering, and grouping etc. operations via its built-in functionality.

HOSTING KENDO UI (USER INTERFACE) IN YOUR PROJECT To host Kendo User interface grid in your project, you need to follow these things: •Download the bundle from the official server. •Host the JavaScript and CSS plugin references in your project. DOWNLOAD THE BUNDLE After you Download Kendo User Interface bundles, you need to uncompressed the downloaded file. The folders listed below are hosted in your local downloaded repository. /APPTEMPLATES The apptemplates folder contains standalone starter templates. Although all HTML files are static, it is recommended that you can use a web server to open them or directly from the file system. The latter approach breaks all Ajax data request. /EXAMPLES The examples Folder accommodates the quick-start demo files.Although all HTML files are static, it is recommended that you can

use a web server to open them or directly from the file system. The latter approach breaks all Ajax data request. /JS The js folder Contains the minified JavaScript files. /SRC The folder src used to hold the source code files, but they are now provided in a separate downloaded package. Access the source code package from the Downloads section of your account. Note that the source code is not available to trial users. /STYLES Consists of the minified CSS files and themes images. The folder also includes the fewer files, which can be passed to the compiler, located on the first-level folder inside styles / folder : styles/ web / and styles / mobile / . Note that the Less files are not available in the trial versions. /WRAPPERS Include the server-side wrappers. As it is necessary for the User Interface for ASP.NET MVC (Model View Controller), User Interface for JSP (Java Server Pages) or User Interface for PHP (Personal Home Page) distribution only. CHANGELOG.HTML Provides the Kendo User Interface release notes. ADD CSS AND JAVASCRIPT REFERENCES To use Kendo User Interface in your project, include the required JavaScript and CSS files. Step 1 : Extract the js and styles directories from the bundle archive and copy them to your web application root directory according to your project architecture.

Step 2 : Include the Kendo User Interface JavaScript and CSS files in the head tag of your HTML document. Verify that the common CSS files are registered before the theme CSS files. Example : <head runat=”server”> <link href = “/kendo.common.min.css” rel = “stylesheet” /> <link href = “/kendo.default.min.css” rel = “stylesheet” /> <link href = “/kendo.default.mobile.min.css” rel = “stylesheet” /> <Script src = “/jquery.min.js”/> </head> HTML HTML extend for Hyper text markup language, which is the set of markup codes or symbols.The main Use of markup codes or symbols file intended for display on a World Wide Web browser pages. The HTML markup tells the Web browser, how to display a Web page’s contain like words and images on a web browser.

<!DOCTYPE html> <html xmlns = “http://www.w3.org/1999/xhtml “> <head runat = “server “> <title> Kendo Grid </title> <link href = “Style/kendo.common.min.css ” rel = “stylesheet ” /> <link href = “Style/kendo.default.min.css ” rel = “stylesheet ” /> <link href = “Style/kendo.default.mobile.min.css ” rel = ” stylesheet ” /> <link href = “Style/Main.css ” rel = “stylesheet ” /> <script src= “Script/jquery.min.js “/> <script src= “Script/kendo.all.min.js “/> <script src= “Script/Main.js “/> </head> <body> <form id = “form1 ” runat = “server “> < div id = “example “> < div id = “grid “> < / div>

< / div> < / form> < / body> < / html> JQUERY It is a JavaScript library and it’s light-weighted, “write less, do more”. The purpose of using this is to make it much easier to use JavaScript on your web application. It takes a lot of common tasks to accomplish this, that is require many lines of JavaScript code, and wraps them into methods that you can call with a single lines of code. It also simplifies the lots of the complicated things from older Java Scripts concepts, like AJAX call and DOM ( Document Object Model ) manipulation etc. Note : You can use these demo api (https://demos.telerik.com/kendo- ui/service/Northwind.svc/Customers) to fetch data and bind accordingly in your web application project.

$( document ).ready( function () { $( ” #grid ” ).kendoGrid( { dataSource : { type : ” odata “, transport : { read : “https://demos.telerik.com/kendo- ui/service/Northwind.svc/Customers “ }, pageSize : 20 }, height : 550, groupable : true, sortable : true, pageable : { refresh : true, pageSizes : true, buttonCount : 5 }, columns : [ { template : “

“style=’background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);’>” + ” # : ContactName # “, field : “ContactName “, title : “Contact Name “, width : 240 }, { field : “ContactTitle “, title : “Contact Title “ }, { field : “CompanyName “, title : “Company Name “ }, { field : “Country “, width : 150 } ] } ); } ); CSS CSS stands for Cascading Style Sheets. Basically, it is used to describes how HTML elements are to be displayed on screen, on paper, or in other medias. It saves developers lot of work because it can control the layout of multiple web pages all at once place. External style sheets are stored in this files.

.customer-photo { display : inline-block; width : 32px; height : 32px; border-radius : 50%; background-size : 32px 35px; background-position : center center; vertical-align : middle; line-height : 32px; box-shadow : inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2); margin-left : 5px; } .customer-name { display : inline-block; vertical-align : middle; line-height : 32px; padding-left : 3px; }

GITHUB REFERENCES Note : If you would like to Download the this Demo then Click here to get Demo project for more understanding. SUMMARY The Kendo User Interface Grid is a powerful widget which allows you to visualize and edit data via its table representation. It provides a variety of option about how to present and perform operations over the underlying data, such as paging , sorting , filtering , grouping , and editing , etc. After complete this demo you are feel very positive because you are able to work on Kendo User Interface Grid with HTML, J query, JavaScript and CSS Cascading Style Sheet files. Article references : Click here to learn how to work with Angular CLI. Source : https://www.loginworks.com/blogs/work-kendo-grid-using-jquery/

HOW TO WORK WITH KENDO GRID USING JQUERY?