RadControls version
|
2013.2.717.40 |
.NET version |
4.0 |
Visual Studio version |
2010 |
programming language |
C# |
browser support |
all browsers supported by RadControls( Tested in IE 10 & firefox 23.0.1 )
|
PROJECT DESCRIPTION
Demonstrates how one can customize the rad-grid and can programmatically, add dynamic controls such as link button, show/hide columns & headers along with grouping.
The dynamically added link-button (Server Control) has added attributes which are accessible in Client Side
as well as Server Side event handlers ( Example includes how this can be achieved on server side)
if needed one may also assign id as following to be able to access in client side ( using selector etc. )
Manipulating RadGrid on server side
There are some
real–life requirements when we need to hide some columns and/or conditionally
form ‘em or have to add links to the Gridview. This article describes how we can:
1) Hide
columns dynamically
2) Add dynamic controls (linkbuton etc) some provision for conditional
formatting with client-side scripting and can make the things really
simple and also how can we hide columns from the grid that we need in the
application; (E.g. the PK or FK etc.)
A bit custom,
not very popular but interesting scenario that may add aesthetics to your
web-application.
Hiding Columns
A column can be
hidden from Gridview in a scenario where we need to query a particular column
from the database, but not needed to be displayed in the grid itself.
We can leverage the “OnItemDataBound” event and can change properties after casting e.Item to GridDataItem
Of course in
your application you may want to do this conditionally (role based and
permission/access-rights bases scenarios). Checking a column against null is a good
practice. Sure, we can take it to the next level in the case when we just need
to hide a column we may do something like following:
protected
void
RadGrid1_ItemDataBound(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridDataItem && thisGridDatatem !=
null
)
{
if
(thisGridDatatem[
"target_column"
] !=
null
)
{
thisGridDatatem[
"id"
].Controls.Clear();
LinkButton lb =
new
LinkButton();
lb.Text = ((System.Data.DataRowView)(e.Item.DataItem)).Row[3].ToString();
// Attributes
lb.Attributes.Add(
"attrib1"
,
((System.Data.DataRowView)(e.Item.DataItem)).Row[2].ToString()
);
lb.Attributes.Add(
"attrib2"
,
((System.Data.DataRowView)(e.Item.DataItem)).Row[4].ToString()
);
lb.Attributes.Add(
"attrib3"
,
((System.Data.DataRowView)(e.Item.DataItem)).Row[5].ToString()
);
lb.Command +=
new
CommandEventHandler(lb_Command);
lb.ID =
"someConvenientName"
+ e.Item.RowIndex.ToString();
TableCell c1 =
new
TableCell();
c1.Controls.Add(lb);
e.Item.Cells.RemoveAt(1);
e.Item.Cells.AddAt(1, c1);
}
}
}
void
lb_Command(
object
sender, CommandEventArgs e)
{
LinkButton lb = (LinkButton)sender;
string
casenum = lb.Text
, attrib1 = (lb.Attributes[
"attrib1"
] ??
""
).ToString()
, attrib2 = (lb.Attributes[
"attrib2"
] ??
""
).ToString()
, attrib3 = (lb.Attributes[
"attrib3"
] ??
""
).ToString();
}
Now if you go
back to your browser and look at the rendered code you may find something as shown in the screen shot (located in atteched zip archive), attributes are also available there. Now you may refer to this
control by using selectors using javascript or javascript library like jQuery !
Attached : Project Archive with screen snippet