Beruflich Dokumente
Kultur Dokumente
CHANGELOG.HTML
Provides the Kendo User Interface release notes.
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/