The grid I am using has several columns with ShowFilterIcon = true but the columns are to close to show filter icon on every column.
I would like to be able to show the filter icon only when a user clicks into the column header filter box.
I would like to be able to show the filter icon only when a user clicks into the column header filter box.
5 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
answered on 11 Jul 2014, 11:15 AM
Hi James,
Please have a look into the sample code snippet to show filter icon dynamically.
ASPX:
C#:
JavaScript:
Thanks,
Princy.
Please have a look into the sample code snippet to show filter icon dynamically.
ASPX:
<
telerik:RadGrid
AutoGenerateColumns
=
"False"
ID
=
"RadGrid1"
DataSourceID
=
"SqlDataSource1"
AllowFilteringByColumn
=
"True"
AllowSorting
=
"True"
ShowFooter
=
"True"
AllowPaging
=
"True"
runat
=
"server"
ResolvedRenderMode
=
"Classic"
OnItemCommand
=
"RadGrid1_ItemCommand"
>
<
GroupingSettings
CaseSensitive
=
"false"
></
GroupingSettings
>
<
MasterTableView
AutoGenerateColumns
=
"false"
AllowFilteringByColumn
=
"True"
ShowFooter
=
"True"
>
<
Columns
>
<
telerik:GridBoundColumn
FilterControlWidth
=
"120px"
DataField
=
"ShipName"
HeaderText
=
"ShipName"
AutoPostBackOnFilter
=
"true"
CurrentFilterFunction
=
"Contains"
ShowFilterIcon
=
"false"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
FilterControlWidth
=
"50px"
DataField
=
"ShipPostalCode"
ShowFilterIcon
=
"false"
HeaderText
=
"ShipPostalCode"
>
<
FooterStyle
Font-Bold
=
"true"
></
FooterStyle
>
</
telerik:GridBoundColumn
>
</
Columns
>
</
MasterTableView
>
<
ClientSettings
>
<
ClientEvents
OnColumnClick
=
"OnColumnClick"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
C#:
public
static
string
item =
string
.Empty;
protected
void
RadGrid1_ItemCommand(
object
sender, GridCommandEventArgs e)
{
if
(e.CommandName == RadGrid.FilterCommandName)
{
foreach
(GridColumn column
in
RadGrid1.MasterTableView.RenderColumns)
{
if
(column.UniqueName.ToString() == item)
{
column.ShowFilterIcon =
false
;
break
;
}
}
}
if
(e.CommandName ==
"customCommand"
)
{
foreach
(GridColumn column
in
RadGrid1.MasterTableView.RenderColumns)
{
item = e.CommandArgument.ToString();
if
(column.UniqueName.ToString() == e.CommandArgument.ToString())
{
column.ShowFilterIcon =
true
;
break
;
}
}
}
}
JavaScript:
function
OnColumnClick(sender, eventArgs) {
var
columnUniqueName = eventArgs.get_gridColumn().get_uniqueName();
$find(
"<%= RadGrid1.ClientID %>"
).get_masterTableView().fireCommand(
"customCommand"
, columnUniqueName);
}
Thanks,
Princy.
0
James
Top achievements
Rank 1
answered on 11 Jul 2014, 12:46 PM
Princy,
When I click the header column it takes 2 clicks to get the filter icon to appear.
Page reloading issue.
Anyway this is close to what I need but not exactly.
Let me explain it a little better.
So I have a column called Customer that has a filter box above the column. "See FilterColumn1.jpg"
When the user clicks inside the filter box, I need the filter button to appear. "See FilterColumn2.jpg"
You current code is for when I click on the header column but I need it for when I click inside the filter box.
Thanks for the help.
When I click the header column it takes 2 clicks to get the filter icon to appear.
Page reloading issue.
Anyway this is close to what I need but not exactly.
Let me explain it a little better.
So I have a column called Customer that has a filter box above the column. "See FilterColumn1.jpg"
When the user clicks inside the filter box, I need the filter button to appear. "See FilterColumn2.jpg"
You current code is for when I click on the header column but I need it for when I click inside the filter box.
Thanks for the help.
0
Princy
Top achievements
Rank 2
answered on 15 Jul 2014, 12:13 PM
Hi James,
Please try the following code snippet to show the Sort Icon on click of filter textbox.
C#:
JS:
Thanks,
Princy
Please try the following code snippet to show the Sort Icon on click of filter textbox.
C#:
public
static
string
item =
string
.Empty;
bool
isSelect =
false
;
void
RadGrid1_PreRender(
object
sender, EventArgs e)
{
if
(!isSelect)
{
foreach
(GridColumn column
in
RadGrid1.MasterTableView.RenderColumns)
{
RadGrid1.MasterTableView.GetColumn(column.UniqueName).ShowFilterIcon =
false
;
RadGrid1.Rebind();
}
}
}
void
RadGrid1_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridFilteringItem)
{
GridFilteringItem filteringItem = e.Item
as
GridFilteringItem;
foreach
(GridColumn col
in
RadGrid1.MasterTableView.Columns)
{
TextBox box = filteringItem[col.UniqueName].Controls[0]
as
TextBox;
box.Attributes.Add(
"onfocus"
,
"return MyClick('"
+ col.UniqueName +
"');"
);
}
}
}
void
RadGrid1_ItemCommand(
object
sender, GridCommandEventArgs e)
{
if
(e.CommandName ==
"customCommand"
)
{
isSelect =
true
;
foreach
(GridColumn column
in
RadGrid1.MasterTableView.RenderColumns)
{
item = e.CommandArgument.ToString();
if
(column.UniqueName.ToString() == e.CommandArgument.ToString())
{
column.ShowFilterIcon =
true
;
RadGrid1.Rebind();
foreach
(GridFilteringItem filteritem
in
RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem))
{
TextBox box = filteritem[column.UniqueName].Controls[0]
as
TextBox;
box.Focus();
}
}
}
}
}
JS:
<script type=
"text/javascript"
>
function
MyClick(column) {
$find(
"<%= RadGrid1.ClientID %>"
).get_masterTableView().fireCommand(
"customCommand"
, column);
}
</script>
Thanks,
Princy
0
James
Top achievements
Rank 1
answered on 22 Jul 2014, 03:13 AM
For some reason the RadGrid1_ItemCommand is not firing.
The "MyClick" function is firing when I click in a textbox on the filter and if I do an alert(column) it is showing the correct column but it does not call the "ItemCommand" event.
I have tried to add / remove the OnItemCommand="RadGrid1_ItemCommand on the <telerik:RadGrid...> but it had no effect.
The "MyClick" function is firing when I click in a textbox on the filter and if I do an alert(column) it is showing the correct column but it does not call the "ItemCommand" event.
I have tried to add / remove the OnItemCommand="RadGrid1_ItemCommand on the <telerik:RadGrid...> but it had no effect.
0
Princy
Top achievements
Rank 2
answered on 24 Jul 2014, 04:56 AM
Hi James,
Please make sure you are binding the grid using Advanced Data-binding (Using NeedDataSource Event) also make sure you have not disabled the ViewState anywhere. If this doesn't help, provide your full code snippet.
Thanks,
Princy
Please make sure you are binding the grid using Advanced Data-binding (Using NeedDataSource Event) also make sure you have not disabled the ViewState anywhere. If this doesn't help, provide your full code snippet.
Thanks,
Princy