This is a migrated thread and some comments may be shown as answers.

Filter menu events not invoke for RadGrid FilterType of "HeaderContext"

3 Answers 455 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Rob asked on 22 Jan 2019, 09:28 AM

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

Sort by
0
Attila Antal
Telerik team
answered on 25 Jan 2019, 08:50 AM
Hi Rob,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Rob
Top achievements
Rank 1
commented on 08 Feb 2019, 09:07 AM

Hi Attila,

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
Attila Antal
Telerik team
commented on 12 Feb 2019, 05:17 PM

Hi 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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Rob
Top achievements
Rank 1
commented on 01 Mar 2019, 11:20 AM

Hi Attila,

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
0
Attila Antal
Telerik team
answered on 06 Mar 2019, 08:27 AM
Hi 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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Rob
Top achievements
Rank 1
commented on 07 Mar 2019, 08:29 AM

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


Rob
Top achievements
Rank 1
commented on 07 Mar 2019, 08:30 AM

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>

Rob
Top achievements
Rank 1
commented on 07 Mar 2019, 08:32 AM

Attachment
Rob
Top achievements
Rank 1
commented on 07 Mar 2019, 08:32 AM

Don't know why but I cannot submit a screenshot.
0
Attila Antal
Telerik team
answered on 12 Mar 2019, 07:17 AM
Hi Rob,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Rob
Top achievements
Rank 1
commented on 12 Mar 2019, 10:15 AM

Hi Attila,

Perfect!

Thank you.

 

 

Mukesh
Top achievements
Rank 1
Iron
commented on 26 May 2022, 06:44 AM | edited

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

Attila Antal
Telerik team
commented on 26 May 2022, 01:36 PM

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.

Mukesh
Top achievements
Rank 1
Iron
commented on 30 May 2022, 07:07 AM

Hi Attila,

Thanks for your support.

Thank you.

Tags
Grid
Asked by
Rob
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or