UNIT-3
DHTML
[Link]
Dynamic HTML
Techique of dynamatically changing the
rendering content of an HTML code.
HTML is static.
DHTML is interactive.
DHTML is possible for webpages to react to
the user actions.
Images can be animated.
OTHER USES OF DHTML
We can hide text, images of a document for
given period of time.
Create tickers that automatically refresh the
contents.
Create a form which can be readily filled up
with data can process and access
immedietly.
DHTML IS NOT A TECHNOLOGY
Rather it is the combination of three
different technologies.
DHTML
DOM-
Client –side
CSS scripting
Document
Object Model
CONTENTS OF DYNAMIC WEB
PAGE
Animation,audio,video files.
Page transitions,automatic refresh and
forwarding.
Visual change in response to user actions.
Automatically generated HTML
Automatically generated data
Forms processing(validation,calculation)
2 IMPLEMENTATIONS OF
DYNAMIC HTML
Netscape Navigator.
Microsoft Internet Explorer.
There is a difference between these two
implementations in terms of scripting
language.
Internet Explorer uses both VB Script and
JavaScript while Netscape Navigator uses
only JavaScript.
[Link]
Cascading style sheets is mechanism for
controlling the style of web document
without compromising its structure.
Maintaining its usability in multiple
environments.
CSS is a form of the HTML markup that
provides web designers with greater control
over typography and spacing.
CSS overrides browser default settings.
Style sheet contains rules composed of
selectors and declarations.
Selector is the Link between HTML document
and Style.
Types and attributes are two different type
of selectors.
ADVANTAGES OF CSS
CSS saves time.
Pages Load faster.
Easy maintenance
Superior styles to HTML.
DISADVANTAGES OF CSS
Browser compatability.
2.1CODING CSS
What does CSS look like?
Template is
Tag:{Property:value;Property2:value2}
Tag-element that will be affected
Property-What part of the selector will be
affected.
Value-How it will be affected.
P{font-size:10pt;color:red}
H1(FONT-SIZE:9pt;FONT-WEIGHT:bold}
SYNTAX
Selector{property 1:value 1; property 2:
value:2}
<HEAD>
<STYLE TYPE=“text/css”>
<1-
tagname {styleattribute:value;}
->
</style>
</head>
EXAMPLE
<html>
<head>
<title> My first CSS page</title>
<style>
H1{color:red}
</style>
</head>
<body>
<h1> My first CSS example</h1>
<p> All the header elements of h1 will appear with font
color as red</p>
<h1>hai</h1>
</body> </html>
2.2 PROPERTIES OF TAGS
Different tags support different properties,
Although all text tags support the same set
of text related properties.
Properties can assigned multiple values.
Syntax is:
Property-name:val1 val2….valn;
2.3 PROPERTY VALUES
Colors- A common color name can used
We can specify by providing a hexadecimal
number prefixed by #.
#808080 – A shade of grey
Length- specified using a number folloe=wed
by 2 letter code
CONTINUED
Unit code Units Example
em Overall height of Hello<SPAN style=“font-
current font size:2em”>
world</SPAN>Hello
world
px Pixels Hello<SPAN style=“font-
size:2px”>
world</SPAN>Hello
world
In Inches Hello<SPAN style=“font-
size:2in”>
world</SPAN>Hello
world
pt Point size Hello<SPAN style=“font-
size:8pt”>
world</SPAN>Hello
CONTINUED…
URL
Syntax
<body style=“background-image:
url([Link]
2.4 OTHER STYLE PROPERTIES
Number of style properties , including
properties that control lists and positoning
and floating elements like images.
Some example:
Property ---font-style
Values-----normal|italic|oblique
2.5 IN-LINE STYLE SHEETS
4 ways of adding styles to a web page.
Embed style sheet within the HEAD tags of
the HTML document.
Link to an external style shee from the HTML
document.
Import an external style sheet into the
document.
In-Line style sheet added into the middle of
the HTML .
EXAMPLE
A tag with STYLE attribute
<h2 style=“color:red; font-size:+7pt”>This is a
heading</h2>
Use font tag to modify the font properties
<h2> <FONT COLOR=RED SIZE=+5> This is a
heading <FONT> </h2>
2.6 EMBEDDED STYLE SHEETS
Global Style Sheet declarations, are defined
within the <style> & </style> which precede
the <body> tag in HTML.
EXAMPLE
<html>
<head>
<title>Title</title>
<style type=“text/css”>
<!-
[STYLE INFORMATION]
->
</style>
</head>
<body>
</body>
</html>
2.7 EXTERNAL STYLE SHEETS
The designers can change style sheet without
affecting the document.
The user also lead individual style sheets
when they are seperately available.
To access them use <link> in the head
section
Syntax
<head>
<link rel=“stylesheet” href=“[Link]”
type=“[Link]”>
</head>
2.8 GROUPING
The size of style sheets can be reduced using
grouping.
One can group selectors in comma seperated
lists.
Example
H1, H2, H3 {font-family: Helvetical}
2.9 INHERITANCE
If no color has been assigned to the EM
element the emphasized is will inherit the
color of parent element inside:
BODY {
Color:black;
Background: url([Link]) white;
}
2.10 CLASS AS SELECTOR
Classes can be created to allow referring to a
group of style settings by name.
Syntax
<STYLE TYPE=“text/css”>
<!-
.classname {styleattribute:value}
->
</style>
EXAMPLE
<STYLE TYPE=“text/css”>
.bluemoon {
Color:blue;
Background:white
}
.bluemoon EM {
Font-style:normal;
Font-weight:bold;
Color:white;
Background:black
}
</style>
<p CLASS=‘BLUEMOON’> This is an <em> of the ‘bluemoon’> This is an
<en> example</em> of the ‘bluemoon’ style.</p>
[Link] AS A SELECTOR
It is similar as CLASS.
Difference is ID are unique.
Place ID=“foo” into each object to which
style is to applied.
<STYLE TYPE=“text/css”>
#foo {color:green}
</style>
<p ID=‘foo’> This is a green paragraph by
virtue of the ID foo.
</p>
2.12 CONTEXTUAL SELECTORS
• Allows you to apply a pattern only to a
particular context.
<style type=“text/css”>
P {font-size 14pt; color: black;}
P EM {font-size: 16pt; color red}
</style>
In this example only text in a emphasized
section inside a paragraph will be in red.
2.13PSEUDO-CLASSES
These are like style classes, but an element
acquires a pseudo-class by user action or by
a relationship other than descendancy.
In the style sheet, a pseudo-class name is
preceded by a colon.
In the HTML, the pseudo-class name is NOT
used with the affected tag, because it is
implied.
© 2004, Robert K. Moniot
PSEUDO-CLASSES
Link-related pseudo-classes
a:link { color : red }
Applies when the link has not yet been visited.
a:visited { color : green }
Applies when the link has been visited.
a:hover { color: yellow }
Applies when the mouse is over the link.
© 2004, Robert K. Moniot
PSEUDO-ELEMENTS
Closely related to pseudo-classes, in that they are
defined by relationships, not by explicit declarations.
A pseudo-element refers to a virtual element that is
part of an actual element, rather than a special case
of a whole element.
:first-line is a pseudo-element that consists of the
first line of text in a block-level element.
:first-letter is a pseudo-element that consists of the
first letter of the text in an element.
© 2004, Robert K. Moniot
PSEUDO-ELEMENTS
p { text-indent: 1em }
[Link] { text-indent: 0 }
[Link]:first-line { text-transform: uppercase }
[Link]:first-letter { font-size: 24pt }
This indents all normal paragraphs. A paragraph that is declared with
class="initial" is not indented, and its first line appears in all capital
letters, with an extra-large first letter.
Result (Example 4)
© 2004, Robert K. Moniot
2.14 POSITIONING
To have greater control over the display of
web documents.
Absolute positioning
Relative positioning
ABSOLUTE POSITIONING
<img src=“[Link]” style=“position:absolute;
top:0px; left:0px; z-index: 1”>
It position the element according to its
distance from top,left,right or bottom
margin of its parent element.
The z-index attribute is used to layer the
overlapping elements with lower z-index
values.
EXAMPLE
<html>
<head>
<title> Absolute positioning</title>
</head>
<body>
<img src=“c:\[Link]” style=“position:absolute;
Top:50 px;left;25px; z-index:1”>
<h2 style=:position:absolute; top:120px; left:130px;
Z-index: 3”>Positioning Element</h2>
</body>
</html>
RELATIVE POSITIONING
It is specified based on its natural flow in the
document.
Example
If a paragraph to be ‘top;10px” it will end up
20 pixels below the heading.
EXAMPLE
<html>
<head>
<title>Relative positioning</title>
<style type=“text/css”>
.super {position:relative; top:-lex}
.sub {position:relative; bottom:-lex}
</style>
</head>
<body>
<h1>….</h1>
<p>….</p>
</body>
</html>
2.15 BACKGROUNDS
CSS gives more control over backgrounds than HTML attributes
Example
<html>
<head>
<title>backgrounds</title>
<style type=“text/css”>
p {font-size: 14pt}
body(background-image: url(c:\[Link]);
background -position: bottom right;
background –repeat:no-repeat;
Background-attachment: fixed}
</style>
</head>
<body>…..</body>
</html>
CONTINUED…
Background image is used to set the image at a
proper place.
By using background-position property.
It have values like top,bottom,left and right.
The background-repeat property controls the
tiling of background image.
X-repeat for horizontal tiling.
Y-repeat gor vertical tiling.
2.16 ELEMENT DIMENSIONS
The dimension of an element can be set
using width attribute in the inline style.
<html>
<title>Element dimension</title>
<body>
<p style=“width:30%”>This is example</p>
</body>
</html>
[Link]
It allows authors direct access to the
inividual components of their web documents
It displays new content without downloading
additional documents from server.
Easy access by the use of id attribute ang
getelementByid method.
The value of id must be unique.
CONTINUED..
<html>
<body>
<h1 id=“header”>My header</h1>
<script type=“text/javascript”>
[Link](‘header’).[Link]
r=“red”
</script>
</html>
ELEMENTS CAN BE ACCESSED
USING JAVASCRIPT FUNCTION.
<html>
<head>
<script type=“text/javascript”>
function ChangeColor()
{
[Link]=“yellow”
}
</script>
</head>
<body onclick=“ChangeColor()”>
Click on this document!
</body>
</html>
3.1 USING THE COLLECTIONS
ALL
Collections are array of related objects.
Example
<html>
<head>
<title>Illustration of collection all</title>
<script type=“text/javascript”>
function start()
{
Var tags=“”;
for(var i=0; i<[Link];++1) tags+=<“br>”+[Link][i].tagname;
[Link]+=tags;
}
</script>
</head>
<body onload=“start()”>
<p id=“pid”> the element….</p>
</body>
</html>
OTHER PROPERTIES ARE
Inner text
Outer text
Inner HTML
Outer HTML
3.2 MOVING OBJECTS AROUND
THE DOCUMENT
Moves object in a web document using combination of
javascript and positioning attribute.
Example
<html>
<head><title>…</title>
<body>
<div id=“spaceship” style=“position:relative”>
<img src=“c:program Files\Adobe\Photoshop7.0\[Link]”>
</div>
<script>
Function moving2()”,0)
}
CONTINUED…
function come back2()
If ([Link]<1000)
[Link]+=5 moveid2=setTimeout(“moving2()”,50)
}
function come_back(){
clearTimeout(moveid2)
[Link]=0
}
</script>
<form>
<input type=“button” value=“move” onclick=“moving2()”>
<input type=“button” value=“comeback” onClick=“come_back2()”>
</form> </body></html>
4. EVENT HANDLING
Key to create dynamic web pages is the use
of event handlers.
It allow to execute specific script code in
response to user.
DOM provides methods for capturing events.
4.1 ASSIGNING EVENT
HANDLERS
HTML tag attributes
A script code can be defined to be executed
using event name as an attribute.
<span style=“background-color:yellow;”
onmouseover=“[Link]=‘blac
k’;[Link]=‘white’”
onmouseout=“[Link]=‘yello
w’;[Link]=‘’”>
Sample element with mouse event handlers.
</span>
CONTINUED….
Scripting
Also we can assign event handlers to elements
in DOM using client side scripting.
Event model
Scripts can respond to user
Content becomes more dynamic
Interfaces become more intuitive
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "[Link]
4
5 <!-- Fig 14.1: [Link] -->
6 <!-- Demonstrating the onclick event -->
7
8 <html xmlns = "[Link]
9 <head>
[Link]
10 <title>DHTML Event Model - onclick</title>
11
12 <!-- The for attribute declares the script for -->
(1 OF 2)
13 <!-- a certain element, and the event for a -->
14 <!-- certain event. -->
15 <script type = "text/javascript" for = "para"
16 event = "onclick">
17 <!--
18 alert( "Hi there" );
19 // -->
20 </script>
21 </head>
22
23 <body>
24
25 <!-- The id attribute gives a unique identifier -->
26 <p id = "para">Click on this text!</p>
27
28 <!-- You can specify event handlers inline -->
29 <input type = "button" value = "Click Me!"
30 onclick = "alert( 'Hi again' )" />
31
32 </body>
33 </html>
[Link]
(2 OF 2)
EVENT ONLOAD
onload event
Fires when an element finishes loading
Used in the body element
Initiates a script after the page loads into the
client
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "[Link]
4
5 <!-- Fig. 14.2: [Link] -->
6 <!-- Demonstrating the onload event -->
7
8 <html xmlns = "[Link]
9 <head>
10 <title>DHTML Event Model - onload</title>
11
12
<script type = "text/javascript">
<!--
[Link]
(1 OF 2)
13 var seconds = 0;
14
15 function startTimer() {
16 // 1000 milliseconds = 1 second
17 [Link]( "updateTime()", 1000 );
18 }
19
20 function updateTime() {
21 seconds++;
22 [Link] = seconds;
23 }
24 // -->
25 </script>
26 </head>
27
28 <body onload = "startTimer()">
29
30 <p>Seconds you have spent viewing this page so far:
31 <strong id = “soFar”>0</strong></p>
32
33 </body>
34 </html>
[Link]
(2 OF 2)
TRACKING THE MOUSE WITH
EVENT ONMOUSEMOVE
onmousemove
Fires repeatedly when the user moves the mouse
over the Web page
Gives position of the mouse
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "[Link]
4
5 <!-- Fig. 14.4: [Link] -->
6 <!-- Demonstrating the onmousemove event -->
7
8
9 [Link]
<html xmlns = "[Link]
<head>
ML
10 <title>DHTML Event Model - onmousemove event</title>
11 <script type = "text/javascript">
12 <!--
(1 OF 2)
13 function updateMouseCoordinates()
14 {
15 [Link] = [Link] +
16 " (" + [Link] + ", " + [Link] + ")";
17 }
18 // -->
19 </script>
20 </head>
21
22 <body style = "back-groundcolor: wheat"
23 onmousemove = "updateMouseCoordinates()">
24
25 <span id = "coordinates">(0, 0)</span><br />
26 <img src = "[Link]" style = "position: absolute;
27 top: 100; left: 100" alt = "Deitel" />
28
29 </body>
30 </html>
[Link]
ML
(2 OF 2)
ROLLOVERS WITH
ONMOUSEOVER AND ONMOUSEOUT
Two more events fired by mouse movements
onmouseover
Mouse cursor moves over element
Onmouseout
Mouse cursor leaves element
ROLLOVERS WITH
ONMOUSEOVER AND ONMOUSEOUT
Property of event Description
altkey This value is true if Alt key was pressed when event fired.
button Returns which mouse button was pressed by user (1: left-mouse button, 2:
right-mouse button, 3: left and right buttons, 4: middle button, 5: left and
middle buttons, 6: right and middle buttons, 7: all three buttons).
cancelBubble Set to false to prevent this event from bubbling (see Section 14.9, “Event
Bubbling”).
clientX / clientY The coordinates of the mouse cursor inside the client area (i.e., the active
area where the Web page is displayed, excluding scrollbars, navigation
buttons, etc.).
ctrlKey This value is true if Ctrl key was pressed when event fired.
offsetX / offsetY The coordinates of the mouse cursor relative to the object that fired the event.
propertyName The name of the property that changed in this event.
recordset A reference to a data field’s recordset (see Chapter 16, “Data Binding”).
returnValue Set to false to cancel the default browser action.
screenX / screenY The coordinates of the mouse cursor on the screen coordinate system.
shiftKey This value is true if Shift key was pressed when event fired.
srcElement A reference to the object that fired the event.
type The name of the event that fired.
x / y The coordinates of the mouse cursor relative to this element’s parent
element.
Fig. 14.5 Some event object properties.
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "[Link]
4
5 <!-- Fig 14.6: [Link] -->
6 <!-- Events onmouseover and onmouseout -->
7
8
9 ONMOUSEOVEROUT
<html xmlns = "[Link]
<head>
.HTML
10 <title>
11 DHTML Event Model - onmouseover and onmouseout
12 </title>
13
14
15
<script type = "text/javascript">
<!--
captionImage1 = new Image();
(1 OF 4)
16 [Link] = "[Link]";
17 captionImage2 = new Image();
18 [Link] = "[Link]";
19
20 function mOver()
21 {
22 if ( [Link] == "tableCaption" ) {
23 [Link] = [Link];
24 return;
25 }
26
27 // If the element which triggered onmouseover has
28 // an id, change its color to its id.
29 if ( [Link] )
30 [Link] =
31 [Link];
32 }
33
34
35
function mOut()
{
ONMOUSEOVEROUT
36
37
.HTML
if ( [Link] == "tableCaption" ) {
[Link] = [Link];
(2 OF 4)
38 return;
39 }
40
41 // If it has an id, change the text inside to the
42 // text of the id.
43 if ( [Link] )
44 [Link] = [Link];
45 }
46
47 [Link] = mOver;
48 [Link] = mOut;
49 // -->
50 </script>
51 </head>
52
53 <body style = "background-color: wheat">
54
55 <h1>Guess the Hex Code's Actual Color</h1>
56
57 <p>Can you tell a color from its hexadecimal RGB code
58
59
60
ONMOUSEOVEROUT
value? Look at the hex code, guess the color. To see
what color it corresponds to, move the mouse over the
hex code. Moving the mouse out will display the color
61
62
name.</p>
.HTML
(3 OF 4)
63 <table style = "width: 50%; border-style: groove;
64 text-align: center; font-family: monospace;
65 font-weight: bold">
66
67 <caption>
68 <img src = "[Link]" id = "tableCaption"
69 alt = "Table Caption" />
70 </caption>
71
72 <tr>
73 <td><a id = "Black">#000000</a></td>
74 <td><a id = "Blue">#0000FF</a></td>
75 <td><a id = "Magenta">#FF00FF</a></td>
76 <td><a id = "Gray">#808080</a></td>
77 </tr>
78 <tr>
79 <td><a id = "Green">#008000</a></td>
80 <td><a id = "Lime">#00FF00</a></td>
81 <td><a id = "Maroon">#800000</a></td>
82 <td><a id = "Navy">#000080</a></td>
83
84
85
</tr>
<tr> ONMOUSEOVEROUT
<td><a id = "Olive">#808000</a></td>
86
87
<td><a id = "Purple">#800080</a></td>
<td><a id = "Red">#FF0000</a></td>
.HTML
(4 OF 4)
88 <td><a id = "Silver">#C0C0C0</a></td>
89 </tr>
90 <tr>
91 <td><a id = "Cyan">#00FFFF</a></td>
92 <td><a id = "Teal">#008080</a></td>
93 <td><a id = "Yellow">#FFFF00</a></td>
94 <td><a id = "White">#FFFFFF</a></td>
95 </tr>
96 </table>
97
98 </body>
99 </html>
EVENT BUBBLING
Crucial part of the event model
Process whereby events fired in child
elements “bubble” up to their parent
elements
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "[Link]
4
5 <!-- Fig 14.9: [Link] -->
6 <!-- Disabling event bubbling -->
7
8 <html xmlns = "[Link]
9 <head>
10 <title>DHTML Event Model - Event Bubbling</title>
11
12 <script type = "text/javascript">
[Link]
(1 OF 2)
13 <!--
14 function documentClick()
15 {
16 alert( "You clicked in the document" );
17 }
18
19 function paragraphClick( value )
20 {
21 alert( "You clicked the text" );
22
23 if ( value )
24 [Link] = true;
25 }
26
27 [Link] = documentClick;
28 // -->
29 </script>
30 </head>
31
32 <body>
33
34 <p onclick = "paragraphClick( false )">Click here!</p>
35 <p onclick = "paragraphClick( true )">Click here, too!</p>
36 </body>
37 </html>
[Link]
(2 OF 2)
[Link] AND TRANSITIONS
Filters
Applied to any HTML control such as DIV
tags,form fields and images.
They are included within the CSS filter property.
<html>
<head>
<title>Flip filter
</title>
</head>
<body>
CONTINUED…
<div>
The text is turnd upside down
</div>
<div style=“position: absolute;top:50;
left:50;font-family:Arial;
Filter:flipV”>The text is turned upside down
</div>
</body>
</html>
DIFFERENT FILTERS ARE
Alpha-alpha bending
Blur-motion blur
Chroma-makes specified color transparent
Dropshadow-create outline of object
flipH-flip content horizontally
flipV-flip content vertical
Glow-create glow effect
Gray-convert to grayscale
Invert-invert color of object
Mask-produce mask of specified color
Shadow-like dropshadow except blurred edges
Wave-add a ripple to image
X-ray-like an OR function
TRANSITIONS
To give powerpoint like effects to web page.
Transitions are set as values of filter
property.
Three different images are required
EXAMPLE
<html>
<HEAD>
<SCRIPT>
var pic=[“[Link]”,”[Link]”,”[Link]”];
Var max=3;
Var i=0;
Var trans=1;
Var transmax=24;
[Link] Interval(“doTrans()”,3000);
Function doTrans()
{
If(i==max)
{i=0;}
CONTINUED….
Else
{i=i+1;}
[Link][0].apply();
[Link][0].Transition=trans;
[Link]=pic[i];
[Link][0].play();
If(trans=trans+1;}
}
<SCRIPT>
</HEAD>
<BODY
<IMG id=imgObj src=“” align=left STYLE=“filter:revealTrans()”>
</BODY>
</HTML>
CONTINUED….
Steps are
Save this code as a .HTM file.
Copy two images in the same directory.
Make sure the image names are specified.
Load the page.
THE VALUES FOR OTHER
TRANSITIONS ARE
Box in
Box out
Circle in
Circle out
Wipe up
Wipe down
Wipe left
Wipe right
Vertical blind
Horizontal blind
Checkerboard across etc
[Link] BINDING
Data binding
Data no longer reside exclusively on the server
Data can be maintained on the client
Eliminate server activity and network delays
Data Source Objects (DSOs)
Tabular Data Control (TDC)
[Link] TABULAR DATA
CONTROL
TDC is an ActiveX control which is icluded in the
HTML document through OBJECT tsg.
Parameters are
Charset
Dataurl
UseHeader
TextQualifier
EscapeChar
FieldDelim
Language
RowDelim
EXAMPLE
[Link]
name|age|sex|qual|dept|exp Nandhini|23|female|
BE|sales|1
<OBJECT ID=“emp”
CLASSID=‘clsid`;333C7BC4-460F-11D0-BC04-
00080C7055A83”>
<PARAM NAME=“DataURL” VALUE=“[Link]”>
<PARAM NAME=“UseHeader” VALUE=“TRUE”>
<PARAM NAME=“FieldDelim” VALUE=“,”>
</OBJECT>
<SPAN DATASRC=“#emp” DATAFLD=“name”></SPAN>
<SPANDATASRC=“#emp”DATAFLD=“age”></SPAN>
SOME PROPERTIES & METHODS
SUPPORTED BY TDC FOR JAVASCRIPT ARE
recordset
EOF
moveFirst()
moveNext()
moveLast()
ondatasetcomplete
SORTING DATA
The data items can be sorted in ascending or
dscending manner using the sort property.
Syntax:
PARAM name=“sort” value=“+-column_name”>
6.4 FILTERING
Data items can be displayed in a selective
manner according to the field values.
Syntax:
<PARAM name=“Filter” value=“filtering
string”>
The method and property is
[Link]: property that contain the filter
string
[Link](): Method that refreshes the
displayed data according to the settings of a
sort or Filter request
DYNAMIC SORTING
[Link] property contains the sort string(+-
column_name)
[Link]() method refreshes the displayed
data according to the settings of a sort.
Comparison operators are used in the filter
string.
