Hi,
I have a RadGrid with filters. The FilterType is "HeaderContext".
I have restricted the filter options contained in the drop down list according to the field type.
For example, for a numeric field, I use options "GreaterThan", "LessThan" etc. For a string, I use options "Contains", "StartsWith" etc.
To achieve this, I use the following:
<ClientSettings>
<Scrolling AllowScroll="false" />
<ClientEvents OnFilterMenuShowing="FilterMenuShowing" />
</ClientSettings>
<FilterMenu EnableImageSprites="False" OnClientShowing="MenuShowing" />
However, these events are not invoked when the value RadGrid's FilterType is "HeaderContext".
This means that for each data type, the filter option drop down list contains all options, many of which are irrelavant.
Please can you offer some assistance that will enable me to restrict the filter options contained in the DropDownList where the FilterType of the RadGrid is "HeaderContext".
Thanks,
Rob
3 Answers, 1 is accepted
For the HeaderContextMenu, try using the OnHeaderMenuShowing client event which is fired before the header context menu is rendered.:
<
ClientSettings
>
<
ClientEvents
OnHeaderMenuShowing
=
"OnHeaderMenuShowing"
/>
</
ClientSettings
>
The other events you have tried are applicable for the basic filter menu. You can check out the following demo to see the basic filtering: Grid - Basic Filtering
Kind regards,
Attila Antal
Progress Telerik
Thank you for replying.
I have already tried OnHeaderMenuShowing, and it does not work. In fact, I get an error (See attached). This is because I need to get the column from the event args as shown below.
function OnFilterMenuShowing(sender, eventArgs) {
// I can get the column
column = eventArgs.get_column();
}
function OnHeaderMenuShowing(sender, eventArgs) {
// I cannot get the column
//JavaScript runtime error: Object doesn't support property or method 'get_column'
column = eventArgs.get_column();
}
Once I have got the column, I can then get the column data field "column.get_dataField()". Once I have got the data field, I can then determine which filter options to hide and show.
I can get the column from onFilterMenuShowing, however I cannot get it from OnHeaderMenuShowing. If you could let me know how I can get the column from the event args of OnHeaderMenuShowing,
that would really help.
Thanks,
Rob
The method to get the column name in this event is called get_gridColumn(). Please check out the OnHeaderMenuShowing
function
OnHeaderMenuShowing(sender, eventArgs) {
column = eventArgs.get_gridColumn();
}
Sometimes, if you are not sure, you can debug it yourself very easily by using the Browser's developer tools. I highly recommend checking out the Improve Your Debugging Skills with Chrome DevTools blog post which can serve as a guide when debugging an application on client side.
I hope this will help resolve the issue.
Kind regards,
Attila Antal
Progress Telerik
Thank you for replying.
Yes, I can get the column in OnHeaderMenuShowing. Thank you.
However, the OnClientShowing event is still not being invoked where the FilterType is "HeaderContext".
OnClientShowing does get invoked where the FilterType is "Classic" though. So I am puzzled as
to why it is not invoked where the FilterType is "HeaderContext"
I moved the logic from OnClientShowing to OnHeaderMenuShowing.
On doing so, the menu does not display.
When I inspect the value of items.getItem(i), the "_filterMenu" items are not present.
This is illustrated in the two attachments.
Looking forward to your response.
Thanks,
Rob
Not to be confused, RadGrid provides with two types of built-in filter menus. One of which is the Classic filter menu, where filter controls appear under each column and are always visible. This menu fires the OnFilterMenuShowing, OnClientShowing and FilterMenu-ClientShowing client-side events.
<
ClientSettings
>
<
ClientEvents
OnFilterMenuShowing
=
"OnFilterMenuShowing"
/>
</
ClientSettings
>
<
FilterMenu
OnClientShowing
=
"OnClientShowing"
></
FilterMenu
>
Classic filter menu example:
The other one is the HeaderContextMenu that opens either by right clicking on the column or clicking on the button located to the right of the column header text. This filter fires the OnColumnContextMenu, OnHeaderMenuShowing and HeaderContextMenu-ClientShowing client-side events.
<
ClientSettings
>
<
ClientEvents
OnColumnContextMenu
=
"OnColumnContextMenu"
OnHeaderMenuShowing
=
"
OnHeaderMenuShowing
"
/>
</
ClientSettings
>
<
HeaderContextMenu
OnClientShowing
=
"OnClientShowing"
></
HeaderContextMenu
>
ContextMenu example:
Of course, you can use both of them at the same time by setting the FilterType property to Combined.
Tell us which filter are you trying to use and what you would like to achieve, and we will advise you in according to that scenario.
Kind regards,
Attila Antal
Progress Telerik
Hi Attila,
Thank you for replying.
My requiremnent is as follows: using HeaderContextMenu, I want to hide filter options from the filter drop down list according to the data type of the column.
For example, for a numeric field, I use options "GreaterThan", "LessThan" etc. and hide "Contains", "StartsWith" etc. For a string, I use options "Contains", "StartsWith" etc. and hide "GreaterThan", "LessThan".
I am able to do this where the RadGrid "FilterType" is "Classic", but not where the RadGrid "FilterType" is "HeaderContext".
I can see what the problem is. I am interogating "items.getItem(i).get_value()" to get the filter options. But I do not get them where the RadGrid "FilterType" is "HeaderContext". The value I get is "ColumnsContainer".
The images I have already submitted illustrate this (OnClientShowing.png and OnHeaderMenuShowing.png ).
If you can help me get the filter options, that would be a great help.
I am 99% there. The remaining 1% is proving to be difficult.
I have attached a screenshot that shows how I get a value of "ColumsContainer" when I interrogate "items.getItem(i).get_value()" . I will try and post the script in a separate post. I cannot submit it as a file.
I look forward to your response.
Rob
Attachment and script.
function OnClientShowing(sender, args) {
if (column == null) return;
var i = 0;
var menu = sender;
var items = menu.get_items();
switch (column.get_dataField()) {
case "IssueID":
case "IssueReference":
case "FiscalYearNo":
case "FiscalQuarterNo":
case "FCFrameworkNumber":
i = 0;
// The problem is here. I cannot get the filter options
while (i < items.get_count()) {
if (!(items.getItem(i).get_value() in { 'NoFilter': '', 'EqualTo': '', 'NotEqualTo': '', 'GreaterThan': '', 'LessThan': '', 'GreaterThanOrEqualTo': '', 'LessThanOrEqualTo': '' })) {
var item = items.getItem(i);
if (item != null)
item.set_visible(false);
}
else {
var item = items.getItem(i);
if (item != null)
item.set_visible(true);
} i++;
}
break;
case "SourceName":
case "BusinessUnitName":
case "LocationName":
case "FCFrameworkName":
i = 0;
// The problem is here. I cannot get the filter options
while (i < items.get_count()) {
if (!(items.getItem(i).get_value() in { 'NoFilter': '', 'EqualTo': '', 'NotEqualTo': '', 'Contains': '', 'DoesNotContain': '', 'StartsWith': '', 'EndsWith': '' })) {
var item = items.getItem(i);
if (item != null)
item.set_visible(false);
}
else {
var item = items.getItem(i);
if (item != null)
item.set_visible(true);
} i++;
}
break;
case "PlannedResolutionDate":
i = 0;
// The problem is here. I cannot get the filter options
while (i < items.get_count()) {
if (!(items.getItem(i).get_value() in { 'NoFilter': '', 'EqualTo': ''})) {
var item = items.getItem(i);
if (item != null)
item.set_visible(false);
}
else {
var item = items.getItem(i);
if (item != null)
item.set_visible(true);
} i++;
}
break;
}
column = null;
menu.repaint();
}
function OnHeaderMenuShowing(sender, eventArgs) {
column = eventArgs.get_gridColumn();
}
<telerik:RadGrid ID="issuesGrid"
runat="server"
EnableLinqExpressions="false"
EnableHeaderContextMenu="True"
AutoGenerateColumns="False"
FilterType="HeaderContext"
AllowPaging="False"
AllowCustomPaging="False"
AllowFilteringByColumn="True"
CellSpacing="-1"
GridLines="Both"
EnableHeaderContextFilterMenu="True"
OnPreRender="issuesGrid_PreRender"
OnNeedDataSource="issuesGrid_NeedDataSource"
OnItemCreated="issuesGrid_ItemCreated"
OnFilterCheckListItemsRequested="issuesGrid_FilterCheckListItemsRequested"
OnItemDataBound="issuesGrid_ItemDataBound"
Skin="Default"
DataKeyNames="IssueID"
GroupingSettings-CaseSensitive="false"
AllowSorting="false"
GroupingEnabled="false">
<GroupingSettings CollapseAllTooltip="Collapse all groups" CaseSensitive="false"></GroupingSettings>
<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
<MasterTableView
CommandItemDisplay="None"
DataKeyNames="IssueID"
AutoGenerateColumns="false"
InsertItemDisplay="Top"
ClientDataKeyNames="IssueID"
TableLayout="Fixed"
AllowFilteringByColumn="True"
InsertItemPageIndexAction="ShowItemOnFirstPage">
<Columns>
<telerik:GridBoundColumn UniqueName="AuditID" DataField="AuditID" HeaderText="AuditID" Visible="false" />
<telerik:GridBoundColumn HtmlEncode="true" UniqueName="OverdueSlot" DataField="OverdueSlot" HeaderText="Days<br/>over" Visible="true" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="45"/>
<telerik:GridBoundColumn HtmlEncode="true" UniqueName="IssueID" DataField="IssueID" HeaderText="Unique<br/>Issue ID" Visible="true" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="44"/>
<telerik:GridBoundColumn HtmlEncode="true" UniqueName="IssueReference" DataField="IssueReference" HeaderText="Issue ref." Visible="true" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="45"/>
<telerik:GridBoundColumn HtmlEncode="true" UniqueName="FiscalYearNo" DataField="FiscalYearNo" HeaderText="Fin.<br/>year" Visible="true" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="45"/>
<telerik:GridBoundColumn HtmlEncode="true" UniqueName="FiscalQuarterNo" DataField="FiscalQuarterNo" HeaderText="Qtr" Visible="true" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="38" />
<telerik:GridBoundColumn HtmlEncode="true" UniqueName="BusinessUnitName" DataField="BusinessUnitName" HeaderText="Business Unit" Visible="true" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="119"/>
<telerik:GridBoundColumn HtmlEncode="true" UniqueName="LocationName" DataField="LocationName" HeaderText="Location" Visible="true" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="168" />
<telerik:GridTemplateColumn UniqueName="observationUrl" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" FilterCheckListEnableLoadOnDemand="false" AutoPostBackOnFilter="false" HeaderStyle-Width="25">
<ItemTemplate>
<asp:ImageButton runat="server" ID="observationImageButton"
ToolTip="Click to view observation"
ImageUrl="~/Images/_hascomment.png"
CommandName="ViewObservation"></asp:ImageButton>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn HtmlEncode="true" UniqueName="FCFrameworkNumber" DataField="FCFrameworkNumber" HeaderText="Section<br/>number" Visible="true" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="50" />
<telerik:GridBoundColumn HtmlEncode="true" UniqueName="FCFrameworkName" DataField="FCFrameworkName" HeaderText="Section name" Visible="true" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="155" />
<telerik:GridBoundColumn HtmlEncode="true" UniqueName="SourceName" DataField="SourceName" HeaderText="Source" Visible="true" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="80" />
<telerik:GridTemplateColumn UniqueName="GradeImageUrl" DataField="GradeID" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderText="Grade" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="40">
<ItemTemplate>
<asp:Image ID="gradeImage" ImageUrl='<%#Bind("GradeImageUrl") %>' runat="server" />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn UniqueName="AuditCreatedDate" DataField="AuditCreatedDate" HeaderText="Logged date" Visible="true" DataType="System.DateTime" DataFormatString="{0:dd-MMM-yy}" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="75" />
<telerik:GridTemplateColumn UniqueName="ViewIssueImageurl" HeaderText="" ItemStyle-HorizontalAlign="Center" AllowFiltering="false" HeaderStyle-Width="30">
<ItemTemplate>
<asp:HiddenField runat="server" ID="IssueIDHiddenfield" Value='<%#Bind("IssueID") %>' />
<asp:ImageButton runat="server" ID="viewIssueImageButton"
ImageUrl='~/Images/_eye.png'
ToolTip="View this issue."
Visible="true" />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn UniqueName="PlannedResolutionDate" DataField="PlannedResolutionDate" DataType="System.DateTime" DataFormatString="{0:dd-MMM-yy}" HeaderText="Planned<br/>resolution" Visible="true" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false" HeaderStyle-Width="75" />
<telerik:GridTemplateColumn UniqueName="PlannedResolutionDateHasChanged" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" FilterCheckListEnableLoadOnDemand="false" AutoPostBackOnFilter="false" HeaderStyle-Width="25">
<ItemTemplate>
<asp:Image ID="originalPlannedResolutionDateImage" ImageUrl='~/Images/infotip.ico' runat="server" />
<telerik:RadToolTip runat="server" ID="originalPlannedResolutionDateRadToolTip" OffsetX="0"
OffsetY="0" IsClientID="false" TargetControlID="originalPlannedResolutionDateImage" Position="BottomRight" EnableViewState="true" Animation="Slide" ShowCallout="false">
<div>
<table class="DetailsTable" width="100%">
<tr>
<td align="center" colspan="2">
<asp:Image ID="infoImage" runat="server" ImageUrl='~/images/issue.jpg' Visible ="true"/>
</td>
</tr>
<tr>
<th colspan="2">
The planned resolution date has changed.
</th>
</tr>
<tr>
<th width="25%">
Originally:
</th>
<td width="75%">
<asp:Label ID="originalPlannedResolutionDateLabel" runat="server" Text='<%#Bind("OriginalPlannedResolutionDateAsString") %>'></asp:Label>
</td>
</tr>
<tr>
<th>
Revised:
</th>
<td>
<asp:Label ID="plannedResolutionDateLabel" runat="server" Text='<%#Bind("PlannedResolutionDateAsString") %>'></asp:Label>
</td>
</tr>
</table>
</div>
</telerik:RadToolTip>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="IssueStatusImageUrl" DataField="IssueStatus" HeaderText="Status" ItemStyle-HorizontalAlign="Center" AllowFiltering="true" FilterCheckListEnableLoadOnDemand="true" AutoPostBackOnFilter="false">
<ItemTemplate>
<asp:Image ID="IssueStatusImage" ImageUrl='<%#Bind("StatusImageUrl") %>' ToolTip='<%#Bind("StatusImageTooplTip") %>' runat="server" />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<CommandItemSettings ShowAddNewRecordButton="false" />
</MasterTableView>
<FilterMenu RenderMode="Lightweight"></FilterMenu>
<HeaderContextMenu RenderMode="Lightweight"></HeaderContextMenu>
<ClientSettings EnablePostBackOnRowClick="false" EnableRowHoverStyle="true">
<Scrolling ScrollHeight="1500"
AllowScroll="true"
UseStaticHeaders="true"
SaveScrollPosition="true" />
<ClientEvents OnHeaderMenuShowing="OnHeaderMenuShowing" />
<Selecting AllowRowSelect="true" />
</ClientSettings>
<HeaderContextMenu OnClientShowing="OnClientShowing"></HeaderContextMenu>
</telerik:RadGrid>
Here is an example you can use a base to hide the filter options that you want. You might need to adjust it according to your project.
Try subscribing the grid to OnHeaderMenuShowing client event and apply JavaScript logic to hide the desired menu items.
<
telerik:RadGrid
...>
<
ClientSettings
>
<
ClientEvents
OnHeaderMenuShowing
=
"headerMenuShowing"
/>
</
ClientSettings
>
...
</
telerik:RadGrid
>
JavaScript - headerMenuShowing event handler
function
headerMenuShowing(sender, args) {
var
items = args.get_menu().get_items();
for
(
var
i = 0; i < items.get_count() ; i++) {
if
(items.getItem(i).get_value() ==
"FilterMenuParent"
) {
var
filterCombos = items.getItem(i).get_element().getElementsByClassName(
'RadComboBox'
);
for
(
var
j = 0; j < filterCombos.length; j++) {
var
combobox = filterCombos[j].control;
for
(
var
k = 0; k < combobox.get_items().get_count() ; k++) {
if
(!(combobox.get_items().getItem(k).get_text()
in
{
'NoFilter'
:
''
,
'EqualTo'
:
''
,
'Contains'
:
''
})) {
combobox.get_items().getItem(k).set_visible(
false
);
}
}
}
}
else
{
items.getItem(i).set_visible(
false
);
}
}
}
You can as well hide filtering options separately for columns with different data types:
function
headerMenuShowing(sender, args) {
// You can use the following condition to apply the logic on a specific column type
var
column = args.get_gridColumn();
if
(column.get_dataType() ==
"System.String"
) {
// logic to hide the filter options
}
if
(column.get_dataType() ==
"System.Decimal"
|| column.get_dataType() ==
"System.Int32"
) {
// logic to hide the filter options
}
}
Kind regards,
Attila Antal
Progress Telerik
Hello,
I have one issue for combined filter options in Mobile Device.
Issue is that once I click on filter icon there is sub menu of filter options not showing in Mobile.
FYI - In web its working fine.
Please do the needful for the same.
Let me know if anyone wants more details.
Thanks,
Mukesh Prajapati
Hi Mukesh,
Only the Lightweight and Classic RenderModes support different Types of filters.
The RenderMode="Mobile" renders a totally different HTML structure designed to make the Grid more adaptive to Mobile devices with its own Filtering mechanism.
For more details, you can check out the Mobile Support and Mobile Rendering articles.
Hi Attila,
Thanks for your support.
Thank you.