1. AutoComplete
Remote method:-
<input id="autoComplete" />
<script>
$(function() {
$("#autoComplete").kendoAutoComplete({
dataSource: {
transport: {
read: {
url: "ControllerName/MethodName"
}
},
serverFiltering: true
},
separator: ", "
dataTextField: "ProductName"
});
});
</script>
Local Method:-
var data = ["Item1", "Item2", "Item3"];
$("#autoComplete").kendoAutoComplete({
dataSource: data
});
2. Calender
Local Method :-
<div id="calendar"></div>
And in the script tag just write the below code
• Initialize the Calendar via a jQuery ID selector
$(document).ready(function(){
$("#calendar").kendoCalendar();
});
3. ComboBox
There are two ways to create a ComboBox:
a) From a <select> element with HTML to define the list items
b) From an <input> element with databinding to define the listitems
First create a list like below
var people =
[
{ Id: 1, FirstName: "John", LastName: "Doe" },
{ Id: 2, FirstName: "Jayne", LastName: "Smith" }
];
• Now we show the list to the combobox
$('#comboBox').kendoComboBox({
dataTextField: 'FirstName',
dataValueField: 'Id',
template: "<table><tr><td width='100px'>${ FirstName}</td><td width='100px'>${ LastName }</td></tr></table>",
dataSource: { data: people }
});
• Second way of assigning the Data to ComboBox
$("#comboBox").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Item1", value: "1" },
{ text: "Item2", value: "2" }
]
});
• <select> tag with pre-defined structure
<select id="comboBox">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
<script>
$(document).ready(function(){
$("#comboBox").kendoComboBox();
});
</script>
• Remote data service
$(document).ready(function() {
$("#comboBox").kendoComboBox({
index: 0,
dataTextField: "Name",
dataValueField: "Id",
filter: "contains",
dataSource: {
type: "odata",
serverFiltering: true,
serverPaging: true,
pageSize: 20,
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
}
});
});
o Here in the Catalog is the controller name and Titles is the method in that controller.
• Customization of the combobox
<input id="comboBox" />
<!-- Template -->
<script id="scriptTemplate" type="text/x-kendo-template">
# if (data.BoxArt.SmallUrl) { #
<img src="${ data.BoxArt.SmallUrl }" alt="${ data.Name }" />
Title:${ data.Name }, Year: ${ data.Name }
# } else { #
<img alt="${ data.Name }" />
Title:${ data.Name }, Year: ${ data.Name }
# } #
</script>
<!-- ComboBox initialization -->
<script>
$(document).ready(function() {
$("#comboBox").kendoComboBox({
autoBind: false,
dataTextField: "Name",
dataValueField: "Id",
template: $("#scriptTemplate").html(),
dataSource: {
type: "odata",
serverFiltering: true,
serverPaging: true,
pageSize: 20,
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
}
});
});
</script>
4. Date Picker
<input id="datePicker" />
In the script tag
$(document).ready(function(){
$("#datePicker").kendoDatePicker();
});
• Giving minimum and maximum date
$(document).ready(function(){
$("#datePicker").kendoDatePicker({
value: new Date(),
min: new Date(1950, 0, 1),
max: new Date(2049, 11, 31)
})
});
• Start view and Navigation depth
$("#datePicker").kendoDatePicker({
start: "year",
depth: "year"
});
• Same Properties can be applicable to calendar also.
5. Date Time Picker
<input id="dateTimePicker" />
• And write the below code in the script tag.
$(document).ready(function(){
$("#dateTimePicker").kendoDateTimePicker();
});
• Giving minimum and maximum to the datetimepicker.
$(document).ready(function(){
$("#dateTimePicker").kendoDateTimePicker({
value: new Date(2000, 10, 10, 10, 0, 0),
min: new Date(1950, 0, 1, 8, 0, 0),
max: new Date(2049, 11, 31, 18, 0, 0)
})
});
• Time Format
$("#dateTimePicker").kendoDateTimePicker({
timeFormat: "hh:mm:ss tt" //this format will be used to format the predefined values in the time list.
});
The first rendered view can be defined with "start" option. Navigation depth can be controlled with "depth" option. Predefined views are:
• "month" - shows the days from the month
• "year" - shows the months of the year
• "decade" - shows the years from the decade
• "century" - shows the decades from the century
o Start and Navigation depth
$("#dateTimePicker").kendoDateTimePicker({
start: "year",
depth: "year"
});
Time intervals (in minutes) between values in the time drop-down list
$("#dateTimePicker").kendoDateTimePicker({
interval: 15
})
6. DropDownList
There are two ways to create a DropDownList:
o From a <select> element with HTML to define the list items
o From an <input> element with databinding to define the listitems
Declaring the tag
<input id="dropDownList" />
Write the below code in the script tag
$(document).ready(function() {
$("#dropDownList").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Item1", value: "1" },
{ text: "Item2", value: "2" }
]
});
});
The above code was written statically (Hard coded)
The below code was written by using <select> tag
<select id="dropDownList">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
<script>
$(document).ready(function(){
$("#dropDownList").kendoDropDownList();
});
</script>
Binding data remote
$(document).ready(function() {
$("#titles").kendoDropDownList({
index: 0,
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
type: "odata",
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
}
});
});
Accessing the existing dropdownlist
var dropDownList = $("#dropDownList").data("kendoDropDownList");
7. Editor
The Editor allows users to create rich text content by means of a WYSIWYG interface. The generated widget value is an XHTML Markup.
Declaring the Editor
<textarea id="editor" rows="10" cols="30"></textarea>
Write the below code in the script tag.
$(document).ready(function(){
$("#editor").kendoEditor({
tools: [
"bold",
"italic",
"underline",
"foreColor"
]
});
});
Customise the editor tool
$("#editor").kendoEditor({
tools: [
{
name: "toolName",
tooltip: "Custom editor tool",
exec: function(e) {
var editor = $(this).data("kendoEditor");
// execute command
}
}
]
});
Image Browser
The image browser tool can be configured through the imagebrowser configuration option
$(document).ready(function(){
$("#editor").kendoEditor({
imageBrowser: {
transport: {
read: "imagebrowser/read",
destroy: "imagebrowser/destroy",
create: "imagebrowser/createDirectory",
uploadUrl: "imagebrowser/upload",
thumbnailUrl: "imagebrowser/thumbnail"
imageUrl: "/content/images/imagebrowser configuration option"
}
}
});
});
8. Grid
There are two primary ways to create a Kendo Grid:
o From an existing HTML table element, defining columns, rows, and data in HTML.
o From an HTML div element, defining columns and rows with configuration, and binding to data.
Creating Grid by using HTML TABLE elements
<!-- Define the HTML table, with rows, columns, and data -->
<table id="grid">
<thead>
<tr>
<th data-field="title">Title</th>
<th data-field="year">Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star Wars: A New Hope</td>
<td>1977</td>
</tr>
<tr>
<td>Star Wars: The Empire Strikes Back</td>
<td>1980</td>
</tr>
</tbody>
</table>
And initializing the Kendo Grid
$(document).ready(function(){
$("#grid").kendoGrid();
});
Creating the Grid by using HTML DIV element
<div id="grid">
</div>
Initialize the Kendo Grid and configure columns & data binding
$(document).ready(function(){
$("#grid").kendoGrid({
columns:[
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
}],
dataSource: {
data: [
{
FirstName: "Joe",
LastName: "Smith"
},
{
FirstName: "Jane",
LastName: "Smith"
}]
}
});
});
Enabling Grid paging, sorting, grouping, and scrolling
$(document).ready(function(){
$("#grid").kendoGrid({
groupable: true,
scrollable: true,
sortable: true,
pageable: true
});
});
Grid UI Virtualization
When binding to large data sets or when using large page sizes, reducing active in-memory DOM objects is important for performance. Kendo Grid provides built-in UI virtualization for highly optimized binding to large data sets. Enabling UI virtualization is done via simple configuration.
This can be achieved by below code
$(document).ready(function(){
$("#grid").kendoGrid({
scrollable: {
virtual: true
}
});
});
Configure CRUD for Remote datasource
var dataSource = new kendo.data.DataSource({
transport: {
read: "/ControllerName",
update: {
url: "/ ControllerName /MethodName",
type: "POST"
},
destroy: {
url: "/ ControllerName /MethodName ",
type: "POST"
},
create: {
url: "/ ControllerName /MethodName ",
type: "POST"
}
},
// determines if changes will be send to the server individually or as batch
batch: true
//...
})
Declare fields definition through the datasource schema
var dataSource = new kendo.data.DataSource({
//..
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
//this field will not be editable (default value is true)
editable: false,
// a defaultValue will not be assigned (default value is false)
nullable: true
},
ProductName: {
validation: { //set validation rules
required: true
}
},
UnitPrice: {
//data type of the field {Number|String|Boolean} default is String
type: "number",
// used when new model is created
defaultValue: 42,
validation: {
required: true,
min: 1
}
}
}
}
}
});
Kendo Grid Editable
$("#grid").kendoGrid({
dataSource: dataSource,
editable: true
});
Another way
$("#grid").kendoGrid({
dataSource: dataSource,
editable: { //disables the deletion functionality
update: true,
destroy: false
}
});
Enable to insert a new record the toolbar should be configured
$("#grid").kendoGrid({
dataSource: dataSource,
toolbar: ["create", "save", "cancel"],
editable: true
});
Delete a record a delete command column should be given
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
"ProductName",
"UnitPrice",
"UnitsInStock",
{
command: "destroy"
}],
editable: true
});
9. ListView
Declaring the Listview by HTML tag
<ul id="listView"></ul>
Initialising the data to Listview in the script tag
$(document).ready(function() {
$("#listView").kendoListView({
template: "<li>${FirstName} ${LastName}</li>",
dataSource: {
data: [
{
FirstName: "Joe",
LastName: "Smith"
},
{
FirstName: "Jane",
LastName: "Smith"
}]
}
});
});
Enabling Listview Paging, Navigation, Selection and Editing
$(document).ready(function() {
$("#listView").kendoListView({
pageable: true,
selectable: true,
navigatable: true,
editable: true,
template: "<li>${FirstName}</li>",
editTemplate: '<li><input type="text" data-bind="value:FirstName" name="FirstName" required="required"/></li>'
});
});
10. Menu
The Menu displays hierarchical data as a multi-level menu. It provides rich styling for unordered lists of items, and can be used for both navigation and executing JavaScript commands. Items can be defined and initialized from HTML, or the API can be used to add and remove items.
Declaring the Menu
<ul id="menu">
<li>Item 1
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
Initialising the Menu in the Script
$(document).ready(function() {
$("#menu").kendoMenu();
});
Initialising the Menu by JSON object
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource:
[{
text: "Item 1",
url: "http://www.kendoui.com" // Link URL if navigation is needed, optional.
},
{
text: "<b>Item 2</b>",
encoded: false, // Allows use of HTML for item text
content: "text" // content within an item
},
{
text: "Item 3",
imageUrl: "http://www.kendoui.com/test.jpg", // Item image URL, optional.
items: [{ // Sub item collection
text: "Sub Item 1"
},
{
text: "Sub Item 2"
}]
},
{
text: "Item 4",
spriteCssClass: "imageClass3" // Item image sprite CSS class, optional.
}]
})
});
Menu Customisation
Animation for Open Behaviour
By default, the Menu uses a slide animation to expand and reveal sub-items as the mouse hovers. Animations can be easily customized using configuration properties, changing the animation style and delay. Menu items can also be configured to open on click instead of on hover.
$("#menu").kendoMenu({
animation: {
open: { effects: "fadeIn" },
hoverDelay: 500
},
openOnClick: true
});
Configuring the Menu Items
var menu = $("#menu").kendoMenu().data("kendoMenu");
menu.insertAfter(
{ text: "New Menu Item" },
menu.element.children("li:last")
);
11. NumericTextBox
Declaring the NumericTextBox
<input id="textBox" />
Initialising the NumericTextBox
$(document).ready(function(){
$("#textBox").kendoNumericTextBox();
});
12. TabStrip
A TabStrip displays a collection of tabs with associated content. It is composed of an unordered list of items - representing tabs - and a collection of div elements, which contain the content for each tab.
Declaring the TabStrip
<div id="tabStrip">
<ul>
<li>First tab</li>
<li>Second tab</li>
</ul>
<div>First tab content</div>
<div>Second tab content</div>
</div>
Initialising the TabStrip
$(document).ready(function() {
$("#tabStrip").kendoTabStrip();
});
Initialising the TabStrip using JSON
$(document).ready(function() {
$("#tabstrip").kendoTabStrip({
dataTextField: "text",
dataContentField: "content",
dataUrlField: "url",
dataImageUrlField: "imageUrl",
dataSpriteCssClass: "spriteCssClass",
dataContentUrlField: "contentUrl",
dataSource:
[{
text: "Item 1",
url: "http://www.kendoui.com" // Link URL if navigation is needed, optional.
},
{
text: "Item 2",
content: "text" // Content for the content element
},
{
text: "Item 3",
contentUrl: "partialContent.html" // From where to load the item content
},
{
text: "Item 4",
imageUrl: "http://www.kendoui.com/test.jpg" // Item image URL, optional.
},
{
text: "Item 5",
spriteCssClass: "imageClass3" // Item image sprite CSS class, optional.
}]
});
});
Selecting Tab manually using HTML
<div id="tabstrip">
<ul>
<li class="k-state-active">First Tab</li>
<li>Second Tab</li>
</ul>
<div></div>
<div></div>
</div>
Initialize a TabStrip and select first tab via select(element)
$(document).ready(function(){
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(tabstrip.tabGroup.children("li:first"));
});
Initialize a TabStrip and select first tab via select(index)
$(document).ready(function(){
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(1);
});
13. TreeView
A TreeView can be created in two ways:
o Define a hierarchical list with static HTML
o Use dynamic data binding either to a local or remote data source.
Hierarchal List declaring in HTML
<ul id="treeView">
<li>Item 1
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
Initialising the TreeView
$(document).ready(function() {
$("#treeView").kendoTreeView();
});
Creating Local Datasource
<div id="treeView"></div>
Initialsing the TreeView
$(document).ready(function() {
$("#treeView").kendoTreeView({
dataSource: [
{
text: "Item 1",
items: [
{ text: "Item 1.1" },
{ text: "Item 1.2" }
]
},
{ text: "Item 2" }
]
})
});
Creating Remote
$("#treeView").kendoTreeView({
dataSource: {
transport: {
read: {
url: "http://demos.kendoui.com/service/Employees",
dataType: "json"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
}
})
Items Definition can have following properties
var item = {
text: "Item text",
// if specified, renders the item as a link. (<a href=""></a>)
url: "http://docs.kendoui.com/",
// renders a <img class="k-image" src="/images/icon.png" />
imageUrl: "/images/icon.png",
// renders a <span class="k-sprite icon save" />
spriteCssClass: "icon save",
// specifies whether the node text should be encoded or not
// useful when rendering node-specific HTML
encoded: false,
// specifies whether the item is initially expanded
// (applicable when the item has child nodes
expanded: true,
// specifies whether the item is initially selected
selected: true,
// indicates the sub-items of the item
items: [
{ text: "Subitem text" }
]
};
Getting the Node datain the select event handler
function onSelect(e) {
// `this` refers to the TreeView object
var dataItem = this.dataItem(e.node);
console.log("Selected node with id=" + dataItem.id);
}
$("#treeview").kendoTreeView({
dataSource: [
{ id: 1, text: "Item 1", items: [
{ id: 3, text: "Item 3" }
] },
{ id: 2, text: "Item 2" }
],
select: onSelect
});
Reloading child nodes when nodes are expanded
function onExpand(e) {
var dataItem = this.dataItem(e.node);
dataItem.loaded(false);
}
$("#treeview").kendoTreeView({
dataSource: remoteDataSource,
expand: onExpand
});
Enabling drag-and-drop for TreeView nodes
$("#treeView").kendoTreeView({
dragAndDrop: true
});
14. Windows
A Window displays content in a modal or non-modal HTML window. By default, a Window can be moved, resized, and closed. Its content can also be defined with either as static HTML or loaded dynamically via AJAX.
A Window can be initialized from virtually any DOM element. During initialization, the targeted content will automatically be wrapped in the div element of the Window.
Declaring the Windows
<div id="window">
Content of the Window
</div>
Initialising the Windows
$(document).ready(function() {
$("#window").kendoWindow();
});
Create a modal Window with all user actions enabled
$("#window").kendoWindow({
actions: ["Custom", "Refresh", "Maximize", "Minimize", "Close"],
draggable: false,
height: "300px",
modal: true,
resizable: false,
title: "Modal Window",
width: "500px"
});
Custom actions
$("#window").kendoWindow({
actions: ["Custom", "Minimize", "Maximize", "Close"],
title: "Window Title"
}).data("kendoWindow").wrapper.find(".k-i-custom").click(function(e) {
alert("Custom action button clicked");
e.preventDefault();
});
<h3>Positioning and Opening a Window</h3>
<p>
In some scenarios, it is preferable to center a <strong>Window</strong> rather than open it near the HTML
element used to define the content. It is also common to open a <strong>Window</strong> as the result of the
action of a user rather than on the load event of a page. The <strong>Window</strong> API provides methods for
handling these scenarios.
</p>
Centering a Window and opening on button click
<div id="window">
Content of the Window
</div>
<button id="openButton">Open Window</button>
Initialize Window, center, and configure button click action
$(document).ready(function(){
var win = $("#window").kendoWindow({
height: "200px",
title: "Centered Window",
visible: false,
width: "200px"
}).data("kendoWindow");
});
$("#openButton").click(function(){
var win = $("#window").data("kendoWindow");
win.center();
win.open();
});
No comments:
Post a Comment