Hello,
I am using RadControls for ASP.NET AJAX 2009.1.527.20 and I have a RadGrid that requires some custom filtering.
For the first custom filter, I want a RadComboBox to drop down with a CheckBoxList. Each item in the CheckBoxList contains a CheckBox, an Image, and a Description. Then below that I would like "OK" and "Cancel" buttons. OK would apply the filter, and Cancel would just close the RadComboBox dropdown and not affect the RadGrid.
For the next custom filter, I have 5 columns of integers. I want one RadComboBox to drop down with a CheckBoxList. Each item in the CheckBoxList contains a CheckBox and a Description. Then below that I would like "OK" and "Cancel" buttons. OK would apply the filter, and Cancel would just close the RadComboBox dropdown and not affect the RadGrid.
I have (sort of) been able to create the <FilterTemplate> for each of these, but I do not know how to do a few things:
-
How do I add the "OK" and "Cancel" buttons to the template?
-
How do I apply the results of the CheckBoxes in the CheckBoxList to the RadGrid filter functionality?
I have provided a sample VS 2010 web application that demonstrates what I have and want. In this sample, I am using an XmlDataSource so I can provide sample data. In my real application, I am binding the RadGrid using the OnNeedDataSource event.
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadGridSample.Default" %>
<%@ Register Namespace="Telerik.Web.UI" TagPrefix="telerik" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
id
=
"Head1"
runat
=
"server"
>
<
title
>RadGrid Sample - Custom Filtering</
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
/>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
style
type
=
"text/css"
>
html
{
overflow: hidden;
}
html,
body,
form
{
margin: 0;
height: 100%;
}
.GridWrapper
{
height: 100%;
width: 100%;
}
body
{
background-color: #F5DEB3;
color: #660000;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 8pt;
}
.combo-item-template input,
.combo-item-template label
{
vertical-align:middle;
}
.combo-item-template img
{
vertical-align:top;
}
.rcbSlide,
.RadComboBoxDropDown_Default
{
width: 300px !important;
}
.StatusGreen
{
background: url('../images/1_green_light.gif') no-repeat center;
}
.StatusYellow
{
background: url('../images/2_yellow_light.gif') no-repeat center;
}
.StatusRed
{
background: url('../images/3_red_light.gif') no-repeat center;
}
.StatusWarning
{
background: url('../images/4_warning_light.gif') no-repeat center;
}
.StatusPending
{
background: url('../images/5_pending_light.gif') no-repeat center;
}
</
style
>
</
telerik:RadCodeBlock
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
OnAjaxRequest
=
"RadAjaxManager1_AjaxRequest"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadGrid1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
div
class
=
"GridWrapper"
>
<!-- Grid start -->
<
telerik:RadGrid
runat
=
"server"
ID
=
"RadGrid1"
AllowFilteringByColumn
=
"true"
AllowPaging
=
"True"
AllowSorting
=
"True"
AutoGenerateColumns
=
"False"
DataSourceID
=
"XmlDataSource1"
Height
=
"300px"
OnItemCommand
=
"RadGrid1_ItemCommand"
OnItemDataBound
=
"RadGrid1_ItemDataBound"
OnPreRender
=
"RadGrid1_PreRender"
PageSize
=
"10"
Width
=
"800px"
>
<
ClientSettings
EnableRowHoverStyle
=
"true"
>
<
Resizing
AllowColumnResize
=
"true"
ClipCellContentOnResize
=
"true"
EnableRealTimeResize
=
"true"
/>
<
Selecting
AllowRowSelect
=
"true"
/>
<
Scrolling
AllowScroll
=
"true"
UseStaticHeaders
=
"true"
/>
</
ClientSettings
>
<
MasterTableView
AllowPaging
=
"true"
TableLayout
=
"Fixed"
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"Status"
AllowFiltering
=
"true"
AllowSorting
=
"true"
FilterControlWidth
=
"42px"
HeaderText
=
"Status"
SortExpression
=
"Status"
UniqueName
=
"Status"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
Width
=
"56px"
/>
<
ItemStyle
HorizontalAlign
=
"Center"
/>
<
FilterTemplate
>
<
telerik:RadComboBox
runat
=
"server"
ID
=
"RadComboBox1"
HighlightTemplatedItems
=
"true"
Width
=
"42"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
""
Count
=
"1"
Info
=
"All needed updates installed"
Image
=
"../images/1_green_light.gif"
/>
<
telerik:RadComboBoxItem
Text
=
""
Count
=
"2"
Info
=
"Some updates pending or unknown"
Image
=
"../images/2_yellow_light.gif"
/>
<
telerik:RadComboBoxItem
Text
=
""
Count
=
"3"
Info
=
"Some updates failed"
Image
=
"../images/3_red_light.gif"
/>
<
telerik:RadComboBoxItem
Text
=
""
Count
=
"4"
Info
=
"Deregistered or timed out"
Image
=
"../images/4_warning_light.gif"
/>
<
telerik:RadComboBoxItem
Text
=
""
Count
=
"5"
Info
=
"Waiting for rollup information"
Image
=
"../images/5_pending_light.gif"
/>
</
Items
>
<
ItemTemplate
>
<
div
onclick
=
"StopPropagation(event)"
class
=
"combo-item-template"
>
<
asp:CheckBox
runat
=
"server"
ID
=
"chk1"
Checked
=
"true"
onclick
=
"onCheckBoxClick_Status(this)"
/>
<
asp:Label
runat
=
"server"
ID
=
"Label1"
AssociatedControlID
=
"chk1"
>
<
span
class
=
"NoWrap"
>
<
img
id
=
"img<%# DataBinder.Eval(Container, "
Attributes['Count']") %>"
src="<%# DataBinder.Eval(Container, "Attributes['Image']") %>"
alt="<%# DataBinder.Eval(Container, "Attributes['Info']") %>" />
<%# DataBinder.Eval(Container, "Attributes['Info']")%></
span
></
asp:Label
>
</
div
>
</
ItemTemplate
>
</
telerik:RadComboBox
>
<
telerik:RadScriptBlock
ID
=
"RadScriptBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
language
=
"javascript"
>
function onCheckBoxClick_Status(chk)
{
var combo = $find('<%# ((GridItem)Container).FindControl("RadComboBox1").ClientID %>');
var text = "";
var values = "";
// Get the collection of all items.
var items = combo.get_items();
// Enumerate all items.
for (var i = 0; i <
items.get_count
(); i++)
{
// Get the checkbox element of the current item.
var chk1 = $get(combo.get_id() + "_i" + i + "_chk1");
if (chk1.checked)
{
var
item
=
items
.getItem(i);
var
info
=
item
.get_attributes().getAttribute("Count");
text += info + ",";
}
}
// Remove the last comma from the string.
text
=
removeLastComma
(text);
//alert("text: " + text);
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Status," + text );
}
// This method removes the ending comma from a string.
function removeLastComma(str)
{
str = str.substr(0, str.length - 1);
return str;
}
function StopPropagation(e)
{
// Cancel bubbling.
e.cancelBubble = true;
if (e.stopPropagation)
{
e.stopPropagation();
}
//alert("Stop Propagation done.");
}
</
script
>
</
telerik:RadScriptBlock
>
</
FilterTemplate
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"DNSName"
AllowFiltering
=
"true"
FilterControlWidth
=
"150px"
HeaderText
=
"Computer Name"
Resizable
=
"true"
SortExpression
=
"DNSName"
UniqueName
=
"DNSName"
>
<
HeaderStyle
Width
=
"190px"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"CountInstalled"
AllowFiltering
=
"true"
FilterControlWidth
=
"34px"
HeaderText
=
"Installed"
SortExpression
=
"CountInstalled"
UniqueName
=
"CountInstalled"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
Width
=
"66px"
/>
<
ItemStyle
HorizontalAlign
=
"Center"
/>
<
FilterTemplate
>
<
telerik:RadComboBox
runat
=
"server"
ID
=
"RadComboBox2"
HighlightTemplatedItems
=
"true"
Width
=
"60"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
""
Value
=
"Installed"
/>
<
telerik:RadComboBoxItem
Text
=
""
Value
=
"Needed"
/>
<
telerik:RadComboBoxItem
Text
=
""
Value
=
"Not Needed"
/>
<
telerik:RadComboBoxItem
Text
=
""
Value
=
"Failed"
/>
<
telerik:RadComboBoxItem
Text
=
""
Value
=
"Unknown"
/>
</
Items
>
<
ItemTemplate
>
<
div
onclick
=
"StopPropagation(event)"
class
=
"combo-item-template"
>
<
asp:CheckBox
runat
=
"server"
ID
=
"chk2"
Checked
=
"true"
onclick
=
"onCheckBoxClick_Counts(this)"
/>
<
asp:Label
runat
=
"server"
ID
=
"Label2"
AssociatedControlID
=
"chk2"
>
<
span
class
=
"NoWrap"
>
<%# DataBinder.Eval(Container, "Value")%>
</
span
>
</
asp:Label
>
</
div
>
</
ItemTemplate
>
</
telerik:RadComboBox
>
</
FilterTemplate
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"CountNeeded"
AllowFiltering
=
"false"
FilterControlWidth
=
"34px"
HeaderText
=
"Needed"
SortExpression
=
"CountNeeded"
UniqueName
=
"CountNeeded"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
Width
=
"63px"
/>
<
ItemStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"CountNotNeeded"
AllowFiltering
=
"false"
FilterControlWidth
=
"34px"
HeaderText
=
"Not Needed"
SortExpression
=
"CountNotNeeded"
UniqueName
=
"CountNotNeeded"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
Width
=
"70px"
/>
<
ItemStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"CountFailed"
AllowFiltering
=
"false"
FilterControlWidth
=
"34px"
HeaderText
=
"Failed"
SortExpression
=
"CountFailed"
UniqueName
=
"CountFailed"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
Width
=
"56px"
/>
<
ItemStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"CountUnknown"
AllowFiltering
=
"false"
FilterControlWidth
=
"34"
HeaderText
=
"Unknown"
SortExpression
=
"CountUnknown"
UniqueName
=
"CountUnknown"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
Width
=
"72px"
/>
<
ItemStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"ResponsiblePerson"
AllowFiltering
=
"true"
AutoPostBackOnFilter
=
"true"
FilterControlWidth
=
"50px"
FilterDelay
=
"1000"
HeaderText
=
"PID"
SortExpression
=
"ResponsiblePerson"
UniqueName
=
"ResponsiblePerson"
>
<
HeaderStyle
Width
=
"70px"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"SUSClientId"
UniqueName
=
"SUSClientId"
Visible
=
"false"
/>
</
Columns
>
</
MasterTableView
>
<
PagerStyle
Mode
=
"NextPrevAndNumeric"
/>
</
telerik:RadGrid
>
</
div
>
<
asp:XmlDataSource
ID
=
"XmlDataSource1"
runat
=
"server"
DataFile
=
"~/App_Data/RadGrid_SampleData.xml"
>
</
asp:XmlDataSource
>
</
form
>
</
body
>
</
html
>
Default.aspx.cx
using
System;
using
System.Collections.Generic;
using
System.Data;
using
System.Drawing;
using
System.Text;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
Telerik.Web.UI;
namespace
RadGridSample
{
public
partial
class
Default : System.Web.UI.Page
{
protected
void
Page_Load(
object
sender, EventArgs e)
{
}
#region . RadAjaxManager1_AjaxRequest() .
protected
void
RadAjaxManager1_AjaxRequest(
object
sender, AjaxRequestEventArgs e)
{
string
strArgument = e.Argument.ToString();
string
[] astrValues = strArgument.Split(
','
);
string
[] astrImages =
new
string
[5] {
"green"
,
"yellow"
,
"red"
,
"warning"
,
"pending"
};
if
(astrValues[0] ==
"Status"
)
{
StringBuilder sbWhere =
new
StringBuilder();
for
(
int
i = 1; i < astrValues.Length; i++)
{
sbWhere.Append(String.Format(
"(Status = \"{0}_{1}_light.gif\") OR "
,
astrValues[i],
astrImages[i]));
}
// Remove trailing " OR ".
sbWhere.Length -= 4;
string
strWhere = sbWhere.ToString();
string
strFilter = RadGrid1.MasterTableView.FilterExpression;
RadGrid1.MasterTableView.FilterExpression = strWhere;
RadGrid1.Rebind();
}
}
// RadAjaxManager1_AjaxRequest()
#endregion
#region . RadGrid1_ItemCommand() .
protected
void
RadGrid1_ItemCommand(
object
source, GridCommandEventArgs e)
{
if
(e.CommandName == RadGrid.FilterCommandName)
{
Pair oFilterPair = (Pair)e.CommandArgument;
string
strFirst = oFilterPair.First.ToString();
string
strSecond = oFilterPair.Second.ToString();
TextBox txtFilterBox = (e.Item
as
GridFilteringItem)[strSecond].Controls[0]
as
TextBox;
string
strFilterBoxText = txtFilterBox.Text;
string
strCurrentFilterExpression = String.Format(
"Current Filter Expressioin: [{0}] {1} {2}"
,
strSecond,
strFirst,
strFilterBoxText);
}
}
// RadGrid1_ItemCommand()
#endregion
#region . RadGrid1_ItemDataBound() .
protected
void
RadGrid1_ItemDataBound(
object
sender, GridItemEventArgs e)
{
try
{
if
(e.Item
is
GridPagerItem)
{
// Get the number of rows returned in the data set.
int
intCountComputers = (e.Item
as
GridPagerItem).Paging.DataSourceCount;
}
else
if
(e.Item
is
GridDataItem)
{
GridDataItem oItem = (GridDataItem)e.Item;
// Setup the stoplight graphic and tooltip.
string
strCssClass =
""
;
string
strStatus = oItem[
"Status"
].Text;
string
strToolTip =
""
;
switch
(strStatus.Substring(0, 1))
{
case
"1"
:
// Green
strCssClass =
"StatusGreen"
;
strToolTip =
"All needed updates installed"
;
break
;
case
"2"
:
// Yellow
strCssClass =
"StatusYellow"
;
strToolTip =
"Some updates pending install or unknown"
;
break
;
case
"3"
:
// Red
strCssClass =
"StatusRed"
;
strToolTip =
"Some updates failed"
;
break
;
case
"4"
:
// Yellow Exclamation Mark
strCssClass =
"StatusWarning"
;
strToolTip =
"Deregistered or timed out"
;
break
;
case
"5"
:
// Purple
strCssClass =
"StatusPending"
;
strToolTip =
"Waiting for rollup information"
;
break
;
}
oItem[
"Status"
].CssClass = strCssClass;
oItem[
"Status"
].ToolTip = strToolTip;
oItem[
"Status"
].Text = strStatus.Substring(0, 1);
// Create the link for the DNS Name column to open the computer
// info in a popup window.
oItem[
"DNSName"
].Text =
String.Format(
"<a href=\"JavaScript: ShowComputer('{0}','{1}')\">{2}</a>"
,
oItem[
"SUSClientId"
].Text,
"1"
,
oItem[
"DNSName"
].Text);
// Get the update counts.
int
intInstalled = Convert.ToInt32(oItem[
"CountInstalled"
].Text);
int
intNeeded = Convert.ToInt32(oItem[
"CountNeeded"
].Text);
int
intNotNeeded = Convert.ToInt32(oItem[
"CountNotNeeded"
].Text);
int
intFailed = Convert.ToInt32(oItem[
"CountFailed"
].Text);
int
intUnknown = Convert.ToInt32(oItem[
"CountUnknown"
].Text);
// Check status: Active, Inactive, Deregistered.
string
strActive = oItem[
"IsActive"
].Text;
switch
(strActive)
{
case
""
:
case
"1"
:
oItem[
"IsActive"
].Text = (strActive ==
""
?
"(Active)"
:
"Active"
);
// Set the font color for the days ago field.
string
strColorDaysAgo =
""
;
string
strDaysAgo = oItem[
"DaysAgo"
].Text;
if
(strDaysAgo.StartsWith(
"Not"
))
{
strColorDaysAgo =
" ColorRed"
;
oItem[
"DaysAgo"
].CssClass = strColorDaysAgo;
}
else
if
(strDaysAgo.IndexOf(
" "
) != -1)
{
int
intDaysAgo =
int
.Parse(strDaysAgo.Substring(0, strDaysAgo.IndexOf(
" "
)));
if
((intDaysAgo > 1) && (intDaysAgo < 8))
strColorDaysAgo =
" ColorYellow"
;
else
if
(intDaysAgo > 8)
strColorDaysAgo =
" ColorRed"
;
oItem[
"DaysAgo"
].CssClass = strColorDaysAgo;
}
// Set the font colors for the update counts fields.
if
(intInstalled != 0) oItem[
"CountInstalled"
].CssClass +=
" ColorGreen"
;
if
(intNeeded != 0) oItem[
"CountNeeded"
].CssClass +=
" ColorYellow"
;
if
(intNotNeeded != 0) oItem[
"CountNotNeeded"
].CssClass +=
" ColorYellow"
;
if
(intFailed != 0) oItem[
"CountFailed"
].CssClass +=
" ColorRed"
;
if
(intUnknown != 0) oItem[
"CountUnknown"
].CssClass +=
" ColorYellow"
;
break
;
case
"0"
:
oItem[
"DNSName"
].CssClass =
"GrayLink"
;
oItem[
"IsActive"
].Text =
"Deregistered"
;
oItem.Font.Italic =
true
;
oItem.ForeColor = Color.FromArgb(255, 140, 140, 140);
break
;
case
"-1"
:
oItem[
"DNSName"
].CssClass =
"GrayLink"
;
oItem[
"IsActive"
].Text =
"Timed Out"
;
oItem.Font.Italic =
true
;
oItem.ForeColor = Color.FromArgb(255, 140, 140, 140);
break
;
}
}
}
catch
(Exception ex)
{
}
}
//RadGrid1_ItemDataBound()
#endregion
#region . RadGrid1_PreRender() .
protected
void
RadGrid1_PreRender(
object
sender, EventArgs e)
{
if
(ViewState[
"filterRawString"
] !=
null
)
{
foreach
(GridFilteringItem item
in
RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem))
{
RadComboBox combo = (RadComboBox)item.FindControl(
"RadComboBox1"
);
foreach
(RadComboBoxItem comboItem
in
combo.Items)
{
if
(ViewState[
"filterRawString"
].ToString().Contains(comboItem.Text.ToString()))
{
CheckBox chk = (CheckBox)comboItem.FindControl(
"chk1"
);
chk.Checked =
true
;
}
else
{
CheckBox chk = (CheckBox)comboItem.FindControl(
"chk1"
);
chk.Checked =
false
;
}
}
}
}
}
// RadGrid1_PreRender()
#endregion
}
}
Can you provide a sample of how to make this work?
Thanks,
Randall Price
Senior Programmer Analyst
Virginia Tech
1700 Pratt Drive
Blacksburg, VA 24061