You are on page 1of 10

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/