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

12 posts, 0 answers
  1. Rob
    Rob avatar
    14 posts
    Member since:
    Dec 2014

    Posted 22 Jan Link to this post

    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

  2. Attila Antal
    Admin
    Attila Antal avatar
    297 posts

    Posted 25 Jan Link to this post

    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.
  3. Rob
    Rob avatar
    14 posts
    Member since:
    Dec 2014

    Posted 08 Feb in reply to Attila Antal Link to this post

    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
  4. Attila Antal
    Admin
    Attila Antal avatar
    297 posts

    Posted 12 Feb Link to this post

    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.
  5. Rob
    Rob avatar
    14 posts
    Member since:
    Dec 2014

    Posted 01 Mar in reply to Attila Antal Link to this post

    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
  6. Attila Antal
    Admin
    Attila Antal avatar
    297 posts

    Posted 06 Mar Link to this post

    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.
  7. Rob
    Rob avatar
    14 posts
    Member since:
    Dec 2014

    Posted 07 Mar in reply to Attila Antal Link to this post

    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


  8. Rob
    Rob avatar
    14 posts
    Member since:
    Dec 2014

    Posted 07 Mar Link to this post

    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>

  9. Rob
    Rob avatar
    14 posts
    Member since:
    Dec 2014

    Posted 07 Mar Link to this post

    Attachment
  10. Rob
    Rob avatar
    14 posts
    Member since:
    Dec 2014

    Posted 07 Mar Link to this post

    Don't know why but I cannot submit a screenshot.
  11. Attila Antal
    Admin
    Attila Antal avatar
    297 posts

    Posted 12 Mar Link to this post

    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.
  12. Rob
    Rob avatar
    14 posts
    Member since:
    Dec 2014

    Posted 12 Mar in reply to Attila Antal Link to this post

    Hi Attila,

    Perfect!

    Thank you.

     

     

Back to Top